为什么箭头函数不会运行呢?

求解大佬,先行感谢。
我在看阮一峰老师的ES6入门中super属性的时候有这么一个问题,先贴代码:

 const proto = {
     x: "hello",
     foo: function () {
         () => alert(this.x);
     },
 };

 const obj = {
     x: "world",
     foo() {
         super.foo();
     },
 };
 Object.setPrototypeOf(obj, proto);
 obj.foo();

碰到两个问题:

  1. 首先是为什么箭头函数不会运行呢?我在chrome里面调试会走到箭头函数那一步,但是不会出现警告框,改成console.log 也没用
  2. 我在chrome调试的时候发现箭头函数的this指向的是obj对象,但是箭头函数不是在定义的时候就已经把this绑定到了外层作用域吗?这时候this不是应该指向proto吗?

刚刚开始学ES6,基础不太好,非常感谢大佬能点拨一下,谢谢!

阅读 2.5k
3 个回答
  1. 箭头函数也是函数,需要调用才能执行

    (() => alert(this.x))();
  2. 调用 super.foo 的时候才会创建箭头函数,此时外层作用域的 this 指向为 obj

可以试试把箭头函数直接定义在全局:

const foo = () => console.log(this);
const proto = {
    x: "hello",
    foo: function() {
        foo();
    }
};
// ...
obj.foo(); // 打印 window
() => alert(this.x);

这个只是申明语法, 没有调用,自然不会运行

(() => alert(this.x))(); // 改成这样试试?

谁调用指向谁,() => alert(this.x); 你是在foo 中申明了 一个x

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题