JS基础——谈谈对this对象的理解

一、绑定规则

默认绑定

在全局环境中this只想window。（非严格模式）

var name = 'Jenny';
function person() {
    return this.name;
}
console.log(person());  //Jenny

隐式绑定

如果函数作为某个对象的方法进行调用，this就指向调用的对象。

function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

注意：调用时this才被确定。

var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j(); //this指向window

new绑定

通过构建函数new关键字生成一个实例对象，此时this指向这个实例对象。

function test() {
　this.x = 1;
}

var obj = new test();
obj.x // 1

显式绑定

apply()、call()、bind()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。

二、箭头函数

箭头函数中，this指向在编译时就已经确定。一层层向外找，知道找到第一个this的定义。

箭头setTimeout没有this，普通setTimeout指向window。（不只setTimeout，回调函数为箭头函数时均没有this，普通函数则指向window）

        const obj2 = {
            aaa() {
            //aaa(),它的this指向obj2;
                setTimeout(function () {
                //setTimeout内部的this永远指向window;
                    setTimeout(function () {
                        console.log(this);//window
                    })
                    setTimeout(() => {
                        console.log(this);
/* window,向外寻找,最先找到的setTimeout的作用域,
而这个作用域里的this永远指向window. */
                    })
                })

                setTimeout(() => {
                    setTimeout(function () {
                        console.log(this);//window
                    })
                    setTimeout(() => {
                        console.log(this);
/* obj,向外找到setTimeout,但是是一个箭头函数,
其中没有this,再向外寻找,aaa()的this,即obj */
                    })
                })
            }
        }

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

var timer = new Timer();

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