问答

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

作者:admin 2021-05-15 我要评论

function Page(arg){ this.method = arg.method;}var PageObj = new Page({ method: { watch: () = console.log(this) }});PageObj.method.watch(); 请问为什么t...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器