通过继承方式可以分类:
- 只继承父类实例上的属性:
call继承
- 继承父类的公共属性:
链式继承
、Object.setPrototypeof()
、Object.create()
- 同时继承父类的公共属性和实例上的属性:
在子类内部调用call,使用Object.create/链式/Object.setPrototypeof()
、class extends继承
一、只继承父类的实例上的属性
1. call继承
原理:把父类的this指向子类,并且执行 缺点:不能继承公共属性;
//父类
function A(){
this.type='我是a类';
}
A.prototype.content={name:'我是a的内容呦!'};
//子类
function Q(){
this.name='我是q啦';
A.call(this);
}
Q.prototype.content={name:'我是q的内容,,哈哈哈'};
const q=new Q();
console.log(q);
二、继承父类的公共属性
1. 链式继承
原理:利用的是原型链查找机制;
//父类
function A(){
this.type='我是a啦';
}
A.prototype.content={name:'我是a的内容呦!'};
//子类
function Q(){
this.name='我是q啦';
}
Q.prototype.content={name:'我是q的内容,,哈哈哈'};
Q.prototype.__proto__=A.prototype;
const q=new Q();
console.log(q);
2. Object.setPrototypeof(es6的写法)
兼容性不太好
//父类
function A(){
this.type='我是a啦';
}
A.prototype.content={name:'我是a的内容呦!'};
//子类
function Q(){
this.name='我是q啦';
}
Q.prototype.content={name:'我是q的内容,,哈哈哈'};
Object.setPrototypeOf(Q.prototype,A.prototype);
const q=new Q();
console.log(q);
3. Object.create()
原理:create方法中声明定义个空函数fn;使fn的prototype=传入的参数;返回fn
⚠️注意:q.proto.constructor是A
//父类
function A(){
this.type='我是a啦';
}
A.prototype.content={name:'我是a的内容呦!'};
//子类
function Q(){
this.name='我是q啦';
}
Q.prototype.content={name:'我是q的内容,,哈哈哈'};
Q.prototype=Object.create(A.prototype);
//如果单写Q.prototype=Object.create(A.prototype);;
//此时它的constructor是A;
//所以在Object.create的第二个参数constructor指向Q
Q.prototype=Object.create(A.prototype,{contructor:{value:Q}});
const q=new Q();
console.log(q);
三、同时继承父类的公共属性和实例上的属性
1. 在子类内部调用call,使用Object.create/链式/Object.setPrototypeof()
//父类
function A(){
this.type='我是a类';
}
A.prototype.content={name:'我是a的内容呦!'};
//子类
function Q(){
this.name='我是q啦';
A.call(this);
}
Q.prototype.content={name:'我是q的内容,,哈哈哈'};
Q.prototype.__proto__=A.prototype;//这里用Object.create或者Object.setPrototypeof()都可以
const q=new Q();
console.log(q);
2. es6 class extends
class A{
static a(){
console.log('我是a,啦啦啦');
}
constructor(){
this.type='a';
}
Sing(){
console.log('我会唱歌!');
}
}
class Q extends A{
constructor(){
super();
}
}
const q=new Q();
console.log(q);