美文网首页
JavaScript如何实现继承?

JavaScript如何实现继承?

作者: DaZzling_佳 | 来源:发表于2017-11-06 14:46 被阅读0次

JS 中的继承主要分为两种:原型继承和非原型继承,非原型继承又分为寄生方式继承、借用或伪造构造函数方式继承、组合方式继承。

既然要实现继承,那么首先我们得有一个父类,代码如下:

//创建上级函数Person

function Person(name,age) {

this.name = name;

this.age = age;

}

//扩展原型

Person.prototype.breath = function() {

console.log("呼吸新鲜空气???");

};

1、原型继承:

通过将上级函数的实例赋值给下级函数的原型属性来实现。

//创建下级函数Student

function Student(name, age, stuNum){

this.name = name;

this.age = age;

this.stuNum = stuNum;

};

//原型继承

Student.prototype = new Person();

//扩展原型

Student.prototype.exam = function() {

console.log("及格万岁!!!");

};

特点:

1、可以解决原型中属性的复用问题,下级函数一旦继承上级函数那么下级函数的实例就可以使用自身原型中的属性和上级函数原型中的属性。

2、父类新增原型方法/原型属性,子类都能访问到。

3、为了防止下级函数扩展的原型被覆盖,要将原型继承放到扩展原型前面。

不足:

1、私有属性并没有复用

2、上级函数实例私有属性被携带进入下级函数的原型中

3、原型继承不支持多继承。多继承,指一个函数同时继承多个上级。因为原型继承的本质是属性赋值,prototype属性只能持有一个有效的对象。

2、借用或伪造构造函数的方式继承:

使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类。

//水果构造函数

function Fruit(taste, color){

this.taste = taste;

this.color = color;

}

//原型

Fruit.prototype.grow = function() {

console.log("再胖就要被吃掉!");

};

//西瓜构造函数

function WaterMelon(taste, color, origin){

// this.taste = taste;

// this.color = color;

//Fruit.call(this, taste, color);

Fruit.apply(this,arguments);

this.origin = origin;

}

//原型

WaterMelon.prototype.grow = function() {

console.log("再胖就要被吃掉!");

};

//创建西瓜实例

var xigua = new WaterMelon("sweety", "green", "海南");

此种非原型方式的继承,并不能完成函数实例对上级函数原型的复用,但是解决了私有属性重复逻辑的复用问题。

借用构造函数继承可以实现所谓的多继承。

3、寄生方式继承:

通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点。

//创建父子两级函数

function Father(name, age){

this.name = name;

this.age = age;

}

//自我介绍

Father.prototype.say = function(){

console.log("我今年:" + this.age + "我叫:" + this.name);

}

function Son(name, age, teaName){

// this.name = name;

// this.age = age;

//借用构造函数方式继承

Father.call(this, name, age);

this.teaName = teaName;

}

//创建寄生函数(过渡函数)

function tmp(){}

//修改(替换)过渡函数的原型

tmp.prototype = Father.prototype;

//原型方式继承

Son.prototype = new tmp();

//扩展儿子构造函数原型

Son.prototype.doHomework = function(){

console.log("做不完的作业!!!");

};

//创建儿子实例

var son = new Son("小明", 10, "Katty");

4、组合方式继承:

通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。

//创建父子两级函数

function Father(name, age){

this.name = name;

this.age = age;

}

//自我介绍

Father.prototype.say = function(){

console.log("我今年:" + this.age + "我叫:" + this.name);

}

function Son(name, age, teaName){

// this.name = name;

// this.age = age;

//借用构造函数方式继承

Father.call(this, name, age);

this.teaName = teaName;

}

//原型方式继承

Son.prototype = new Father();

//创建儿子实例

var son = new Son("小明", 10, "Katty");

特点:

1、可以继承实例属性/方法,也可以继承原型属性/方法

2、既是子类的实例,也是父类的实例

3、不存在引用属性共享问题

4、可传参

5、函数可复用

相关文章

  • 005|JavaScript ES6新特性之Classes

    在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面...

  • javascript代码积累

    一、javascript实现继承 1.基于原型链实现继承 2.基于属性和方法复制实现继承 二、javascript...

  • Javascript如何实现继承

    构造函数继承 原型构造函数组合继承

  • javascript 如何实现继承

    js既然要实现继承,那么首先我们得有一个父类,代码如下: 1、原型链继承 核心: 将父类的实例作为子类的原型 2、...

  • JavaScript如何实现继承?

    JS 中的继承主要分为两种:原型继承和非原型继承,非原型继承又分为寄生方式继承、借用或伪造构造函数方式继承、组合方...

  • Javascript如何实现继承

    一、是什么 继承(inheritance)是面向对象软件技术当中的一个概念。 如果一个类别B“继承自”另一个类别A...

  • Web前端经典面试试题及答案2

    javascript面向对象中继承实现? 面向对象的基本特征有:封闭、继承、多态。在JavaScript中实现继承...

  • js实现继承的几种方式

    如何实现继承? js中实现继承的方式主要是通过原型链完成的。了解原型链的相关信息可以点这里 javascript中...

  • 理解 JavaScript 中的原型链

    JavaScript 作为一门面对对象语言,但是却不支持接口继承,只支持实现继承。JavaScript 中实现继承...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

网友评论

      本文标题:JavaScript如何实现继承?

      本文链接:https://www.haomeiwen.com/subject/dirlmxtx.html