原型链用于ECMAScript的继承。其思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。说人话,我们知道,一个构造函数Subtype,其原型对象有一个指向构造函数的指针,这是联系构造函数和原型的桥梁,如果我让原型对象的指针指向了另一个原型,而另一个原型原本指向其构造函数的指针也指向了另一个原型,那么,这就是一个原型链了,原型上的属性会一层一层往下传递。

function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=function(){
return this.property;
}; function SubType(){
this.subproperty=false;
}
//subtype继承了supertype的prototype
SubType.prototype=new SuperType();
SubType.prototype.getSubValue=function(){
return this.subproperty;
};
var instance=new Subtype();
alert(instance.getSuperValue());//true;

所以,继承的实现本质是重写了原型对象。

上面代码中,最后输出了true,原理是:以读取模式访问一个实例属性或方法,现在instance中搜索,搜索不到就沿着原型链往上查找,instance->Subtype.prototype->SuperType.prototype。如果找不到返回undefined.

在JS面向对象(1)中我们已经说到原型链的问题,也就是原型属性是可以被所有实例共享的。解决这个问题的方法可以是借用构造函数,JS高级程序设计上的解释是这种技术的基本思想是:在子类型构造函数的内部调用超类型的构造函数,函数是在特定环境中执行代码的对象,可以通过使用apply()和call()方法在新创建的对象上执行构造函数。这话说的我一愣一愣的0.0

 function SuperType(){
this.color=['aa','bb'];
} function SubType(){
SuperType.call(this);
}//继承了SuperType. var instance1=new SuperType();
var instance2=new SuperType();
instance1.color.push('cc');
alert(instance2.color)//['aa','bb'];没有因为instance1实例修改了color属性而被影响。

1、call可以扩充函数的作用域。

2、call可以传递参数。

第6行的SuperType.call(this),在new SubType时,即创建新对象时,同时执行SuperType构造函数,而且其中的this指向的是实例instance1或者instance2。因此每个实例都会有自己的colors副本。

call传递参数如下

function SuperType(name){
this.color=['aa','bb'];
this.name=name;
} function SubType(name){
SuperType.call(this,name);
this.age=20;
}//继承了SuperType. var instance1=new SubType('a');
var instance2=new SubType('b');
instance1.color.push('cc');
alert(instance2.color);//['aa','bb']
alert(instance2.age);//20
alert(instance2.name);//b;

组合继承 :使用原型链实现对原型属性和方法的继承(共享),使用构造函数实现对实例属性的继承(独立)。

function SuperType2(name){
this.name=name;
this.colors=['red','green'];
}
SuperType2.prototype.sayName=function(){
alert(this.name);//prototype的方法会共享给实例
};
function SubType2(name,age){
//继承属性
SuperType2.call(this,name);//借用超类型的构造函数 使每个subtype的实例拥有独立的colors副本,可以修改colors而不会影响其他实例的colors
this.age=age;
}
//继承方法
SubType2.prototype=new SuperType2();//SuperType2的实例赋值给SubType2原型
SubType2.prototype.constructor=SubType2;
SubType2.prototype.sayAge=function(){
alert(this.age);
};
/*SubType2.prototype={
sayAge:function(){
alert(this.age);
}
};*/ var instance3=new SubType2('nick',20);
var instance4=new SubType2('jack',30);
instance3.colors.push('black');
alert('组合继承 age:'+instance3.age);//
alert('instance3自己修改后的的colors:'+instance3.colors);//['red','green','black'];
alert(instance3.name);//nick
instance3.sayName();//nick
instance3.sayAge();//20
instance4.sayName();//jack
instance4.sayAge();//30

SuperType2的实例赋值给SubType2原型,两个不同的instance3和instance4实例拥有自己的属性,name/color/age等,还可以有相同的方法sayAge() sayName()。

组合继承是最常用的继承模式,除此之外还有许多的模式,如原型式继承、寄生式继承等。

