Conceptual explanation of prototype-related nouns

ecma262/#constructor

function Parent(){
  this.name = 'parent';
}
var a = new Parent();
console.log(Parent.prototype);
console.log(Parent.constructor);
console.log(Parent.prototype.constructor);
console.log(a.prototype);
console.log(a.__proto__);
console.log(a.constructor);
Copy the code

Based on the above code, we analyze the prototype and constructor corresponding to each function

It is highly recommended that you write your own code and then draw the diagram yourself. It will be very clear.

• Abstract prototype constructor diagram

Function prototype reference

New Specific process

1. One inherited from*Foo*.prototypeA new object is created.
2. Calls the constructor with the specified argumentsFooAnd willthisBind to the newly created object.new *Foo*Is equivalent tonew Foo(a), that is, no parameter list is specified,FooCalled without any arguments.
3. The object returned by the constructor isnewThe result of an expression. If the constructor does not explicitly return an object, the object created in Step 1 is used. (Normally, constructors do not return values, but users can choose to actively return objects to override normal object creation steps.)

new Parent() = {
    var obj = {};
	obj.__proto__ = Parent.prototype; // Create a prototype chain of obj objects:
	// obj->Parent.prototype->Object.prototype->null
	var result = Person.call(obj); // equivalent to obj.Person("John")
	return typeof result === 'object' ? result : obj; // If no value is returned or a non-object value is returned, obj is returned as the new object
}
Copy the code

Write a new method

function _new(fn,... arg){
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj,arg);
    return ret instanceof Object? ret:obj;// Consider basic data types
}
Copy the code

mozilla.org-new

alexzhong22c js-new-happen

Object.getPrototypeOf

Returns the Prototype of the specified object (the value of the internal [[Prototype]] property).

var o = new C();

//o is an instance of C, so

Object.getPrototypeOf(o) === C.prototype

Object.getPrototypeOf returns the prototype of the instance Object

Because Object is a constructor

Object.getprototypeof (Object) returns // f(){[native code]}

Object.getPrototypeOf( Object ) === Function.prototype; // true

Because Object is an Object, Object is a function

So object.getProtoTypeof (Object) returns the prototype of the Function Object

Object. Prototype is the prototype of a constructed Object.

How inheritance is implemented

Constructor directly implemented

function SuperType(){
    this.property =true;
}

function SubType(){
      SuperType.call(this);
}

// Modify the prototype content on the parent class
SuperType.prototype.getType = function(){
    return 'add';
}
var instance = new SubType();

console.log(instance.property);
//true
console.log(instance.getType());
Uncaught TypeError: instance.getType is not a function
Copy the code

• Problem: All attributes in the parent constructor can be obtained by subclasses inherited from the constructor.
  • Subclasses can’t get the parent classprototypeProperties and methods that change on.
  • Not good for function reuse

Prototype inheritance

function SuperType(){
    this.property =true;
    this.colors = ['red'.'green'];
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

var parent = new SuperType();
function SubType(){
    this.property = false;// The subclass overrides the parent class attribute
}
// Set the prototype of the subclass to a new instance object of the parent class
// The __proto__ of an instance of the parent class points to its own prototype object
// So subclasses can also be successfully accessed
SubType.prototype = new SuperType(); 
SubType.prototype.getSubType = function(){
    return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//false
instance.colors.push('blue');
console.log(parent.colors);//'red','green',
var instance2 = new SubType();
console.log(instance2.colors);//'red','green','blue'
Copy the code

• Question:
  • Different subclass instances will share the same reference type data, so if one of them modifies it, the other instances will also access the modified data.
  • You cannot pass arguments to constructor parameters when creating a subclass instance.

Combinatorial inheritance: constructor + stereotype inheritance

function SuperType(){
    this.property =true;
    this.colors = ['red'.'green'];
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

var parent = new SuperType();
function SubType(arg){
    SuperType.call(this,arg);
    this.property = false;// The subclass overrides the parent class attribute
}

SubType.prototype = new SuperType(); 

SubType.prototype.getSubType = function(){
    return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//false
instance.colors.push('blue');
console.log(instance.colors);//'red','green','blue'
console.log(parent.colors);//'red','green',
var instance2 = new SubType();
console.log(instance2.colors);//'red','green'
Copy the code

• Composite inheritance has the advantages of both approaches, and each subclass instance gets the attributes of the parent class because it borrows the constructor from the parent class.
  • The downside: The superclass constructor is called twice each time. Once when the subclass prototype is created, and once inside the subclass constructor.

Parasitic inheritance

• Call a function to create an object + enhance its properties and methods

 function createAnother(original){
  var clone = object(original);
  clone.sayHi = function(){
    console.log('hi');
  }
  return clone;
}

var person = {
  name:"sherry".friends: ['lisa']}var p = createAnother(person);
Copy the code

Best practice: Parasitic composite inheritance

function inheritPrototype(subType,superType){
  var prototype = object(superType.prototype);  
  prototype.contructor = subType;
  subType.prototype = prototype;
}
Copy the code

Another way to do this:

　function extend(Child, Parent) {var F = function(){}; F.p rototype = Parent. The prototype; Child.prototype =new(F); Child. The prototype. The constructor = Child; Child. Uber = Parent. The prototype; }Copy the code

• The superType constructor is called only once
• The prototype chain has not changed

Reference: Advanced Javascript Tutorial