前言
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方法。
网友评论