The officially released ES6 has encapsulated and implemented the inheritance## in other OO languages. #Form, Class Extends##, here mainly records the prototype inheritance and borrowing of jsConstructorInheritance
一, Prototype chain inheritancefunction Super(){
this.name="小明";
}
Super.prototype.sayName = function(){
alert(this.name)
};function Sub(){}
Sub.prototype = new Super();var instance = new Sub();
instance.sayName();//小明1234567891011
//When the super class contains reference type attribute values, multiple instances of one of the subclasses , as long as one instance reference attribute is modified only once, the reference type attribute value of other instances will also change immediately //The reason is that the super class attribute becomes the prototype attribute of the sub class function Super(){this.name=" Xiao Ming"; this.friends = ['Xiaohong','Xiaoqiang'];
}Super.prototype.sayName = function(){ alert(this.name) };function Sub(){} Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub(); instance1.friends.push('张三'); console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强", "张三"]1234567891011121314151617
2. Borrowing constructor inheritance function Super(){this.name="小明"; this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){
alert(this.name)
};function Sub(){
Super.call(this);
}var instance1 = new Sub();var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]12345678910111213141516
If you use the borrowed constructor alone, you cannot inherit the prototype in the super class
Properties and methods3. Combined inheritance (prototypal inheritance borrows constructor inheritance)Combined inheritance is also the most commonly used inheritance method in actual development
function Super(){this.name="小明"; this.friends = ['小红','小强']; } Super.prototype.sayName = function(){ alert(this.name) };function Sub(){ Super.call(this); } Sub.prototype = new Super();var instance1 = new Sub();var instance2 = new Sub(); instance1.friends.push('张三'); console.log(instance1.friends);//["小红", "小强", "张三"]console.log(instance2.friends);//["小红", "小强"]instance1.sayName();//小明instance2.sayName();//小明12345678910111213141516171819
Problems with combined inheritance
//组合式继承中,超类的构造函数将被调用两次function Super(){this.name="小明"; this.friends = ['小红','小强']; } Super.prototype.sayName = function(){ alert(this.name) };function Sub(){ Super.call(this);//第二次调用} Sub.prototype = new Super();//第一次调用var instance = new Sub();1234567891011121314
4. Parasitic inheritance//When the main consideration is the object instead of defining the type and constructor yourself, parasitic inheritance It is a useful pattern, but it cannot reuse functions. function
createAnother(original){ var clone = Object(original);//创建一个新对象,original的副本 clone.sayName = function(){ //对象的增强,添加额外的方法 alert('hi'); } return clone; }var person = { name:'小明', friends:['小红','小强'] }var person1 = createAnother(person);var person2 = createAnother(person); person1.friends.push('张三'); console.log(person.friends);//["小红", "小强", "张三"]console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强", "张三"]123456789101112131415161718
Parasitic combined inheritance
//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中 创建对象 副本的方法 prototype.constructor = superr; //弥补重写原型失去的默认constructor属性 sub.prototype = prototype; }function Super(name){ this.name = name; this.friends = ['小红','小强']; } Super.prototype.sayName = function(){ alert(this.name); }function Sub(name){ Super.call(this,name); } inheritPrototype(Sub,Super);var person1 = new Sub('小明');var person2 = new Sub('小华'); person1.friends.push('张三'); console.log(person1.friends);//["小红", "小强", "张三"]console.log(person2.friends);//["小红", "小强"]console.log(person1.sayName());//小明console.log(person2.sayName());//小华
The above are several inheritance methods in js that I have compiled for you. I hope it will be helpful to everyone in the future.
Related articles:
Specific steps on how to pass two parameters to the JS method in JS onclickjs basic syntax Detailed answer#Explanation of methods of defining classes in JSThe above is the detailed content of What are the inheritance methods in js. For more information, please follow other related articles on the PHP Chinese website!