news 2026/6/9 23:48:12

ES6对象方法简写:更简洁的代码写法

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
ES6对象方法简写:更简洁的代码写法

ES6 中为对象字面量引入的「方法简写」语法,这是 ES6 简化对象写法的重要特性之一,能让对象方法的定义更简洁。

方法简写的核心概念

在 ES5 及更早版本中,定义对象方法需要明确写出属性名: 函数的形式;而 ES6 的方法简写则允许直接省略function关键字和冒号,让写法更接近类的方法定义,更简洁直观。

1. 基础用法对比

先通过对比看核心区别:

javascript

运行

// ES5 定义对象方法 const objES5 = { name: "张三", sayHello: function() { console.log("你好,我是" + this.name); }, add: function(a, b) { return a + b; } }; // ES6 方法简写 const objES6 = { name: "张三", // 省略 : function,直接写方法名+(){} sayHello() { console.log("你好,我是" + this.name); }, add(a, b) { return a + b; } }; // 调用方式完全一致 objES5.sayHello(); // 输出:你好,我是张三 objES6.sayHello(); // 输出:你好,我是张三 console.log(objES6.add(2, 3)); // 输出:5
2. 结合计算属性名的进阶用法

方法简写还能和 ES6 的「计算属性名」结合,定义动态名称的方法:

javascript

运行

const methodName = "greet"; const person = { name: "李四", // 动态方法名 + 方法简写 [methodName + "World"]() { console.log(`${this.name}:Hello World!`); } }; person.greetWorld(); // 输出:李四:Hello World!
3. 注意事项
  • 方法简写定义的是普通函数,不是箭头函数,因此this的指向遵循普通对象方法的规则(指向调用该方法的对象);
  • 不能在方法简写中使用箭头函数替代(箭头函数没有自己的this,会绑定外层作用域的this),比如下面的写法是错误的(或不符合预期):

    javascript

    运行

    const badObj = { name: "王五", // 错误示范:箭头函数的this不指向badObj sayHello: () => { console.log(this.name); // 输出:undefined } };
  • 方法简写仅适用于对象字面量,不能用于对象原型或类的静态方法之外的场景(类的方法本身就是类似简写的形式)。

总结

  1. ES6 方法简写的核心是省略对象方法定义中的: function,直接用方法名() { ... }形式,简化代码书写;
  2. 简写方法的this指向调用该方法的对象,区别于箭头函数;
  3. 可结合计算属性名实现动态方法名的简洁定义,是日常开发中最常用的 ES6 特性之一。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 22:45:55

FST ITN-ZH领域适配:金融医疗专用词库构建指南

FST ITN-ZH领域适配:金融医疗专用词库构建指南 在医疗IT公司开发语音电子病历系统时,你是否遇到过这样的问题:医生口述“阿司匹林肠溶片100mg每日一次”,系统却识别成“阿斯匹林长融片一百毫克每天一吃”?这背后的核心…

作者头像 李华
网站建设 2026/6/9 18:36:13

3个轻量Embedding模型对比:Qwen3实测仅需1小时低成本完成

3个轻量Embedding模型对比:Qwen3实测仅需1小时低成本完成 你是不是也遇到过这样的问题?作为初创公司的CTO,想给产品加上语义搜索功能,但团队预算紧张,GPU资源有限,又不想花大价钱租用高端显卡长期运行。市…

作者头像 李华
网站建设 2026/6/9 18:41:14

很抱歉,考虑停更,去做小红书了

我一度考虑要不要封笔停更,相比写文章,做项目或许更赚钱。为啥会有这样的想法?因为看到别人的经历,受到刺激了。近两年一直以为大环境不好,其实并不是的,只是风口变了,财富发生了转移。比如&…

作者头像 李华
网站建设 2026/6/9 19:54:28

AutoGLM跨版本测试:云端快速切换不同模型对比

AutoGLM跨版本测试:云端快速切换不同模型对比 你是不是也遇到过这样的问题:作为算法工程师,想要全面评估 AutoGLM 不同版本在手机智能体任务中的表现,比如 AutoGLM-Phone-7B、AutoGLM-Phone-9B 甚至微调后的变体?但每…

作者头像 李华
网站建设 2026/6/9 17:27:48

部署bge-large-zh-v1.5省心方案:云端GPU按小时计费,1块钱起

部署bge-large-zh-v1.5省心方案:云端GPU按小时计费,1块钱起 你是一位自由译者,每天面对大量专业文献、技术文档和客户术语表。你想建立一个个人术语库智能管理系统,让AI帮你自动归类、匹配相似表达、快速检索历史翻译结果。但问题…

作者头像 李华
网站建设 2026/6/9 17:28:04

告别CUDA噩梦:预装M2FP环境的云端解决方案

告别CUDA噩梦:预装M2FP环境的云端解决方案 你是不是也经历过这样的“深度学习入门惨案”?兴冲冲地想跑一个人体解析项目,结果刚打开电脑就陷入无尽的依赖地狱:CUDA版本不对、cuDNN不兼容、PyTorch编译失败、GCC报错……折腾三天三…

作者头像 李华