this

 

this理论

1、对于直接调⽤的函数来说，不管函数被放在了什么地⽅，this都是window

2、对于被别⼈调⽤的函数来说，被谁点出来的，this就是谁

3、在构造函数中，类中(函数体中)出现的this.xxx=xxx中的this是当前类的⼀个实例

4、call、apply时，this是第⼀个参数。bind要优与call/apply哦，call参数多，apply参数少

5、箭头函数没有⾃⼰的this，需要看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window

场景1: 函数直接调⽤时

function myfunc() {
    console.log(this) // this是widow
}
var a = 1;
myfunc();

场景2: 函数被别⼈调⽤时

function myfunc() {
    console.log(this) // this是对象a
}
var a = {
    myfunc: myfunc
};
a.myfunc();

场景3: new⼀个实例时

function Person(name) {
    this.name = name;
    console.log(this); // this是指实例p
}
var p = new Person('zhaowa');

场景4: apply、call、bind时

function getColor(color) {
    this.color = color;
    console.log(this);
}
function Car(name, color){
    this.name = name; // this指的是实例car
    getColor.call(this, color); // 这⾥的this从原本的getColor，变成了car
}
var car = new Car('卡⻋', '绿⾊');

场景5: 箭头函数时

// 复习⼀下场景1
var a = {
    myfunc: function() {
        setTimeout(function(){
            console.log(this); // this是a
        }, 0)
    }
};
a.myfunc();
// 稍微改变⼀下
var a = {
    myfunc: function() {
        var that = this;
        setTimeout(function(){
            console.log(that); // this是a
        }, 0)
    }
};
a.myfunc();
// 箭头函数
var a = {
    myfunc: function() {
        setTimeout(() => {
            console.log(this); // this是a
        }, 0)
    }
};
a.myfunc();

小测一下

function show () {
    console.log('this:', this);  // obj
}
var obj = {
    show: show
};
obj.show();

function show () {
    console.log('this:', this);  // window
}
var obj = {
    show: function () {
        show();
    }
};
obj.show();

var obj = {
    show: function () {
        console.log('this:', this);  // window
    }
};
// 逗号表达式返回括号中最后面那个值，也就是obj.show
(0, obj.show)();

var obj = {
    sub: {
        show: function () {
            console.log('this:', this); // sub
        }
    }
};
obj.sub.show()

var obj = {
    show: function () {
        console.log('this:', this); // newobj
    }
};
var newobj = new obj.show();

var obj = {
    show: function () {
        console.log('this:', this);  // newobj
    }
};
// new 和 bind 都会改变this指向，但是new的优先级高于bind
var newobj = new (obj.show.bind(obj))();

var obj = {
    show: function () {
        console.log('this:', this);
    }
};
var elem = document.getElementById('book-search-results');
// window点击事件，触发obj.show，相当于window直接调用了obj.show里面的方法
elem.addEventListener('click', obj.show);  // window
elem.addEventListener('click', obj.show.bind(obj)); // obj
elem.addEventListener('click', function () {
    obj.show();  // obj
});