首页 > web前端 > js教程 > 为什么 ES6 中的对象方法不能使用箭头函数?

为什么 ES6 中的对象方法不能使用箭头函数?

Linda Hamilton
发布: 2025-01-06 01:54:46
原创
317 人浏览过

Why Can't I Use Arrow Functions for Object Methods in ES6?

ES6 对象中的箭头函数

在 ES6 中,您可以使用传统函数语法和引入的简写方法语法在对象中定义方法语言:

var chopper = {
    owner: 'Zed',
    getOwner: function() { return this.owner; }
};
登录后复制
var chopper = {
    owner: 'Zed',
    getOwner() { return this.owner; }
};
登录后复制

但是,您在尝试时可能会遇到限制在对象方法中使用箭头函数。例如,使用以下语法将导致错误:

var chopper = {
    owner: 'John',
    getOwner: () => { return this.owner; }
};
登录后复制

var chopper = {
    owner: 'John',
    getOwner: () => (this.owner)
};
登录后复制

说明

箭头函数具有特定特征这使得它们不适合用作对象

  • 词法作用域: 箭头函数从周围的词法作用域继承其 this 值,而不是定义它们的对象。这意味着箭头函数中的 this 指的是定义对象的上下文,而不是对象本身。

因此,当您在 ES6 对象中定义箭头函数时,函数中的 this将引用创建对象的上下文。例如,如果您在全局范围内定义对象 chopper,则 getOwner 中的 this 将引用全局范围,而不是 chopper 对象。

解决方案

编写ES6 中的对象方法,应该使用传统的函数语法或专门为对象设计的简写方法语法:

var chopper = {
    owner: 'Zed',
    getOwner: function() {
        return this.owner;
    }
};

// or

var chopper = {
    owner: 'Zed',
    getOwner() {
        return this.owner;
    }
};
登录后复制

这些方法使用正确的 this 绑定,它引用 chopper 对象。

以上是为什么 ES6 中的对象方法不能使用箭头函数?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板