《JAVASCRIPT高级程序设计》根植于原型链的继承
继承是面向对象的语言中,一个最为津津乐道并乐此不疲的话题之一。JAVASCRIPT中的继承,主要是依靠原型链来实现的。上一篇文章介绍过,JAVASCRIPT中,每一个对象都有一个prototype属性,这个属性指向一个原型对象(原型对象包含了所有指向它的对象共享的属性和方法,默认是Object)。那么,如果我们让原型对象等于一个类型的实例,那么结果会怎么样呢?显然,此时的原型对象将包含指向另一个原型的指针;假如另一个原型又是另一个类型的实例,如此层层递进,就构成了原型链。这就是原型链的基本概念。
以下是一个原型链的简单例子:
// 定义一个对象
function superType(){
this.property = true;
}
// 定义对象共享的方法
superType.prototype.getSuperValue = function(){
return this.property;
}
// 定义另外一个对象
function subType(){
}
// 通过原型链的方式(让对象subType指向superType的一个实例),让subType继承superType
subType.prototype = new superType();
var instance = new subType();
alert(instance.getSuperValue()); //true
JAVASCRIPT不仅提供了函数来确认原型和实例之间的关系,也允许子类重写超类的方法:
// 由于原型链的关系,我们可以说,instance 是 Object, SuperType, SubType中任何一个类型的实例,因此,以下结果,均返回true // instanceof方法 alert(instance instanceof Object); alert(instance instanceof SuperType); alert(instance instanceof SubType); // isPrototypeOf方法 alert(Object.prototype.isPrototypeOf(instance)); alert(SuperType.prototype.isPrototypeOf(instance)); alert(SubType.prototype.isPrototypeOf(instance));
// 定义一个对象
function superType(){
this.property = true;
}
// 定义对象共享的方法
superType.prototype.getSuperValue = function(){
return this.property;
}
// 定义另外一个对象
function subType(){
}
// 通过原型链的方式(让对象subType指向superType的一个实例),让subType继承superType
subType.prototype = new superType();
var instance = new subType();
// 重写超类中的方法
subType.prototype.getSuperValue = function(){
return false;
}
// 注意,不能使用下面的字面量的方式来来添加方法,因为这种方式会切断原型链,让subType和superType没有联系
/*subType.prototype = {
getSuperVaue:function(){
return false
}
};*/
alert(instance.getSuperValue()); //false
想必大家还记得,我们前面介绍过的包含所有引用类型的原型属性,会被所有实例所共享;这也是为什么要在构造函数中定义属性,而不在原型中定义属性的原因;在通过原型链来继承时,也会出现相同的问题——当有实例修改了原型的某个引用类型的属性时,所有实例的这个属性均会被修改。由于这个问题,实践中很少单独使用原型链,而采用借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承的方式。
一、借用构造函数
借用构造函数是在子类型中调用超类型的构造函数,注意此时的superType并不是subType的原型。
function superType(){
this.colors = ["red","blue","green"];
}
function subType(){
// 继承superType
superType.call(this);
}
var instance1 = new subType();
instance1.colors.push("black");
alert(instance1.colors);//red,blue,green,black
var instance2 = new subType();
alert(instance2.colors);//red,blue,green
alert(instance1 instanceof superType); //false
借用构造函数所有的方法都在构造函数中定义,因此函数的复用便无从谈起了;在实践中,很少单独使用借用构造函数,而是将原型链和借用构造函数一起使用,接下来介绍的组合继承就是这种方式。
二、组合继承
组合继承是原型链和构造函数的技术组合到一块儿,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。这也是JAVASCRIPT中最常见的继承模式。
function superType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
superType.prototype.sayName = function(){
alert(this.name);
}
function subType(name){
// 继承属性,同时也传递了自己的参数
superType.call(this, name);
}
// 继承方法
subType.prototype = new superType();
var instance1 = new subType("Lillian");
instance1.colors.push("black");
alert(instance1.colors);//red,blue,green,black
instance1.sayName(); //Lillian
var instance2 = new subType("Matthew");
alert(instance2.colors);//red,blue,green
instance2.sayName();//Matthew
alert(instance1 instanceof superType); //true
组合继承也有自己的不足:无论在什么情况下,都会调用两次超类的构造函数(例子中标红的部分),一次是在创建子类原型的时候,另一次是在子类构造函数内部。后面我们将介绍的寄生组合继承会避免这个问题。
三、原型继承
这种方式与使用原型链继承类似,所有的实例会共享引用类型的属性以及方法。在以下例子中,是通过一个叫做object111的函数来实现的,在object111函数的内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。
function object111(o){
function F(){};
F.prototype = o;
return new F();
}
var person = {
friends:["Lillian", "Matthew", "Susan"]
};
var person1 = object111(person);
person1.friends.push("111");
var person2 = object111(person);
person2.friends.push("222");
alert(person1.friends); //Lillian,Matthew,Susan,111,222
alert(person1.friends); //Lillian,Matthew,Susan,111,222
四、寄生式继承
寄生式继承与原型继承在格式上很像,也是创建了一个用于封装继承过程的函数,只是这个函数中没有定义构造函数。
function createAnother(original){
// 这里的object111函数,可以使用任何能够返回新对象的函数替代
var clone = object111(original);
clone.sayHi = function(){
alert("Hi");
};
return clone;
}
var person = {
friends:["Lillian", "Matthew", "Susan"]
};
var person1 = createAnother(person);
person1.sayHi();
五、寄生组合继承
和组合继承相比,寄生组合继承也是调用借用构造函数来继承属性,但并不通过指定子类型的原型来继承,而是获取超类的一个副本。它比组合继承效率高的地方在于,只调用了一次超类的构造函数,而我们前面介绍的组合继承,调用了两次。
function object111(o){
function F(){};
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
// 这里的object111函数,可以使用任何能够返回新对象的函数替代
var prototype = object111(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function superType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
superType.prototype.sayName = function(){
alert(this.name);
}
function subType(name){
// 继承属性,同时也传递了自己的参数
superType.call(this, name);
}
inheritPrototype(subType, superType)
var person1 = new subType("Lillian");
person1.sayName();
小结:
JAVASCRIPT主要是通过原型链进行的继承,原型链的构建是通过将一个类型的实例赋值给另一个对象的原型来实现的。原型链的问题是,所有对象的实例共享继承的属性和方法,因此不适合单独使用;通过构建多种继承模式,解决了这个问题。
《JAVASCRIPT高级程序设计》根植于原型链的继承的更多相关文章
- JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包
了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...
- 读javascript高级程序设计06-面向对象之继承
原型链是实现继承的主要方法,通过原型能让一个引用类型继承另一个引用类型. 1.原型链实现继承 function SuperType(){ this.superprop=1; } SuperType.p ...
- 《Javascript高级程序设计》读书笔记之继承
1.原型链继承 让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法 function SuperType() { this.property=true; } ...
- JavaScript高级程序设计之原型对象
构造函数.原型对象.构造器是一体的关系,同时产生: 实例中的隐藏属性__proto__指向原型对象: 原型对象是这四种关系的纽带. 原型对象是动态的,不论在何处变化,实例中可以立即体现出来. var ...
- JavaScript高级程序设计之作用域链
JavaScript只有函数作用域:每个函数都有个作用域链直达window对象. 变量的查找由内而外层层查找,找到即止. 同时不仅可以查找使用,甚至可以改变外部变量. var color = &quo ...
- JavaScript中的原型链和继承
理解原型链 在 JavaScript 的世界中,函数是一等公民. 上面这句话在很多地方都看到过.用我自己的话来理解就是:函数既当爹又当妈."当爹"是因为我们用函数去处理各种&quo ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 【转】js原型链与继承
原文链接:https://blog.csdn.net/u012468376/article/details/53127929 一.继承的概念 继承是所有的面向对象的语言最重要的特征之一.大部分的o ...
随机推荐
- a标签的target的四个值
特殊的目标 有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签 ...
- 照着例子学习 protobuf-lua
参考文章:cocos2dx使用lua和protobuf 首先得下载protobuf-gen-lua的插件,插件Git地址在此. 下载完之后进入到protoc-gen-lua\plugin这个目录,并在 ...
- Nginx Image Module图片缩略图 水印处理模块
Nginx Image Module图片缩略图 水印处理模块 下载Tengine tar -zxvf tengine-1.4.5.tar.gz cd tengine-1.4.5 下载Nginx tar ...
- libconfig第一篇———使用指南
官网:http://www.hyperrealm.com/libconfig/ 1 libconfig是什么? Libconfig是一个结构化的配置文件库,它可以定义一些配置文件,例如test.cfg ...
- eclipse创建Maven父子结构Maven项目
1.创建聚合模块 选择菜单项 File—>New—>Other,在弹出的对话框中选择Maven下的Maven Project,然后单击Next按钮,在弹出的New Maven Projec ...
- Centos 修改时间地区及NTP同步北京时间
在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...
- thinkPHP的学习
1.版本,以3.1为主,因为手册是基于这个的,最新的版本,还没有对应的手册 2.发现一个问题,echo 中文时,出现乱码,而调用模版则正常. 3.写url的注意大小写.index和Index是不同的 ...
- object 类 toString() 和 equals() 的覆写
基本作用: objiect类是所有类的父类. 任何一个类定义的时候如果没有明确定义了父类的话,默认父类是Object类. class A extends Object{} 在整个java里面,类的继承 ...
- 使用PHPMailer发送带附件并支持HTML内容的邮件
PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并不像PHP本身mail()函数需要服务器环境支持,您只需要设置邮件服务器以相关信息就能实现邮件 ...
- RF & Microarray
REF[24] 随机森林是一个很好适用于微阵列数据的分类算法: 1.即使大多数的预测变量都是噪音,RF仍然具有优秀的性能,因此不需要对基因进行预选择. 2.能够应用于变量数远远大于观测数据量的情况 3 ...