这两种在 Javascript 对象中编写方法的方法有什么区别？

Question

在键/值对中声明的方法和 JavaScript 对象中的声明性方法有什么区别，this 关键字在这两种方法中都起作用

let dog = {
    sound: "roof",
    talk: function(){  //<----------Key/Value
        console.log(this.sound)
    }
}

let dog = {
    sound: "roof",
    function talk(){  //<----------Declarative method
        console.log(this.sound)
    }
}

Answer 1

在对象中定义方法有不同的方式：

let dog = {
  sound: "roof",
  talk() {
    console.log('first way')
  },
  talk2: function() {
    console.log('second way')
  },
  talk3: () => {
    console.log('third way')
  },
  // function talk4 (){}  // this isn't right way
}

dog.talk(); // first way
dog.talk2(); // second way
dog.talk3(); // third way

Answer 2

我可以说在 ES6 中没有太大区别，他们引入了这个特性，它是键值对的简写，见下面的例子。

在 ES 5 中

var obj = { 
   talk: function(){ }
}
obj.talk() //This how u call

在 ES 6 中

var obj = { 
   talk(){ } // here there is no need to have property name it will take it talk by default in ES6
}
obj.talk() //This how u call

和this上下文没有区别 如果你想了解更多关于 ES6 特性的例子，这里是link

Answer 3

let dog = {
    sound: "roof", // Property
    talk: function(){ // methods
        console.log(this.sound)
    }
}

上面的代码块作为一个对象工作，它包含一些属性和方法

你可以这样写代码，

var dog = (function() {
  function dog() {
    this.sound = 'roof' // class variable
  }
  
  dog.prototype.talk = function() {
    console.log(this.sound); // method
  };
  
  return dog;
}());

var obj = new dog();
obj.talk()

希望你能理解

Answer 4

除非你转换，否则没有区别

 talk: function(){  //<----------Key/Value
   console.log(this.sound)
 }

到

 talk: () => {
    console.log(this.sound)
 }

箭头函数使用词法this，这意味着它使用在本例中定义对象的上下文window。 function 使用对象的上下文

Answer 5

在第一种情况下，您可以在任何类中使用该函数，这将指向该类的声音 而在第二个对象中，将访问它的对象变量是健全的