this指向总结

this指向问题

定义：this是函数运行时所在的环境对象。this指向在函数定义时候无法确定，只有在函数调用时候才可以确定。实际上this指向的是最终调用它的那个对象，即：谁调用的就指向谁

非严格模式下，没有挂载对象的函数，this指向window，有挂载对象的指向调用对象。严格模式下，没有挂载对象的函数，this指向undefined

纯粹的函数调用

• 通常属于全局调用，因此this指向全局对象window
• let定义的变量不是window对象，因此

var a = "全局a"
// let a = "let变量"
function test(){
    var a = "局部a"
    console.log(this.a)
}
test()    // '全局a'

对象方法调用

• this指向该对象

var a = "222"
let obj1 = {
    a:'111',
    test:function(){
        console.log(this.a)
    }
}
obj1.test()   // '111'

作为构造函数调用

• 构造函数中的this指向实例化出的新对象

function Test(){
    this.a = "1111"
}
var test = new Test()
console.log(test.a)  // '1111'

改变this指向的调用

apply

var a = "ok"
var obj1 = {
    a:'111'
}
var obj2 = {
    a:'222',
    test:function(){
        console.log(this.a)
    }
}
obj2.test.apply(obj1)   // '111'

call

同apply,传参不同，apply以数组形式传入，call以字符串形式按顺序传入

bind

• ES5新方法
• bind之后不会立即执行，需要单独调用,传参与call相同

var obj = {
    init: 1,
    add: function(a, b) {
        return a + b + this.init;
    }
}
obj.add(1, 2); // 4

var plus = obj.add;
plus(3, 4); // NaN，因为 this.init 不存在，这里的 this 指向 window/global

apply、call、和bind传参比较

plus.call(obj, 3, 4) // 8
plus.apply(obj, [3, 4]); // 8， apply 和 call 的区别就是第二个参数为数组
plus.bind(obj, 3, 4); // 返回一个函数，这里就是 bind 和 call/apply 的区别之一，bind 的时候不会立即执行
plus.bind(obj, 3, 4)(); // 8 

箭头函数调用

• 箭头函数中的this是在定义函数的时候绑定的，而非调用时候，因此箭头函数的this指向一致是固定的，即被定义函数的this指向

let obj={
    a:222,
    fn:function(){    
        setTimeout(()=>{console.log(this.a)});
    }
};
obj.fn()  //'222'