这是我参与「第四届青训营」笔记创作活动的第2天

小白一枚，欢迎指正（由于近期忙碌，笔记部分文本格式有些小问题，笔记后面还会完善）

JS中的this令人头疼，箭头函数的出现让this更容易循迹但是一碰到this就使用箭头函数往往会带来更多难以察觉的问题，只有掌握完整的规则，才能应用自如。下面直接以例子来总结

一、要点

this永远指向最后调用它的那个对象

二、简单例子

直接看例子

图片.png 因为调用语句a()前面有个隐含的window, 即this在a()里面，a（）被window调用

也印证了这句this永远指向最后调用它的那个对象

再来一个例子

图片.png 当执行到a.fn()这一句时，在fn里使用了this，这个this最后的调用者是a

再再来一个例子

图片.png this在fn里面，fn由a调用，this在a中没有找到name

三、中等例子

图片.png

Var f=a.fn 和一中的例子不同

这个语句并没有进入到a对象中的fn去执行了this

这句只是给变量f赋值了fn方法的引用然后下一句f( )才真正涉及到了this的指向

this在f里面，f由window调用

再看那句话--this永远指向最后调用它的那个对象

我们重点关注的是this的最后被调用的时候

图片.png 虽然fn（）里面还有嵌套，但是innerFunction是没有挂载在任何对象上的。this最后执行的时候，由window调用

四、总结

this的指向，如果不在使用时加以控制，则会由调用this时决定指向如果想要在书写时就控制，方法有

1 用箭头函数，此时this会沿着作用域链向上寻找，直到找到一个非箭头函数的对象

2 在目标对象和当前代码之间建立一个this的连接，将想要指向的目标先存储在_this中。用_this替换当前代码中的this

3 强制绑定（显示/手动绑定）利用apply，call，bind

4 用new实例化一个对象（原理就是用了call）

1、箭头函数控制

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry`

2、this连接

var name = "windowsName";

var a = {

    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        var _this = this;
        setTimeout( function() {
            _this.func1()
        },100);
    }

};

a.func2()       // Cherry`

3、强制绑定

    var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.apply(a),100);
    }

};

a.func2()            // Cherry`

4、用new实例化一个对象

function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This    creates a new object
var a = new myFunction("Li","Cherry");
a.lastName;                 // 返回 "Cherry"`

推荐原文1

推荐阮一峰的相关文章2

浅谈JS的this指向|青训营笔记

一、要点

二、简单例子

三、中等例子

四、总结