JS面向对象(2)——原型链的更多相关文章

  1. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  2. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  3. JS对象、原型链

    忘记在哪里看到过,有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型,所以第一篇总结就从这里出发. 对象 JavaScript 是一种基于对象的编程语言,但它与一般面向对象的编程语言 ...

  4. JS中的原型链和原型的认识

    这篇文章主要是学习一下JavaScript中的难点------原型和原型链 自定义一个对象 我们学习一门编程语言,必然要使用它完成一些特定的功能,而面向对象的语言因为符合人类的认知规律,在这方面做得很 ...

  5. JS面向对象,原型,继承

    ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript ...

  6. js面向对象与原型

    创建对象 var box = new Object();//创建对象 box.name = 'Lee'; //添加属性 box.age = 100; box.run = function(){ ret ...

  7. JS中注意原型链的“指向”

    昨天压缩Js文件时发现了项目中的一个prototype的问题代码如下所示: 1. <script> var XXX = function(){ }; var x1 = new XXX(); ...

  8. JS 一条原型链扯到底

    在正文之前,首先要知道两点, 1.__proto__是每个js 对象的内置属性,而prototype 是函数的内置属性,也是一个对象. 2.所谓原型,指的就是每个函数对象的prototype属性. f ...

  9. 深入理解JS对象和原型链

    函数在整个js中是最复杂也是最重要的知识 一个函数中存在多面性: 1.它本身就是一个普通的函数,执行的时候形成的私有作用域(闭包),形参赋值,预解释,代码执行,执行完 成后栈内存销毁/不销毁. 2.& ...

  10. JS面向对象之原型

    面向对象之原型 为什么要使用原型 由于 js 是解释执行的语言, 那么在代码中出现的函数与对象, 如果重复执行, 那么会创建多个副本, 消耗更多的内存, 从而降低性能 传统构造函数的问题 functi ...

随机推荐

  1. 04-Linux系统编程-第01天(文件IO、阻塞非阻塞)

    03-系统函数 系统编程章节大纲 1 文件I/O 2 文件系统 3 进程 4 进程间通信 5 信号 6 进程间关系 7 守护进程 8 线程 9 线程同步 10 网络基础 11 socket编程 12 ...

  2. 51nod1242斐波那契数列的第N项 【矩阵快速幂】

    斐波那契数列的定义如下: F(0) = 0 F(1) = 1 F(n) = F(n - 1) + F(n - 2) (n >= 2) (1, 1, 2, 3, 5, 8, 13, 21, 34, ...

  3. centos7系统修改内核

    修改centos6的内核启动顺序,只需要修改/etc/grub.conf 里的default项配置即可.那么centos7系统该如何修改呢? 下面就centos7系统修改内核,做如下记录: 一般在编译 ...

  4. python中的二进制、八进制、十六进制

    python中通常显示和运算的是十进制数字. 一.python中的二进制 bin()函数,将十进制转换为二进制,0b是二进制的前缀.如: >>> bin(10) '0b1010' 二 ...

  5. UVa OJ 679 - Dropping Balls

    本题是一个二叉树问题——Perfect Binary Tree. 一个完美二叉树(PBT)的深度为D,从根结点开始,按层次遍历顺序编号为1,2,...,2D-1. 有若干个球,依次由根结点落下.当一个 ...

  6. FZU - 1606 - Format the expression

    先上题目: Problem 1606 Format the expression Accept: 87    Submit: 390Time Limit: 1000 mSec    Memory Li ...

  7. MySQL:浅析 Impossible WHERE noticed after reading const tables

    使用 EXPLAIN 执行计划的时候,在 Extra 中偶尔会看到这样的描述: Impossible WHERE noticed after reading const tables 字面上的意思是: ...

  8. Fitnesse安装

    Fitnesse安装比较简单 1.确保机器上已经安装了java环境

  9. Android应用开发-护眼提醒-总结篇

    设计初衷: 在学习<第一行代码>的服务那章时,涉及到了alarmmanager的内容.然后笔者当时正好在关注"程序猿怎样保护眼睛"的问题. 于是便自己做了一个demo, ...

  10. Codeforces Round #350 (Div. 2) E. Correct Bracket Sequence Editor 线段树模拟

    E. Correct Bracket Sequence Editor   Recently Polycarp started to develop a text editor that works o ...