JS 面向对象之继承 -- 原型链
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 面向对象之继承 -- 原型链的更多相关文章
- 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解
一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...
- js面向对象之继承-原型继承
//animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert(&q ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- JavaScript的面向对象原理之原型链
二.JavaScript的对象 为了能够清楚的解释这一切,我先从对象讲起.从其他面向对象语言(如Java)而来的人可能认为在JS里的对象也是由类来实例化出来的,并且是由属性和方法组成的. 实际上在JS ...
- 第20篇 js高级知识---深入原型链
前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...
- Javascript 组合继承 原型链继承 寄生继承
Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- js 继承 原型链
这里先说基于原型链实现的继承.那首先就得明白什么是原型链了: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 那么,假如我们让原型对象等于 ...
- JS继承——原型链
许多OO语言支持两种继承:接口继承和实现继承.ECMAScript只支持实现继承,且继承实现主要依赖原型链实现. 原型链 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原 ...
随机推荐
- undefined reference to `pthread_create'问题解决
在编译pthread有关的程序时,出现undefined reference to `pthread_create'这样的错误. 问题原因: pthread 库不是 Linux 系统默认的库,连接时需 ...
- xdotool-linux下的按键精灵
这是我在ST写的用来自动打开机顶盒的脚本 #!/bin/bash init_stb() { xdotool type "telnet 10.80.117.$1" xdotool k ...
- Mir2源码详解之服务端-登录网关(LoginGate)
传奇这款游戏,一直对我的影响很大.当年为了玩传奇,逃课,被老师叫过N次家长.言归正传,网上有很多源码,当然了,都是delphi的.并且很多源码还不全, 由于一直学习的c.c++.delphi还真不懂. ...
- 1. Hello UWP
1. UWP UWP,Universal Windows Platform,也就是 Windows 10 新推出的通用平台应用,只要一次编码,即可运行在 Windows 10 电脑以及手机上,甚至可以 ...
- Mysql的cmake编译与安装
Mysql的cmake编译与安装 实验准备环境: 我的操作系统是centos6.6 编译安装MariaDB之前,我们需要准备一些需要的环境 1.开发包组套件 [root@node19 ~]# yum ...
- 插入排序与shell排序(希尔排序)
1 .插入排序的过程如同我们平时打扑克牌取牌插入的过程,不断将取出的扑克牌插入已经排好的地方. 插入排序过程初始有序区间大小为1,取出无序区间的首元素,查找有序区间的合适位置,进行插入.不断重复上述过 ...
- 极速地将git项目部署到SAE的svn服务器上
本文最初发布于我的个人博客:http://jerryzou.com/posts/gitForSAE/ 我花了一些时间自己写了一个能够极速地将一个git项目部署到SAE的svn服务器上的脚本.代码不是复 ...
- 软件工程 speedsnail 第二次冲刺1次
20150518 完成任务:划线第一天,能画出一天连续的红线: 遇到问题: 问题1 线是弯曲的 解决1 没有解决 明日任务: 将线画直
- javascript的变量,传值和传址,参数之间关系
先把收获晾一下: 1.javascrip变量包含两种类型的值,一种为引用类型的值,一种是基本类型的值.引用类型包括:Array,Object,Function(可以这么理解,非基本类型的都是引用类型) ...
- 一元三次方程 (codevs 1038)题解
[问题描述] 有形如:ax3+bx2+cx+d=0这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...