构造函数的继承

在将继承之前先说一下ES5和ES6的构造函数语法

ES5的构造函数语法

function CreateObj1(name,age){
    this.name = name;
    this.age = age;
}
createObj1.prototype.fun = function(){
    console.log('我是ES5语法创建的实例化对象')
}

ES6的构造函数语法

class CreateObj2{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    fun(){
        console.log('我是ES6语法创建的实例化对象')
    }
}

为什么要使用继承?
创建新的构造函数时,有一些属性或者方法,与之前的构造函数相同
为了节约代码,可以从之前的构造函数中,继承属性和方法
对不同的属性和方法,再重新定义

ES6继承语法
class 子类构造函数名称 extends 父类构造函数名称{}

constructor 构造器中,定义参数

参数可以是从父级继承来的,也可以是子类自己定义的
从父类继承的属性必须用 super(属性) 来定义

也可以定义子类的属性和子类的方法
父类的所有方法都会继承

ES5 的继承语法
语法1: 原型继承
语法2: 借用构造函数继承
语法3: 组合继承

1、原型继承
所谓的原型继承,就是通过 原型链 将父类构造函数 和 子类 构造函数 串联起来
所谓的原型链,本质就是通过 proto 将实例化对象,构造函数 串联起来,可以调用数据
实例化对象,通过 proto 访问 构造函数 prototype 中存储的函数方法

定义一个父类构造函数

function Father(name,age){
this.name = name;
this.age = age;
}

通过父类构造函数生成一个实例化对象

const objFather = new Father('张三',18);

定义一个子类构造函数

 function Son(){}

在子类的 prototype 中 添加 父类构造函数生成的实例化对象

Son.prototype = objFather;

语法2: 借用构造函数继承
主要继承 属性

定义父类构造函数

function Father(name,age){
this.name = name;
this.age = age;
}
 Father.prototype.fun1 = function(){};
Father.prototype.fun2 = function(){};

使用父类构造函数,生成一个对象

const objFather = new Father('张三' , 18);

定义子类构造函数

function Son(sex){
//调用父类构造函数,this的指向就会出现问题
//要通过 call 方法,改变this指向
//父类构造函数的this指向,应该是父类生成的实例化对象
//现在需要指向子类构造函数生成的实例化对象,也就是子类的this

//这里的this,在子类构造函数中,就是子类的this,就是指向子类构造函数生成的实例化对象
// Father()构造函数,this的指向,变成了,子类this的指向,李四和20的两个实参
//就赋值给了,子类构造函数,生成的实例化对象上了

//效果是,通过父类,给子类生成的实例化对象,定义属性和属性值
//不能继承父类的函数方法
Father.call(this , '李四' , 20);
//子类自定义的方法
this.sex = sex;
 }

3: 组合继承

同时使用 原型继承和借用构造函数继承
原型继承 : 可以继承父类的方法 但是不能定义继承父类的属性
借用构造函数继承 : 可以定义继承父类的属性,但是不能继承父类的方法

// 定义父类

function Father(name,age){
    this.name = name;
    this.age = age;
}
Father.prototype.fun1 = function(){};
Father.prototype.fun2 = function(){};

使用父类构造函数,生成一个对象

const objFather = new Father('张三' , 18);

创建子类

function Son(sex){
    // 通过借用构造函数,继承父类的属性
    Father.call(this,'李四' , 20);
    // 定义子类,自定义属性
    this.sex = sex;
}

通过原型继承,继承父类的方法

Son.prototype = objFather;

定义子类,自定义函数方法

Son.prototype.f = function(){}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值