原型链用于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. Linux 中, 安装html转pdf工具:wkhtmltopdf

    wkhtmltopdf下载地址官网:https://wkhtmltopdf.org/downloads.html 进入到/opt文件夹下面,新建文件夹wkhtmltopdf,然后把下载好的wkhtml ...

  2. 亚马逊免费服务器搭建Discuz!论坛过程(三)

    参考文章:http://faq.comsenz.com/library/system/env/env_linux.htm 参考但是不要完全按照上述文章,不然很可能出错. 尤其不要init 6 重启,我 ...

  3. Ubuntu+XAMPP+Wordpress的安装与配置问题

    Wordpress自动更新以及安装在线主题的时候需要输入FTP信息 打开/opt/lampp/htdocs/wordpress/wp-config.php文件 define('FS_METHOD',' ...

  4. Spring MVC-表单(Form)标签-复选框集合(Checkboxes)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_checkboxes.htm 说明:示例基于Spring MVC 4.1.6. 以 ...

  5. HDU 4507

    数位DP. 一般是利用DFS来求数位DP了,结合了记忆化搜索.设dp[i][j][k]为前i位,并且前i位的数位和mod7为j,前i位的数字的表示数字值mod7.为什么可以这样呢?因为继续DFS下去, ...

  6. ZOJ 3527

    这题难在破环. 对于不是环的情况,只需按照一般的树形DP来做,一步一步往根递推就可以了.对于环,则枚举其中一点的两种情况,取或不取,然后再递推,就可以了.当到达某结点的下一结点为环开始的点时,退出即可 ...

  7. 原型设计模式prototype-构造js自己定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. tomcat下载及启动

    http://tomcat.apache.org/ 打开网页,在左边选择版本,选择后网页往下面拉 拉下来,根据windows选择32还是64位的,其中zip是windows免安装版 下载后解压,然后配 ...

  9. ZOJ 3829 Known Notation(字符串处理 数学 牡丹江现场赛)

    题目链接:problemId=5383">http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5383 Do you ...

  10. CSU 1506 Problem D: Double Shortest Paths(最小费用最大流)

    题意:2个人从1走到n,假设一条路第一次走则是价值di,假设第二次还走这条路则须要价值di+ai,要你输出2个人到达终点的最小价值! 太水了!一条边建2次就OK了.第一次价值为di,第二次为ai+di ...