ES6 更简短的方法定义

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

更简单的方法定义

ES6 中，初始化对象时，有一种更简单的定义方法的语法，直接把方法名赋给函数

const obj = {
  foo() {
    console.log('abc')
  }
}
obj.foo();

这里的函数不是匿名函数，命名函数可以通过标识符在函数体内调用，匿名函数是不可以的

这里的函数也不是构造函数，于是不能尝试实例化他们

这种之前的写法则是

const obj = {
  foo: function() {
    console.log('abc')
  }
}
obj.foo();

Async 方法

async 方法也可以用简写的语法来定义

const obj = {
  foo: async function() {
    await some_promise;
  }
}

// 简写语法
const obj = {
  async foo() {
    await some_promise;
  }
}

举个栗子

var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"

这里直接调用方法是，this 指向的是对象本身

const p = obj.b;
p();  // undefined

这里因为在 window 下调用函数 p，this 指向 window，所以 this.a 是 undefined

var bar = {
  foo0: function() { return 0; },
  foo1() { return 1; },
  ['foo' + 2]() { return 2; }
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

简写的方式同时支持使用计算的属性名作为方法名，这里拼接了 ['foo' + 2] 作为属性名，之前的写法则是这样的：

var bar = {
  foo0: function() { return 0; },
  foo1() { return 1; },
  ['foo' + 2]: function () { return 2; }
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

浏览器兼容性

除 ie 外主流浏览器已经全部支持，可放心使用～

参考

developer.mozilla.org/zh-CN/docs/…

以上为一个小知识点，ES6 更简短的方法定义的介绍，可以在开发中用起来啦，欢迎评论和点赞～