理解JavaScript继承(二)
理解JavaScript继承(二)
5.寄生式继承
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function createAnother(original){
var clone = object(original);//通过调用函数创建一个新对象
clone.sayHi=function(){//以某种方式增强这个对象
alert("hi");
};
return clone;//返回这个对象
}
var person={
name:"Nicholas",
friends:["Shelby","Court,"Van"]
};
var anotherPerson=createAnother(person);
anotherPerson.sayHi();//"hi"
这个实例基于person返回了一个新对象anotherPerson。新对象不仅具有person的所有属性和方法,而且还有自己的sayHi()方法。
缺点:和构造函数一样,不能做到函数复用而降低效率。
6.寄生组合式继承
前面介绍说组合继承是JavaScript最常用的继承模式;实际上,它也存在一些问题,组合继承的最大问题是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
组合式继承实例
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);//第二次调用SuperType()
this.age = age;
}
SubType.prototype = new SuperType();//第一次调用SuperType()
SubType.prototype.sayAge = function(){
alert(this.age);
};
在第一次调用SuperType()构造函数时,SubType.prototype会得到两个属性:name和colors;他们都是SuperType的实例属性,只不过现在位于SubType的原型中。当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors,于是,这两个属性就屏蔽了原型中的两个同名属性。
上面一共有两组name和colors属性:一组在实例上,一组在SubType原型中。这就是调用两次SuperType的结果。
为了解决这种情况,于是就出现了下面的——寄生组合式继承方法。
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。(之所以是超类型的副本,而不是直接是超类型,如果直接是超类型的话。当子类型为原型添加方法时,也会影响到超类型的)
寄生组合式继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
var prototype = object(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, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
上面实例只在SuperType.call(this, name);这调用了一次构造函数,并且因此避免了在prototype上面创建不必要的,多余的属性。
注:YUI的extend()就是采用这种寄生组合式继承
理解JavaScript继承(二)的更多相关文章
- 理解JavaScript继承
原文:理解JavaScript继承 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sp ...
- 理解JavaScript继承(三)
理解JavaScript继承(三) 通过把父对象的属性,全部拷贝给子对象,也能实现继承. 7.浅拷贝 function extendCopy(p) { var o = {}; for (var pro ...
- 理解JavaScript继承(一)
理解JavaScript继承(一) 我们都知道,面向对象的编程语言非常强大,之所以强大,就是其支持继承.在JavaScript中,也支持继承,而且有多种方法实现继承,比如原型链继承,借用构造函数继承, ...
- 深入理解 JavaScript(二)
立即调用的函数表达式 前言 大家学 JavaScript 的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这 ...
- javascript继承(二)—创建对象的三种模式
一.工厂模式 function createPerson(name,age){ var o = {}; o.name = name; o.age = age; o.sayHi = function() ...
- 彻底理解Javascript原型继承
彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...
- 理解Javascript的动态语言特性
原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...
- 深入理解javascript原型和闭包(6)——继承
为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
随机推荐
- 现代 C++ 编译时 结构体字段反射
基于 C++ 14 原生语法,不到 100 行代码:让编译器帮你写 JSON 序列化/反序列化代码,告别体力劳动.
- 简单的PHP的任务队列
文章太长,不作过多介绍,反正,文章的头部就说明了大概的意思...原文如下:写了一个简单的队列任务处理.多进程任务,异步任务可能会用到这个(主要是命令行应用)比如,任务的某个一个环节速度十分不稳定,可能 ...
- html打造动画【系列3】- 小猫笑脸动画
猫咪容器 咱们每次画一个图片,肯定先要确定一个容器,几确定一下图形的位置和大小. <div class="mao_box"> <div class="m ...
- 浏览器根对象window之caches
在控制台输入window. caches可输出一个叫做CacheStorage的对象,它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也 ...
- c# 异步和同步问题(转载)
[C#] 谈谈异步编程async await 为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过 ...
- Java实验案例(接口)
实验任务 任务一:设计实现发声接口 任务二:动物乐园 实验内容 任务一:设计实现发声接口 任务目的: 理解并掌握如何定义接口 掌握接口的实现方式 任务描述: 设计和实现一个Soundable接口,该接 ...
- CSS的设计模式
什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...
- CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
- mac os maverick下安装nginx+php-fpm via homebrew
自己虽然平时爱折腾,却很少有记下来的习惯,除非碰到特别多问题的部署才会有冲动.今天看同事折腾git,在旁边看着他mac上的evernote满满的记了好几篇,全是技术相关的记录,忽然很感慨.过去解决了很 ...
- linux下指定源下载
我们默认使用yun 安装的时候 使用的 是外国的网站进行下载的 那么下载肯定是慢的 我们可以更改为国内的站点进行下载的 比如临时更改为国内的站点进行下载 pip install -i +你的源 p ...