1.原型链

function SuperType(){
this.property = true;
} SuperType.prototype.getSuperValue = function(){
return this.property;
}; function SubType(){
this.subproperty = false;
} //inherit from SuperType
SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){
return this.subproperty;
}; var instance = new SubType();
alert(instance.getSuperValue()); //true // 原型链上查询,首先是function就是Object实例出来,然后SubType的prototype是SuperType的实例,最后是instance是SubType的实例。
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

1.1原型链的问题(很少用这种方法来实际开发)

function SuperType(){
this.colors = ["red", "blue", "green"];
} function SubType(){
} //inherit from SuperType
SubType.prototype = new SuperType(); var instance1 = new SubType();
// 增加了black,导致原型属性也增加了black
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"

2.借用构造函数(实际开发,也不会这么用)

function SuperType(name){
this.name = name;
} function SubType(){
//inherit from SuperType passing in an argument
SuperType.call(this, "Nicholas"); //instance property
this.age = 29;
} var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //

3.组合继承,将原型链和借用构造函数的技术组合起来,扬长避短

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;
} SubType.prototype = new 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(); // var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //

4.原型式继承

function object(o){
function F(){}
F.prototype = o;
return new F();
} var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}; var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob"); var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

4.1原型式继承 ECMA5版本

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
}; var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob"); var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

5.寄生组合式继承(当前最佳实践)

function object(o){
function F(){}
F.prototype = o;
return new F();
} function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //create object
prototype.constructor = subType; //augment object 如果不修复constructor,则指向SuperType
subType.prototype = prototype; //assign object
} 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(); // var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //

面向对象的JavaScript系列二,继承的更多相关文章

  1. 面向对象的JavaScript系列一,创建对象

    1.最简单的创建对象方法 var person = new Object(); person.name = "sam wu"; person.age = 25; person.jo ...

  2. JavaScript设计模式基础之面向对象的JavaScript(二)

    多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...

  3. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承   这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...

  4. JavaScript系列--浅析原型链与继承

    一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ...

  5. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  6. 面向对象的Javascript(5):继承

    在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求 良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScrip ...

  7. (一)我的Javascript系列:Javascript的面向对象旅程(上)

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

  8. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

  9. JavaScript 面向对象程序设计(下)——继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

随机推荐

  1. 【python cookbook】【数据结构与算法】3.保存最后N个元素

    问题:希望在迭代或是其他形式的处理过程中对最后几项记录做一个有限的历史记录统计 解决方案:选择collections.deque. 如下的代码对一系列文本行做简单的文本匹配操作,当发现有匹配时就输出当 ...

  2. 从追MM谈Java的23种设计模式(转)

    从追MM谈Java的23种设计模式    这个是从某个文章转载过来的.但是忘了原文链接.如果知道的,我追加一下. 1.FACTORY-追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西 ...

  3. linux下的module_param()解释【转】

    转自:http://blog.csdn.net/wavemcu/article/details/7762133 版权声明:本文为博主原创文章,未经博主允许不得转载. ***************** ...

  4. Linux驱动学习笔记(6)信号量(semaphore)与互斥量(mutex)【转】

    转自:http://blog.chinaunix.net/uid-24943863-id-3193530.html 并发导致竟态,从而导致对共享数据的非控制访问,产生非预期结果,我们要避免竟态的发生. ...

  5. export

    export export PATH=$PATH:/ROOT

  6. Centos6.5和Centos7 php环境搭建如何实现呢

    首先我们先查看下centos的版本信息 代码如下: #适用于所有的linux lsb_release -a#或者cat /etc/redhat-release#又或者rpm -q centos-rel ...

  7. Android系统版本与API Level对照表

    Platform Version API Level VERSION_CODE Notes Android 4.2 17 JELLY_BEAN_MR1   Android 4.1, 4.1.1 16 ...

  8. Volley的基本用法

    1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...

  9. codeigniter db操作方法

    链接数据库 ——- $this->load->database();//手动连接数据库 //连接多数据库 $DB1 = $this->load->database(‘group ...

  10. Cocos2dx框架常用单词(一)

    收集了一些Cocos2dx里面主要单词的翻译. Toggle:切换Finite:有限Instant:瞬时interval:间隔Flip:翻转place:座位,放置Target:目标reverse:反向 ...