关于this知识点

Posted 2020-09-19

1.在ES6中，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

2.通过var that = this 将当前对象的this存为一个变量（固定that指向，他相当于将当前对象的引用放在一个变量里），在这里 that 指向对象或函数本身，this 随时会变，指向调用他的对象。

3.setTimeout，setInterval调用的函数中的this指向window及全局对象，这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。但是在setTimeout中传入的不是函数时，this则指向当前对象。在ES6中箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

4.构造函数会建立一个独立的context，this指向这个context，普通函数的context就是global对象，在浏览器环境下也同指向window这个对象。

例1.

function foo() {
　　var that = this;
　　setTimeout(() => {
　　　　console.log(‘id:‘, this.id); //42
　　}, 100);
　　setTimeout(function(){
　　　　console.log(‘id:‘, this.id); //21
　　}, 6000);
　　setTimeout(function(){
　　　　console.log(‘id:‘, that.id); //42
　　}, 3000);
　　console.log(‘id:‘, this.id); //42
}

var id = 21;

foo.call({ id: 42 });

例2.

function Timer() {
　　this.s1 = 0;
　　this.s2 = 0;
　　this.s3 = 0;
　　// 箭头函数
　　var that = this;
　　setInterval(() => this.s1++, 1000);
　　// 普通函数
　　setInterval(function () {
　　　　this.s2++;
　　}, 1000);
　　setInterval(function () {
　　　　that.s3++;
　　}, 1000);

}

var timer = new Timer();
console.log(timer.s1,timer.s2) //0 0

setTimeout(() => console.log(‘s1: ‘, timer.s1), 3100); //3
setTimeout(() => console.log(‘s2: ‘, timer.s2), 3100); //0
setTimeout(() => console.log(‘s3: ‘, timer.s3), 3100); //3