首页 > 代码库 > 关于this知识点
关于this知识点
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
关于this知识点