JS继承——原型的应用

前面我们知道JS是基于对象编程的一种脚本语言,在JS本着一切皆对象的原则,对象之间也涉及到了继承,不过这里的继承与我们以往学习过的继承有所不同,它运用的是对象的原型,来构造一个原型链来实现对超类对象的继承。

1、如何实现对象继承

function Box() { //Box 构造<span style="font-family:Arial;font-size:18px;">,超类对象</span>
this.name = 'Lee';
}
Desk.prototype = new Box(); //<span style="font-family:Arial;font-size:18px;">子类继承</span>Desk,继承了 Box,通过原型,形成链条

继承原理小结

1、通过原型链继承:超类型实例化后的对象实例赋给子类对象的原型属性

2、new Box()会将超类对象构造函数和原型中的信息都交给子类对象,即继承全部信息

3、利用instanceof来判断子类是否从属于某个超类。

4、子类继承时,优先选择实例中的属性值(如果出现原型与构造实例冲突时)。

2、继承中的问题

上篇博客中还有一个遗留问题,原型函数共享带来无法重写的问题,那么在继承中,同样因为共享而无法进行重写,同时,子类无法给超类进行传参。对于这个问题,JS中可采用对象冒充来解决。

function Box(age) {
    this.name = ['Lee', 'Jack', 'Hello']
    this.age = age;
}
function Desk(age) {
    Box.call(this, age); //对象冒充,给超类型传参
}
var desk = new Desk(200);
alert(desk.age);

对象冒充SWOT分析

1、实现了子类为超类对象进行传参问题

2、只能冒充构造函数中信息,不能冒充原型中的信息

当然,我们可以将所有信息写进构造函数中,但这样消耗内存空间太大,所以,这里可以采用原型链+构造函数的方式来实现,即组合模式:

function Box(age) {
    this.name = ['Lee', 'Jack', 'Hello']
    this.age = age;
}
Box.prototype.run = function () { <span style="font-family:Arial;">//将方法写进原型中</span>
    return this.name + this.age;
};
function Desk(age) {
    Box.call(this, age); //对象冒充,实现传参,第二次调用
}
Desk.prototype = new Box(); //原型链继承,继承全部信息,第一次<span style="font-family:Arial;">调用</span>超类型
var desk = new Desk(100);
alert(desk.run());

同时,还可以利用原型式继承等方法来实现对象传参问题,只需一个中转函数来协助返回一个实例化后的对象即可。

function obj(o) { //传递一个字面量函数
    function F() {} //创建一个构造函数
    F.prototype = o; //把字面量函数赋值给构造函数的原型
    return new F(); //最终返回出实例化的构造函数
}
var box = { //字面量对象
    name : 'Lee',
    arr : ['哥哥','妹妹','姐姐']
};
box1.name = 'Jack';
alert(box1.name);

但是原型式继承中由于中转函数中构造函数采用原型链继承,因此会出现引用类型共享问题,所以,通常不采用此种方法。

综上:JS继承中通常可采用组合式继承来实现为超类传参和重写问题,有时,由于为了更好的封装,解决组合中二次调用超类型问题,也会采用寄生组合继承来实现,这里还需要一个中转和寄生函数来实现。这个还有待深入学习。。。

时间: 2024-12-20 17:29:59

JS继承——原型的应用的相关文章

JS继承,原型继承,构造函数的继承,非构造函数&quot;的继承

a.原型继承 一.new运算符的缺点 用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法.比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species. function DOG(name){ this.name = name; this.species = '犬科'; } 然后,生成两个实例对象: var dogA = new DOG('大毛'); var dogB = new DOG('二毛'); 这两个对象的species属性是独立的,修改其中一个,不会影响到另一个.

JS继承之原型继承

许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. --摘自<JavaScript高级程序设计> 原型继承 原型链是实现原型继承的主要方法,基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实现原型链的基本模式: 1 2 3 4 5 6 7 8 9 10 11 12 13 fun

js继承与原型链

对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念(虽然 class 是个保留字,不能作为变量名来使用). 继承方面,JavaScript 中的每个对象都有一个内部私有的链接指向另一个对象,这个对象就是原对象的原型.这个原型对象也有自己的原型,直到对象的原型为 null 为止(也就是没有原型).这种一级一级的链结构就称为原型链. 虽然这通常会被称作 JavaScrip

js继承之原型链继承

面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针,指向了一个对象,我们称之为 原型对象.什么是指针?指针就好比学生的学号,原型对象则是那个学生.我们通过学号找到唯一的那个学生.假设突然,指针设置 null, 学号重置空了,不要慌,对象还存在,学生也没消失.只是不好找了. 原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相

怎么理解js的原型链继承?

前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js的继承关系,需要借助于原型链.之前的文章,我有讲过原型和原型链的概念.在这,再重新回顾一下. js中万物皆对象,每个对象都有一个隐式原型 __proto__ ,指向创建它的构造函数的原型对象. 函数(构造函数)除了有一个隐式原型对象,还有一个属性prototype,它指向一个对象,这个对象就是原型对

js继承之二(组合模式=借用构造函数+原型链方式)

借用构造函数模式:不能继承原型上的属性,可以避免引用类型修改问题 原型链:能够继承原型上的属性,会发生引用类型修改 so:敲黑板! function CarModel(c){ this.color=c||"白色"; this.arr=[1,2,3]; this.getColor=function(){ console.log('我的颜色是'+this.color); } } CarModel.prototype.test="lla"; function Car(br

web前端开发必懂之一:JS继承和继承基础总结

首先,推荐一篇博客豪情的博客JS提高篇: http://www.cnblogs.com/jikey/p/3604459.html ,里面的链接全是精华, 一般人我不告诉他; 我们会先从JS的基本的设计模式开始,由浅入深: 工厂模式:因为使用用一个接口创建很多对象会产生大量的重复代码,为了解决这个问题,人们就开始使用工厂模式: <!DOCTYPE html> <html> <head> <title></title> <meta charse

js继承的常用方式

写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的. 我们都知道面向对象语言的三大特征:继承.封装.多态,但JavaScript不是真正的面向对象,它只是基于面向对象,所以会有自己独特的地方.这里就说说JavaScript的继承是如何实现的. 学习过Java和c++的都知道,它们的继承通过类实现,但JavaScript没有类这个概念,那它通过什么机

JS继承的实现方式

前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal