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