ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现。

原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

简单回顾下构造函数、原型和实例的关系:

每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针(prototype),而实例则包含一个指向原型对象的内部指针(__proto__)。

实现原型链有一种基本模式,其代码大致如下:

function aa() {
this.boolean_1 = true;
}
aa.prototype.value = function() {
return this.boolean_1;
} function bb() {
this.boolean_2 = false;
}
//继承了aa
bb.prototype = new aa();
bb.prototype.value = function() {
return this.boolean_2
}
var A = new bb();
console.log(A.value())
console.log(aa.prototype.isPrototypeOf(A));
console.log(A instanceof Object);

以上代码是定义了2个类型:aa()和bb(),每个类型分别有一个属性和方法。2者的区别是bb继承了aa。通过创建aa实例并将该实例赋给bb.prototype。原来存在于aa中所有的属性和方法也都存在于bb.prototype中了。在确立了这种继承关系后,又在bb.prototype中添加了一个方法。

可以通过两种方式来确定原型和实例之间的关系。第一种方式是使用instanceof操作符;第二种是使用isPrototypeOf()方法。

当bb继承了aa后,结果为:

false
true
true

当把继承去掉后,结果为:

false
false
true

原型链的问题:

虽然很强大,可以用它来实现继承,但它也存在一些问题。最主要的问题来自包含引用类型值的原型。在通过原型来实现继承时,原型实际上会变成一个类型的实例。于是,原先的实例属性也顺理成章的变成了现在的原型的属性了。看例子吧!

function aa(){
this.colors=['red','blue','orange']
}
function bb(){}
bb.prototype=new aa();
var A=new bb();
A.colors.push('black');
console.log(A.colors); // ==> ["red", "blue", "orange", "black"]
var B=new bb();
console.log(B.colors); // ==> ["red", "blue", "orange", "black"]

aa构造函数定义了一个属性,该属性包含一个数组(引用类型值)。当bb通过原型继承了aa之后,bb.prototype就变成了aa的一个实例。因此也拥有了aa的所有属性和方法。结果bb会共享这个colors属性,我们通过对A.colors的修改,能够通过B.colors反映出来。

第二个问题是创建子类型的实例时,不能向超类型的构造函数中传递函数。鉴于这几点问题,实践中很少会单独使用原型链。

JS 面向对象之继承 -- 原型链的更多相关文章

  1. 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

    一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...

  2. js面向对象之继承-原型继承

    //animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert(&q ...

  3. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  4. JavaScript的面向对象原理之原型链

    二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...

  5. 第20篇 js高级知识---深入原型链

    前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...

  6. Javascript 组合继承 原型链继承 寄生继承

    Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...

  7. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  8. js 继承 原型链

    这里先说基于原型链实现的继承.那首先就得明白什么是原型链了: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 那么,假如我们让原型对象等于 ...

  9. JS继承——原型链

    许多OO语言支持两种继承:接口继承和实现继承.ECMAScript只支持实现继承,且继承实现主要依赖原型链实现. 原型链 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原 ...

随机推荐

  1. JavaScript字符串转日期格式

    var dependedVal="2005-3-4"; //根据日期字符串转换成日期 var regEx = new RegExp("\\-","gi ...

  2. 如何防止DDos攻击?

    ---恢复内容开始--- 一.拒绝服务攻击的发展 从拒绝服务攻击诞生到现在已经有了很多的发展,从最初的简单Dos到现在的DDOS.那么什么是Dos和DDOS呢?DoS是一种利用单台计算机的攻击方式.而 ...

  3. node中的流程控制中,co,thunkify为什么return callback()可以做到流程控制?

    前言 我在学习generator ,yield ,co,thunkify的时候,有许多费解的地方,经过了许多的实践,也慢慢学会用,慢慢的理解,前一阵子有个其他项目的同事过来我们项目组学习node,发现 ...

  4. C# Datetime类常用技巧

    C#类常用技巧 //今天DateTime.Now.Date.ToShortDateString();//昨天,也就是今天的日期减一DateTime.Now.AddDays(-1).ToShortDat ...

  5. 别不拿里程碑当石头---------IT项目管理之项目计划(转)

    如果说做项目不需要计划,恐怕没人会认同.是否每个项目计划都起到了作用呢?却不尽然.知道要做计划,但不知道为什么做计划,如何做计划的还是大有人在.所以很多计划沦为依样画葫芦,成了摆设. IT项目计划的用 ...

  6. C#中sizeof的用法实例分析

    这篇文章主要介绍了C#中sizeof的用法,包括了常见的用法及注释事项,需要的朋友可以参考下.   sizeof是C#中非常重要的方法,本文就以实例形式分析C#中sizeof的用法.分享给大家供大家参 ...

  7. 利用脚本修改SQL SERVER排序规则

    利用脚本修改SQL SERVER排序规则 编写人:CC阿爸 2014-3-1 l  今年的一项重要工作是对公司所用系统进行繁简的转换,程序转成简体基本很容易解决,但数据库转换成简体,就没那么容易了.经 ...

  8. spring(spring boot)笔记

    1.查看数据库连接:org.springframework.boot.autoconfigure.jdbc里的public DataSource dataSource() 方法.在这里打断点,可以查看 ...

  9. CentOS下MySQL忘记root密码解决方法【转载】

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...

  10. C++primer 阅读点滴记录(一)

    第十三章 复制控制:(copy control) 复制构造函数(copy constructor) 复制操作符(assignment operator) ps: 什么时候需要显示的定义复制控制操作:类 ...