#用面向對象封裝通用選項卡 ###改成面向對象原則： 1. 全局變量就是屬性 2. 函數就是方法 3. onload中創建對象 4. 改this指向問題，在什么情況下this指向特別容易被修改（事件或者是定時器），盡量讓面向對象中的this指向對象 ###復習this指向 ``` oDiv.onclick = function(){ this: oDiv // 這里的this指的是oDiv }; oDiv.onclick = show; function show() { this: oDiv // 這里的this指的還是oDiv }; oDiv.onclick = function(){ show(); }; function show() { this: window // 這里的this指的就是window } ``` ###用面向對象封裝通用選項卡 ``` window.onload = function () { var t1 = new Tab(); t1.init(); }; function Tab() { this.oParent = document.getElementById('div1'); this.aInput = this.oParent.getElementsByTagName('input'); this.aDiv = this.oParent.getElementsByTagName('div'); } Tab.prototype.init = function () { var _this = this; for (var i = 0; i < this.aInput.length; i++) { this.aInput[i].index = i; this.aInput[i].onclick = function () { _this.change(this); }; } }; Tab.prototype.change = function (obj) { for (var j = 0; j < this.aInput.length; j++) { this.aInput[j].className = ''; this.aDiv[j].style.display = 'none'; } obj.className = 'active'; this.aDiv[obj.index].style.display = 'block'; }; ```