JavaScript中嵌套函数的this指向及修改

首先，我们先看一段代码

var a = "window";
var o = {             // 对象o
    a: "self",
    m: function() {      //对象的方法m
        console.log(this.a);
        f();                   //调用嵌套函数
        function f() {         //嵌套函数f
            console.log(this.a);
        }
    }
}
o.m();

如果是非严格模式下，运行结果是: "self window"；

如果是严格模式下，运行结果是: "self undefined"；

为什么会出现这种情况呢？

this关键字不具有变量那样的作用域机制，除了箭头函数，嵌套函数不会继承包含函数的this值。

1. 如果函数被当做方法来调用，那它的this就是调用它的对象。 比如 o.m(),那么this就是调用该方法的对象o
2. 如果函数(不是箭头函数)被当做函数来调用，那么this值要么是全局对象(非严格模式)，要么是undefined(严格模式)。即独立函数调用,如 m() f()

那么我们要是想让上面代码块中函数 f 中的 this.a 也输出 self，应该怎么做呢？

解决方法

注意：this是个关键字，不是变量也不是属性名。JavaScript语法不允许给this赋值！！！

        1. 保存this

var a = "window";
var o = {
    a: "self",
    m: function() {
        console.log(this.a);       //self
        let that = this;
        f();
        function f() {
            console.log(that.a);     //self
        }
    }
}
o.m();

        2. 箭头函数

ES6之后的版本中，可以将嵌套函数转换为箭头函数。

箭头函数的this是在定义的时候就绑定好的，而普通函数是调用的时候确定的。箭头函数的this指向外层函数作用域或全局作用域，它的this是由距离它最近的函数作用域或者全局作用域决定的(注意上层作用域不包含对象)

var a = "window";
var o = {
    a: "self",
    m: function() {
        console.log(this.a);
        const f = () => {    //函数表达式并不会声明提升，因此需要先定义后调用
            console.log(this.a);
        }
        f();
    }
}
o.m();

        3. 使用bind

可以借用bind将这个函数绑定到了外部的this。注意此函数不能是箭头函数，因为使用call, apply, bind并不会改变箭头函数中的this指向。

var a = "window";
var o = {
    a: "self",
    m: function() {
        console.log(this.a);
        const f = (function() {
            console.log(this.a);
        }).bind(this)
        f();
    }
}
o.m();

作者：梦愚人国
链接：https://juejin.cn/post/7150647267802742814
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。