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

Question

Here are 3 ways to address the key-value pair of objects constructed using constructor. What are the differences among these 3 ways in every describable aspects? (I would even like to enquiry about basic differences between function & method in terms of their functionality, usage, etc.)

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

I would also add

// 0. No function

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

It is the most basic way. You are doing something with you object properties directly.

A. Simple function

You are giving your code a name to improve semantics. Now you are describing what your code is intended to do. You can access more properties and combine to create complex result without code repetition.

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

instead of No function

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

B. Method I

Now your function is also a property of your object. Unlike simple function which works in scope where it is declared, your method it attached to your object and you can pass it around along with it. When invoked 'this' references the object from which method is invoked.

You can also do a 'nonsense' method like this:

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

C. Method II

This one is not quite right. It doesn't make sense in given context as 'this' is at that moment referencing Window object. At then end you are actually calling 'Method I' methods again. Correct way to use it is in constructor function:

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

Now your objects have . printPerson () method as soon as they are created.

I could elaborate more if you wish but it's important to notice that function vs method difference is not too relevant at this level of code complexity. When your code gets more complex code organization becomes important. For 'next level' you should get more familiar with Javascript scoping and object inheritance .