This article gives you a detailed introduction to the use of the new keyword in javascript, as well as the difference between the use of new keyword in javascript, you can refer to the need for a small partner.

function Animal(name){
  this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
  console.log("I'm " + this.name);
};
var cat = new Animal("cat");

console.log(
  cat.name, //cat
  cat.height //undefined
);
cat.say(); //I'm cat console.log( Animal.name, //Animal Animal.color //back ); Animal.say(); //Animal.say is not a functionCopy the code

If you can understand the output above, you already know how new and this work in JS, please ignore this article! We will explore this example to deepen your understanding of new and inheritance in JS! If you are not familiar with js this, please read: js scope and this keyword.

I. Code interpretation

Lines 1-3 create a function Animal and define a property on this :name, whose value is the parameter when the function is executed. Line 5- line 7 defines a say() method on Animal’s prototype object. The say method outputs the name of this. Line 8 creates a new object with the new keyword cat. Line 10-14 The cat object attempts to access the name and color properties and calls the say method. Lines 16-20 the Animal object attempts to access the name and color properties and calls the say method.

Second, key analysis

Line 8 is the key: var cat = new Animal(“cat”); JS engine does a lot of work when executing this code, and its workflow is simulated by pseudo-code as follows:

var obj = {};
obj.__proto__ = Animal.prototype;
var result = Animal.call(obj,"cat");
return typeof result === 'obj'? result : obj;Copy the code

(1) create an empty object obj; Prototype ->Animal. Prototype ->Object. Prototype ->null (3) Call Animal in the execution space of obj and pass the parameter “cat”. Var result = obj.Animal(“cat”) When this is done, obj generates the property name and assigns the value “cat”. (4) Examine the return value of step 3. If there is no return value or a non-object value is returned, then obj is returned as the new object. Otherwise, the returned value is returned as a new object. Now that we know how new works, we know that cat is actually the return value of procedure (4), so we know a little more about cat objects: the prototype chain of CAT is: Animal. Prototype ->Object. Prototype ->null Cat.name -> In procedure (3), the obj object generates the name attribute. Color -> cat -> cat -> cat -> cat -> cat -> cat -> cat -> cat -> cat -> cat Cat. Say -> Cat will first search for its own say method, and if it does not find it, it will search along the prototype chain. In the above example, we defined say on Animal prototype, so we found the say method on the prototype chain. Also, the say method calls this.name, where this refers to its caller, obj, so the output is the value of obj.name. For Animal, it is also an object itself, so it follows the above lookup rules when accessing properties and methods, so: Animal.color -> “black” animal. name -> “Animal” In general, function objects are generated with a built-in name attribute and the function name as an assignment (only function objects).

Prototype ->Object ->null; Animal-> say ->Object ->null To summarize, javascript’s new keyword is mainly used for inheritance. In the above example, the cat object is created with the methods and properties defined in Animal, so cat is not an instance of Animal but a subclass of it (loosely speaking). Cat is the same Animal as Animal. If it is a parent class and a child class, then it cannot be the same type.