前言
this在不同的使用情景中，含義多變，看著看著就可能蒙圈。后面發現通過實例的方式來學習this，通過審查元素直接查看this指向的結果，對this會清晰很多。
總的而言，this指向全局對象window的情況有：全局直接調用this、在函數中調用this和setTimeout和setInterval方法的this。而dom對象綁定事件中的this、構造函數中的this、對象方法中的this則各有所指，不再指向全局對象window。具體見例子說明。
一、this為全局對象
直接調用時指向全局對象。在瀏覽器里，全局對象就是window
<script>
console.log(this)
</script>
結果輸出為：window對象
再舉一個栗子：
window.name = 'aaa';
function getName(){
console.log(this.name);
}
getName(); // aaa
二、this在函數中調用
在函數中直接調用this，this也是指向全局對象window。所以在下面這個例子中，this.b是指向全局變量b=2,而非函數里的局部變量b=100
<script>
var a=1
var b=2
function testthis() {
var b=100
console.log(this) //輸出結果為：window
console.log(this.a) //輸出結果為：1
console.log(this.b) //輸出結果為：2
}
testthis()
</script>
在函數內部的嵌套函數中的this，也是指向全局對象window，而非其父函數。
<script>
var a=1
var b=2
function test(){
function innertest(){
console.log(this) //輸出結果為：window
console.log(this.b) //輸出結果為：2
}
innertest()
}
test()
</script>
三、dom對象綁定事件中的this
dom對象綁定事件中的this，指向的是dom對象。這種情形的使用很常見。
<body>
<button class="domtest">dianwo</button>
<script>
var $domtest=document.querySelector('.domtest')
$domtest.addEventListener('click',function(){
console.log(this)
console.log($(this))
})
</script>
</body>
輸出結果如下：
this指向<button class="domtest">dianwo</button>對象.
$(this)則是指向button元素做了一層包裹后的jquery對象。
四、特例：setTimeout和setInterval方法
setTimeout和setInterval方法中的this，就指向全局對象window。即使setTimeout或setInterval方法用在dom對象的綁定事件下，也是指向全局對象window。
那如果在這情景中，我就是想要在setTimeout方法中，讓this能指向dom對象呢？
在這個例子，就使用了賦值借位的方式var _this=this，也是實際應用中常見的做法。
var _this=this處于$domtest.addEventListener事件下的第一層級，this就指向$domtest對象，即<button class="domtest">dianwo</button>元素，將其賦值給_this。然后在setTimeout方法中使用_this，就也能指向$domtest對象。
<body>
<button class="domtest">dianwo</button>
<script>
var $domtest=document.querySelector('.domtest')
$domtest.addEventListener('click',function(){
console.log(this) //輸出結果為：<button class="domtest">dianwo</button>
var _this=this
setTimeout(function(){
console.log(_this) //輸出結果為：<button class="domtest">dianwo</button>
console.log(this) //輸出結果為：window
},300)
})
</script>
</body>
五、構造函數中的this
構造函數就是通過這個函數來實例化生成一個對象。那么構造函數中的this，就是指這個構造函數實例化之后的對象。
<script>
function exp(name){
this.name=name
}
exp.prototype.print=function(){
console.log(this.name)
}
exp.prototype.run="running"
var p1=new exp('hyh') //實例化為對象p1，這時p1的屬性name等于它的參數‘hyh’
p1.print() //輸出p1的屬性name
console.log(p1.run) //輸出通過原型定義的屬性run
var p2=new exp('hyha') //實例化為對象p2，這時p1的屬性name等于它的參數‘hyha’
p2.print() //輸出p2的屬性name
console.log(p2.run) ////輸出通過原型定義的屬性run
</script>
輸出結果為：
如果，在構造函數中return返回一個同名變量，那么 this 則會指向該變量。
<script>
var Person = function(){
this.name = 'hahaha';
this.sex= 'female';
return {
name:'aaa'
}
}
var obj = new Person();
console.log(obj.name); //aaa
console.log(obj.sex); //undefined
</script>
六、對象方法中的this
函數是一種特殊的對象，在對象中可以直接作為對象的屬性，也就直接看做是對象的方法。在作為對象方法的這個函數中，調用this就指向這個對象。
<script>
var obj1={
name:'byron',
fn:function(){
console.log(this);
},
fn2:function(){
console.log(this.name);
},
};
obj1.fn();
obj1.fn2();
</script>
輸出結果，this為這個obj1對象，this.name就自然指向obj1對象的name屬性：
對這個例子，還可再引申一個例子，因為具有混淆性，常在面試題中可見：
<body>
<script>
var obj1={
name:'byron',
fn:function(){
console.log(this);
}
};
obj1.fn();
var fn2=obj1.fn;
//等同于fn2=function(){console.log(this);}
fn2() //window
</script>
</body>
這個例子的輸出結果為：fn2()等于window對象。
面對這種題，最重要還是分清楚層級。fn2對象和obj1是同一層級的對象，彼此獨立，沒有關系了。兩者都是script標簽下直接第一層的對象。var fn2=obj1.fn等同于fn2=function(){console.log(this);}，所以fn2是函數對象，執行生效的寫法為fn2()。這就變成在函數中調用this的情況了，這里的this就指向全局window，此時就輸出window。
七、對象中的對象方法的this
如果一個對象作為另一個對象的屬性，對象嵌套對象，那么這個對象中的this是指向誰呢？我們看下例子：
<script>
var obj2={
name:'byron',
obj3:{
run:'aaa',
fn:function(){
console.log(this);
}
}
};
obj2.obj3.fn();
</script>
輸出結果為：this所在的這個對象
八、對象中直接的this
上面第六和第七兩個例子的this是對象的函數方法中的this，那如果我想直接將this指定給對象屬性fn，而不是寫到函數中，那this會指向什么呢？改寫下例子如下，此時的this結果是指向window對象
<script>
var obj1={
name:'byron',
fn:console.log(this)
};
obj1.fn;
</script>
輸出結果：
obj1.fn等同于console.log(this)，那就是等同于開頭第一個例子的情形，直接調用this，等同于全局對象window。
九、一次性將變量說清楚
變量類型，可以歸總為：
- 實例變量：也就是this.xxx，只有類實例化之后的對象才能訪問到的變量
- 靜態變量：也就是屬性，它所屬對象能訪問到的變量
- 局部變量：當前作用域內有效的變量
下面的例子，對這三種變量都有體現，其輸出的結果也讓我對這三個變量加深理解：
<body>
<script>
function exp(){
var a=1; //局部變量
this.b=2; //實例變量
console.log(a)
}
exp.c=3; //c為exp這個函數的屬性，函數是特殊對象，也可以有屬性
console.log(exp.c); //3
var obj=new exp(); //1
console.log(a); //error
console.log(obj.a); //undefined
console.log(obj.b); //2
console.log(obj.c); //undefined
</script>
</body>
a是exp函數的局部變量，只有在exp函數中才生效。所以如果直接在外面console.log(a)，就會因為找不到a而報錯。
將exp函數實例化為obj對象，this.b說明b可以被實例化后的obj對象直接訪問使用，因此console.log(obj.b)的結果為2。而此時注意，因為a是局部變量，不同于b，obj對象直接訪問調用，是無效的，所以 console.log(obj.a)的結果是undefined。
a這個局部變量生效的體現就是，實例化obj時，就會逐行執行exp函數，此時a作為函數中的局部變量，console.log(a)生效，輸出1
屬性c為exp這個函數的屬性，函數是特殊對象，也可以有屬性。因此console.log(exp.c)等于3，而實例化的對象obj是沒有這個屬性的，所以 console.log(obj.c)的結果為undefined。
需要記住的一點就是，this.xxx的變量只有實例化的對象才能訪問。實例化的對象也只能訪問this.xxx的xxx變量。
十、結語
除了上面列舉的this的使用情景之外，call，apply和bind也和this的使用緊密相連的。和上面介紹的setTimeout方法例子中使用var _this=this的借位思想一樣，call，apply和bind的使用能夠改變this的指向對象。對call，apply和bind方法，看我寫的下一篇：栗子最實在：用實例來說明call、apply和bind方法。
