对象中的方法 VS 类中的方法

不知道大家有没有关注过一个问题，在ES6之后，在类中定义的方法和对象中的方法，写法似乎一样，那么这两者真的完全相同吗？

对象中的方法

我们先来看对象中的方法：

const user = {
  name: 'Olaf',
  sayName1: function () {
    console.log('way1: ', this.name)
  },
  sayName2() {
    console.log('way2: ', this.name)
  },
  sayName3: () => {
    console.log('way3: ', user.name)
  },
}

在上面代码中，我们使用了三种方式来写sayName方法，因为对象是Key-Value形式的，所以，箭头函数的写法中，函数名和函数体之间是用冒号来分开的。

注意：sayName2是sayName1的简写方式，将冒号和function关键字省略了。

类中的方法

ES6推出了class关键字，用来定义类：

class Person {
  constructor(name) {
    this.name = name
  }

  sayName1 = function () {
    console.log('way1: ', this.name)
  }

  sayName2() {
    console.log('way1: ', this.name)
  }

  sayName3 = () => {
    console.log(this.age)
  }
}

上面代码，定义了一个Person类，其中sayName也使用了三种方式来进行书写✍️，和对象中的方法不同的是，类中的方法名和方法体之间其实使用的是=号来进行分开的。

注意：和对象中的方法省略方式类似，类中定义的方法也有省略写法，sayName2就是sayName1的简写方式，将=号和function关键字省略了。

小结

如果都用省略写法，类中方法的省略写法和对象中方法的省略写法是一样的，会给人一种它们二者写法一样的错觉，但通过仔细分析后，发现它们本质上却是不同的。