First, let's talk about what is inherited?
In simple terms, it is to make a no objects inherit some of the properties and methods have properties and methods of both properties have a method of the object.
That inheritance was divided, what does? Let me explain to you some common inherited it.
1. inherited prototype object
function Parent(){
this.name = "zhangshan";
}
Parent.prototype.show = function(){
console.log("111");
}
function Child(){
}
// 浅拷贝
Child.prototype = Parent.prototype;
var t = new Parent();
t.show();//111
console.log(t.name);//zhangshan
var f = new Child();
f.show();//111
console.log(f.name);//undefined
The above is the result of the way we use shallow copy inherited, but if we if Child itself has a way to show it? Whether it will have to cover it?
function Parent(){
this.name = "zhangshan";
}
Parent.prototype.show = function(){
console.log("111");
}
function Child(){
}
// 浅拷贝
Child.prototype = Parent.prototype;
//
Child.prototype.show = function(){
console.log("123");
}
var t = new Parent();
t.show();//123
console.log(t.name);//zhangshan
var f = new Child();
f.show();//123
console.log(f.name);//undefined
The results, as we predicted, since the use of shallow copy, but when the method Child prototypes show covering a method Parent prototype show, so show the value of the output method has become the Parent 123; how to solve it? We can make a deep copy of his way to be uncovered.
function Parent(){
this.name = "zhangshan";
}
Parent.prototype.show = function(){
console.log("111");
}
function Child(){
}
// 深拷贝:不会被覆盖
for(var i in Parent.prototype){
Child.prototype[i] = Parent.prototype[i];
}
//
Child.prototype.show = function(){
console.log("123");
}
var t = new Parent();
t.show();//111
console.log(t.name);//zhangshan
var f = new Child();
f.show();//123
console.log(f.name);//undefined
To sum up: our prototype object inheritance 1. Simple, convenient, easy to operate. 2. However, the body of the prototype can only inherit methods and properties can not inherit the methods and properties in the constructor.
2. prototype chain to inherit
function Parent(){
this.name = "zhangshan"
}
Parent.prototype.show = function(){
console.log("哈哈哈")
}
function Child(){
}
Child.prototype = new Parent();
// Parent的实例
var f = new Parent();
f.show();///哈哈哈
console.log(f.name);///zhangshan
// Child的实例
var t = new Child();
t.show();///哈哈哈
console.log(t.name);//zhangshan
Obviously we use prototype inheritance chain perfect solution to the prototype object constructor can not be inherited defect properties and methods, but the prototype chain to inherit if there disadvantages? I would like for everyone to look at an example:
function Parent(n){
this.name = n;
}
Parent.prototype.show = function(){
console.log("哈哈哈")
}
function Child(n){
}
Child.prototype = new Parent("lisi");
// Parent的实例
var f = new Parent();
f.show();///哈哈哈
console.log(f.name);///undefined
// Child的实例
var t = new Child();
t.show();///哈哈哈
console.log(t.name);//lisi
It is worth the time when we use the constructor parameter passing way to the Parent incoming attributes, we find that is not feasible, name attribute Parent is undefined, this also shows that our prototype chain to inherit 1. more simple, convenient easy to operate. 2. You can only inherited prototype body of methods and properties, but also inherited constructor methods and properties. 3. However, convenient mass participation.
3. The constructor inheritance
function Parent(s){
this.skill = s;
}
Parent.prototype.show = function(){
console.log(this.skill);
}
function Child(n){
// 利用this的改变
// 在Child中执行Parent的同时，修改this指向，为Child的this
// 因为Child将来被new执行，Child中的this，指向将来Child的实例
Parent.call(this,n);
}
var p = new Parent("zhangshan");
console.log(p.skill);//zhangshan
p.show();//zhangshan
var c = new Child("lisi");
console.log(c.skill);//lisi
c.show();//报错
By the above example we might see inherited constructor: can inherit property or method inside the constructor can not inherit property or method prototype body.
4. Mix inheritance
function Parent(s){
this.skill = s;
}
Parent.prototype.show = function(){
console.log(this.skill);
}
function Child(n){
Parent.call(this,n);
}
for(var i in Parent.prototype){
Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
console.log("wangwu");
}
var p = new Parent("zhangshan");
p.show();//zhangshan
var c = new Child("lisi");
c.show();//wangwu
console.log(c.skill);//lisi
Mixed Inheritance: Inherited constructor + prototype inheritance, and his features are: 1. a little complicated. 2. You can either inherit constructors, but also can be inherited prototype. 3. easy to pass parameters. 4. constructor may be multiple inheritance. But why no mention of the prototype chain to inherit it, because there are still risks prototype chain to inherit parameters, so for the time being does not apply.
5.class inheritance
class Parent{
constructor(s){
this.skill = s;
}
show(){
console.log(this.skill);
}
}
class Child extends Parent{
constructor(n){
super(n);
}
}
var p = new Parent("zhangshan");
p.show();//zhangshan
var c = new Child("lisi");
c.show();//lisi
When we inherited class ES6, we found this to be a very convenient way to inherit, mainly rely extends and super. But his works: a constructor argument inherit + the prototype chain to inherit.
