请问这个this的指向是怎么回事?

AllenYang
  • 7
function Page(arg){
    this.method = arg.method;
}

var PageObj = new Page({
    method: {
        watch: () => console.log(this)
    }
});

PageObj.method.watch();

请问为什么this的指向是undefined?
对于这种情况,可不可以理解为传递一个函数作为参数,但是这里的watch是一个箭头函数,箭头函数中this的指向不应该是定义的时候就绑定到最近一层普通函数的this吗?this就该指向Page?? 我晕了, 搞不懂了?请指点一下

function Page(method){
    this.method = method;
}

var PageObj = new Page(
        () => console.log(this)
)

PageObj.method();

然后this的指向也是undefined

回复
阅读 688
4 个回答
✓ 已被采纳

MDN:
image.png
https://developer.mozilla.org...

JavaScript 采用的是 词法作用域,所以对于上述两个例子中的箭头函数来说,它的作用域链应该是:[GlobalContext, 自身的 Context]

所以最后的函数调用:非严格模式下的话 this 会隐式指向全局对象,即 Window。严格模式下为 undefined。

更正:

一:试了一下非 ES6 模块下,不管是否为严格模式,上面两段代码的输出结果均为 Window。查到了一些相关的内容:

  1. Arrow function expressions - MDN 有一节 Relation with strict mode
  2. https://stackoverflow.com/que...
  3. http://www.ecma-international... 中的 9.2 关于 ThisMode 的解释

二:使用 ES6 模块(ES6 的模块自动采用严格模式),顶层的this指向undefined。输出结果都是 undefined。

箭头函数中this的指向不应该是定义的时候就绑定到最近一层普通函数的this吗,可以这么理解,到你的例子中来,你的箭头函数外层存在函数体吗?并不存在啊,new Page是函数调用,这和函数声明完全不是一回事。

箭头函数中this的指向不应该是定义的时候就绑定到最近一层普通函数的this吗?

不是的。准确点描述应该是:箭头函数中this的指向是定义的时候就绑定到定义时所在的执行上下文环境的this

即上面的代码相当于:

var that = this;
var PageObj = new Page({
    method: {
        watch: () => console.log(that)
    }
});

箭头函数不会创建自己的 this ,它只会从自己的作用域链的上一层继承 this 。来自MDN

你知道吗?

宣传栏