继承:子类继承父类中的属性和方法(目的是让子类的实例能够调取父类中的属性和方法)
一、原型链继承:让父类中的属性和方法在子类实例的原型链上(实例想调用这些方法,是基于__proto__原型链查找机制完成的)
- 子类.prototype = new 父类()
- 子类.prototype.constructor = 父类 -->保证原型重定向后的完整性
function A(x) {
this.x=x
}
A.prototype.getX=function(){
console.log(this.x);
}
function B(y) {
this.y=y
}
B.prototype=new A(100)
B.prototype.constructor=B
B.prototype.getY=function(){
console.log(this.y);
}
优点:1、父类中的私有或公有属性方法,都会成为子类的公有属性方法。(新实例不会继承父类实例的属性!)
缺点:1、新实例无法向父类构造函数传参。
2、继承单一。
3、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
二、call继承(构造函数继承):用.call()和.apply()将父类构造函数引入子类函数
子类方法中把父类方法当成普通函数执行,让父类中的this执行子类的实例,相当于给子类的实例添加很多私有属性和方法
A.call(B,x,y)
1`改变函数A的this指向,使之指向B;
2` 把A函数放到B中运行,x和y是A函数的参数。
function A(x) {
this.x=x
}
A.prototype.getX=function(){
console.log(this.x);
}
function B(y) {
A.call(this,200) //this:B的实例b1 b1.x=200
this.y=y
}
B.prototype.getY=function(){
console.log(this.y);
}
let b1 = new B(100)
b1.y
b1.x
特点:1、只继承了父类构造函数的属性,没有继承父类原型的属性。
2、可以继承多个构造函数属性(call多个)。
3、在子实例中可向父实例传参。缺点:1、只能继承父类构造函数的属性。
2、无法实现构造函数的复用。(每次用每次都要重新调用)
3、每个新实例都有父类构造函数的副本,臃肿。
三、寄生组合继承:call继承+类似原型继承
Object.create(obj) 创建一个空对象,让空对象的__proto__指向obj,也就是将obj作为新创建对象的原型
function A(x) {
this.x=x
}
A.prototype.getX=function(){
console.log(this.x);
}
function B(y) {
A.call(this,200) //this:B的实例b1 b1.x=200
this.y=y
}
B.prototype=Object.create(A.prototype)
//1、Object.create(obj) 创建一个空对象,让空对象的__proto__指向obj,将obj作为新创建对象的原型
//2、将B的原型指向创建的空对象
B.prototype.constructor=B
B.prototype.getY=function(){
console.log(this.y);
}
let b1 = new B(100)
b1.y
b1.x
ie低版本不兼容Object.create(obj),可手动实现一个Object.create(obj), 利用类实例的原型链指向对象的原型
Object.create=function(obj){
function Fn() { }//创建类,空对象
Fn.prototype=obj //类的原型指向obj
return new Fn() //创建类的实例
}
特点:父类的私有和公有分别是子类实例的私有和公有属性和方法
四、ES6中的继承:extends+super
es6中无法通过寄生组合继承进行继承
class A{
constructor(x){
this.x=x
}
getX(){
console.log(this.x);
}
}
class B{
constructor(y){
// A.call(this,200) //报错,不允许直接执行,只能通过new执行
this.y=y
}
getY(){
console.log(this.y);
}
}
// B.prototype=Object.create(A.prototype) //不允许重定向原型的指向
let b1=new B(200)
通过extends和super关键字
class A{
constructor(x){
this.x=x
}
getX(){
console.log(this.x);
}
}
class B extends A{ //B.prototype.__proto__=A.prototype
constructor(y){
super(200) // A.call(this,200) //把父类当成普通方法执行,给方法传递参数,让方法中的this是子类的实例
this.y=y
}
getY(){
console.log(this.y);
}
}
// B.prototype=Object.create(A.prototype) //不允许重定向原型的指向
let b1=new B(100)
class B extends A 相当于 B.prototype.__proto__=A.prototype
super(200) 相当于 A.call(this,200) //把父类当成普通方法执行,给方法传递参数,让方法中的this是子类的实例