javascript - 在 JS 中定义函数/方法之间的区别？

Question

这里有 3 种方法来解决使用构造函数构造的对象的键值对。这三种方式在每个可描述的方面有什么区别？ (我什至想询问函数和方法在功能、用法等方面的基本区别)

function Person(name,age) {
  this.name = name;
  this.age = age;
}
var bob = new Person("Bob Smith", 30);
var me = new Person('Madhav Devkota', 55);

//===================================================
//A. Simple function
printPerson= function (p) { 
  console.log(p.name);
};
printPerson(bob);  printPerson(me);
//===================================================

//B. Method I
printPerson = function(){
  console.log(this.name) ;  
};
bob.printPerson = printPerson; me.printPerson = printPerson;
bob.printPerson(); me.printPerson();
//=================================================

//C. Method II
this.printPerson = function() {
    console.log(this.name);
};
bob.printPerson();      me.printPerson();

Answer 1

我还要补充

//0.无功能

console.log(bob.name);
console.log(me.name);

这是最基本的方式。您正在直接对对象属性执行某些操作。

一个。简单的功能

您正在为您的代码命名以改善语义。现在您正在描述您的代码打算做什么。您可以访问更多属性并组合以创建复杂的结果，而无需重复代码。

printPerson = function (p) { 
  console.log(p.name + ' is aged ' + p.age)
}

而不是没有功能

console.log(bob.name + ' is aged ' + bob.age);
console.log(me.name ' is aged ' + me.age);

B.方法一

现在你的函数也是你的对象的一个​​属性。与在声明范围内工作的简单函数不同，您的方法附加到您的对象，您可以将它与它一起传递。调用时，“this”引用从中调用方法的对象。

你也可以像这样做一个“废话”的方法:

printPerson = function(p){
  console.log(p.name) ;  
};
bob.printPerson = printPerson; me.printPerson = printPerson;
bob.printPerson(bob); me.printPerson(me);

C.方法二

这个不太对。它在给定上下文中没有意义，因为“this”此时正在引用 Window 对象。最后，您实际上是在再次调用“方法 I”方法。正确的使用方法是在构造函数中:

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.printPerson = function() {
    console.log(this.name);
  };
}

现在您的对象在创建后立即拥有 .printPerson() 方法。

如果您愿意，我可以详细说明，但重要的是要注意函数与方法的差异在这个代码复杂性级别上并不太相关。当您的代码变得更加复杂时，代码组织就变得很重要。对于“下一级”，您应该更加熟悉 Javascript 作用域 和对象继承。