_Has written about 2 years of javaScript around, just for some form validation and operation of dom nodes, but not in-depth use, with the gradual deepening, do not want to write duplicate code (lazy start), so as to write simple inheritance, encapsulation, abstraction and so on, the ultimate effect of writing less repetitive code, high availability (mainly: fast iteration, generation). Codes can be used continuously and there is less overtime.

Demo constructor declaration class

function Person(name){
    this.name = name;
}

new generation instance

The disadvantage of new instance generation is that attributes and methods can not be shared. Each new instance will open up new memory space, resulting in a great waste of resources.

var personA = new Person('Xiao Ming');
console.log(personA.name);

this of the constructor points to a new instance
Such as:

function Person(name){
    this.name = name;
    this.sex = 'female'
}

var personA = new Person('Xiao Ming');
var personB = new Person('Chick');
personA.sex = 'male';
console.log(personB.sex);  //female

Should we adopt a declarative solution here? The designer has solved this problem very well, that is the introduction of prototype attributes (including objects).

prototype attribute

The advantage is that once an instance is created, it automatically shares shared properties and methods, such as:

function Person(name){
    this.name = name;
}
Person.prototype.sex = 'female';
var personA = new Person('Xiao Ming');
var personB = new Person('Chick');
console.log(personA.sex);  //female
console.log(personB.sex);  //female

//Prove that they are shared
Person.prototype.sex = 'male';
console.log(personA.sex);  //male
console.log(personB.sex);  //male

You may not see the benefits of prototype here, but when you have many methods and attributes, are you still efficient? Then:

function Person(name, sex){
    this.name = name;
    this.sex = sex,
    this.country = 'China',
    this.show = function(){
        console.log(this.name + 'The nationality is:'+this.country+'，Gender:'+this.sex);
    }
}
var personA = new Person('Xiao Ming'.'male');
personA.show();   //Xiao Ming's nationality is China, gender: male
var personB = new Person('Chick','female');
personB.show();  //The girl's nationality is China, gender: female.

It seems that there is no problem, but both personA and personB contain the same content as country and show attributes, which wastes space and reduces efficiency. Then we can share attributes and methods between them.

function Person(name, sex){
    this.name = name;
    this.sex = sex,
}

Person.prototype.country = 'China';
Person.prototype.show = function(){
    console.log(this.name + 'The nationality is:'+this.country+'，Gender:'+this.sex);
}

var personA = new Person('Xiao Ming'.'male');
var personB = new Person('Chick','female');
personA.show();   //Xiao Ming's nationality is China, gender: male
personB.show();  //The girl's nationality is China, gender: female.

Attributes used with protorype -- isPrototype Of (), hasOwnPrototype (), in

function Person(name, sex){
    this.name = name;
    this.sex = sex,
}

Person.prototype.country = 'China';
Person.prototype.show = function(){
    console.log(this.name + 'The nationality is:'+this.country+'，Gender:'+this.sex);
}

//IsPrototype Of () judges the relationship between instances and objects
console.log(Person.prototype.isPrototype(personA))  //true
console.log(Person.prototype.isPrototype(personB))  //true

//hasOwnPrototype() determines whether the attribute is local or inherited from the prototype attribute
console.log(personA.hasOwnPrototy('name'))  //true
console.log(personA.hasOwnPrototy('country'))  //false

//in determines whether there are attributes, whether local or inherited prototype
console.log('name' in personA)  //true
console.log('country' in personA)  //true

constructor attribute

Continue using the previous Person prototype object

function Person(name){
    this.name = name;
}
Person.prototype.sex = 'female';
var personA = new Person('Xiao Ming');
var personB = new Person('Chick');
//New instances automatically contain constructor attributes
console.log(personA.constructor == Person);  //true
console.log(personB.constructor == Person);  //true

You can also use instanceof to determine the relationship between instances and prototype objects.

console.log(personA instanceof Person);  //true
console.log(personB instanceof Person);  //true

"Inheritance" between commonly used Object s (constructor inheritance) (5)

Assuming there are two Object s, Person and Teacher, you want Teacher to inherit Person.

//Person object
function Person(name){
    this.name = name;
}

//Teacher object
function Teacher(age,sex){
    this.age = age;
    this.sex = sex;
}

1. Use constructor binding (call or apply)

function Teacher(age,sex,name){
    Person.apply(this,name);//Person.call(this,name);
    this.age = age;
    this.sex =sex;
}

2. Modify the constructor pointing using prototype, which is the prototype attribute we mentioned earlier

Teacher.prototype = new Person('xiaoming'); //Modify the original value of the prototy object
Teacher.prototype.constructor = Teacher;
var teacher1 = new Teacher(19,'female');

3. Direct inheritance of prototype

function Person(){}
person.prototype.name = "xiaoming";

function Teacher(age,sex){
    this.age = age;
    this.sex = sex;
}

//Teacher's prototype object points directly to Person's prototype object
Teacher.prototype = Person.prototype;
Teacher.prototype.constructor = Teacher
var teacher1 = new Teacher(19,"female");

4. Mediation new function() {} empty object

var Fn = new function(){};
Fn.prototype = Person.prototype;
Teacher.prototype = new Fn();
Teacher.prototype.constructor = Teacher;

//Extended encapsulation
function Extend(ChildObj,ParentObj){
    var Fn = new function(){};
    Fn.prototype = ParentObj.prototype;
    ChildObj.prototype = new Fn();
    ChildObj.prototype.constructor = ChildObj;
    ChildObj.uber = ParentObj.prototype;  //Direct to the prototype attribute of the parent object
}

//Teacher inherits Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,'female');

5. Copy Inheritance (Complete)

function Extend(ChildObj, ParentObj) {
    var p = ParentObj.prototype;
    var c = ChildObj.prototype;
    for (var i in p) { 
        c[i] = p[i];
　　}
　　c.uber = p;
} 
//Teacher inherits Person
Extend(Teacher,Person);
var teacher1 = new Teacher(19,'female');

Non-constructor "inheritance" (3)

//Original
var Person = {
    name: 'Xiao Ming'
}
var Teacher ={
    age:19,
    sex:'female'
}

Here's how we can get Teacher to inherit Person

1. object method

function object(obj){
    function Fn(){}
    Fn.prototype = obj;
    return new Fn();
}
var teacher1 = object(Person);
teacher1.age = 19;
teacher1.sex = 'female';

2. Shallow copy method

function extendCopy(ParentObj){
    var c = {};
    for(var i in ParentObj){
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}
//Using extended Copy
var teacher1 =  extendCopy(Person);
teacher1.age = 19;
teacher1.sex = 'female';

3. Deep copy method

function extendDeepCopy(ParentObj,ChildObj){
    var ChildObj = ChildObj || {};
    for(var i in ParentObj){
        if(typeof  ParentObj[i] === 'object'){
            c[i] = (ParentObj[i].constructor === Array) ? [] : {};
            extendDeepCopy(ChildObj[i],ParentObj[i]);
        }else{
            ChildObj[i] = ParentObj[i];
        }
    }
    return ChildObj;
}

//Use
var teacher1 = extendDeepCopy(Person1);
teacher1.age = 19;
teacher1.sex = 'female';

Copyright of this article belongs to the author. You are welcome to reproduce it. You should keep this statement and give a link to the original text. Thank you.