理解JavaScript中的this
理解this
JavaScript中的this是其灵活性的表现，同时也因为this的多变性与其他语言的不一致，也成为JavaScript的一个难以理解的地方。因此在这里总结一下this常见的情况，以加深记忆
JavaScript中的this表示执行上下文对象，有以下几种绑定规则：
1.默认绑定
JavaScript中规定，函数中的this默认会和window对象绑定（在严格模式下默认绑定会失效）
var name = 'yip'
function a(){
console.log(this.name);
}
a();//yip
2.隐式绑定
当函数的调用位置有另外一个上下文对象时，this会和这个上下文对象绑定，简单来说就是和函数的调用者绑定
var name = 'yip';
function a(){
console.log(this.name);
}
var obj = {
name:'xie',
a:a
}
obj.a();//xie
隐式绑定有两种特殊情况会导致隐式绑定失效
var name = 'yip';
function a(){
console.log(this.name);
}
var obj = {
name:'xie',
a:a
}
var obj1 = {
name ： 'zhan'
}
var b = obj.a;
b();//yip,这是第一种情况，这时的b只是取得了obj.a的引用，执行时上下文还是没有绑定
obj.a();//xie
(obj1.a = obj.a)()//yip，这里是第二种情况，间接引用，但是执行上下文还是没有绑定
在计时器setTimeout中，以及把函数作为参数传递到另一函数中，也会发生隐式丢失,在这种情况下，相当于隐式赋值。
var name = 'yip';
function a(){
console.log(this.name);
}
var obj = {
name:'xie',
a:a,
b:function(){
setTimeout(function(){
console.log(this.name);
},1000)
}
}
setTimeout(obj.a,1000);//yip
function argFunc (func){
func();
}
argFunc(a);//yip
obj.b();//yip
3.显示绑定
JavaScript中有3个特殊的方法。call、apply、bind，可以显式指定函数的执行上下文
var name = 'yip';
function a(){
console.log(this.name);
}
var obj = {
name:'xie',
a:a
}
var obj1 = {
name ： 'zhan'
}
obj.a();//xie
a.call(obj);//xie
a.apply(obj);//xie
var b = a.bind(obj);
b();//xie
bind 与 apply和call 作用相似，但bind返回一个函数，可以在后来被调用，其执行环境由bind绑定；
ES5以下实现bind
function mybind(func,context){
if(func.bind){
return func.bind(context);
}else{
return function(){
func.apply(context);
}
}
}
构造函数里的this
JavaScript中规定，任何函数都可以用new操作符实例化对象，使用new操作符之后，函数就变为构造函数，其中的this指向新建的对象。
使用new操作符时，在JavaScript机制中执行下列几步操作
-
新建一个空对象；
-
执行函数内容；
-
把this指向新建的对象；
-
返回一个对象，可能是函数中返回的也可能是新建打的对象
function a(){
this.name = 'yip';
this.sayName = fucntion (){
console.log(this.name);
}
}
var obj = new a();
obj.sayName();//yip
一个简单的验证方法是看函数调用的前面是否是一个引用对象。
事件处理器中的this
在事件处理器中的this指向事件发生的对象。
var name = 'yip';
var mybtn = document.getElementById('mybtn');
function callback (){
console.log(this);
}
mybtn.addEventListener("click",callback)//button
ES6箭头函数
在ES6中，新增箭头函数，在箭头函数中不使用上面所说的任意一种绑定规则，而是根据外层作用域的this来决定this（函数内或者是全局）。
这可以解决在函数中使用setTimeout发生的隐式丢失，ES6之前的解决方案是通过声明一个变量存储this来实现
var self = this;
ES6中是：
var name = 'yip';
function a(){
console.log(this.name);
}
var obj = {
name:'xie',
a:a,
b:function(){
setTimeout(()=>{
console.log(this.name);
},1000)
}
}
obj.b();//xie
因此常把ES6的箭头函数用于事件处理器和计时器中
var name = 'yip';
var mybtn = document.getElementById('mybtn');
callback = () =>{
console.log(this);
}
mybtn.addEventListener("click",callback)//window
