JavaScript中的原型与原型链
一直对JavaScript的原型与继承不了解,参考《JavaScript权威指南(第六版)》和《JavaScript高级程序设计(第三版)》对这个点的知识做个整理,方便自己记忆。以下内容大部分摘录自这两本书
每一个JavaScript对象都有与之相关的原型对象(prototype)。
原型对象有什么用?
JavaScript对象会继承原型对象的属性。
原型对象是从哪里来的?
首先我们先了解下创建对象基本的方式:
//1,对象直接量
var a={},b={m:1}
//2,构造函数
var c=new Object(),d=new Date();
//3,Object.create(param);
var x=Object.create(d);
1.使用对象直接量创建的对象使用Object.prototype作为它们的原型对象;
2.通过new创建的对象以构造函数的prototype属性作为原型对象;
3.通过Object.create()创建的对象使用第一个参数作为它们的原型对象;
说明:任何函数都可以是构造函数,比如有一个函数F,当使用 var f=new F()创建对象时,F就是对象f的构造函数;其他情况下F就是一个普通的函数
除了通过Object.create()创建的对象的原型是我们自己指定的外,Object.prototype和构造函数的prototype属性又是怎么来的呢?
1.Object.prototype是JavaScript内置的原型对象,定义了toString,valueOf等方法及一些属性。当我们通过var a={}创建对象a,虽然我们没有为a定义toString方法,但是当我们调用a.toString()的时候会返回"[object Object]",这是因为这个方法已经在Object.prototype定义了。
2.当我们创建函数的时候,JavaScript就会为该函数创建一个prototype属性。请看代码:
function F(){}
console.info(F.prototype);//{constructor: ƒ}
console.info(F.prototype.constructor===F);//true
原型链是什么?
先了解一下JavaScript对象原型的例外,在JavaScript中有少数对象是没有原型对象的。
1.Object.prototype
2.null
3.通过Object.create(null)创建的对象;
除上述对象外,所有的JavaScript对象默认都有一个原型对象。原型对象也是一个对象实例,如果它不属于上述3类对象,那么它也有自己的原型对象。比如a的原型对象是b,b的原型对象是c,c的原型对象是d……直到遇到上述3类没有原型对象的对象,从而在a,b,c,d……之间构成了一个链,a-->b-->c-->d……,这就是原型链。
原型链有什么用?
当在a中寻找一个属性,如果有返回属性值;如果没有就去b中找,有就返回属性值;如果没有就去c中找……,如果找到链的末端,还没找到就返回undefined。即通过原型链,实现了对象对原型链上的对象的继承。
说明:处在原型链前端的属性会隐藏后面对象的同名属性。比如:查找属性x,b和c中都有属性x,a.x的值等于b.x,而c中的x被隐藏了。
扩展原型链
构造函数有默认的原型对象,这个原型对象的原型对象是Object.prototype。那么,通过new加构造函数创建对象,原型链上只会有三个对象,如何扩展这个原型链呢?请看代码:
//本段代码来自于《JavaScript高级程序设计(第三版)》163页
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
红色代码处,我们修改了SubType函数的prototype属性的指向,使它指向了SuperType的一个对象实例。这个当我们通过new SubType()创建对象instance时,instance的原型对象是SuperType实例,而SuperType实例的原型对象是SuperType.prototype,SuperType.prototype的原型对象是Object.prototype。这样我们就扩展了对象instance的原型链。进而,我们也可以把SuperType.prototype设置为别的对象实例而再次扩展原型链。以此类推,我们可以无限扩展原型链。
可以看到通过原型链,可以在JavaScript中实现简单的继承:对象会继承自己原型链上的对象的属性。关于继承更进一步的知识请看《JavaScript高级程序设计(第三版)》6.3继承一节,讲的很详细。
以上就是对JavaScript原型最简单的总结。请各路大侠批评指正!
JavaScript中的原型与原型链的更多相关文章
- Javascript中的对象和原型(3)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(三)(转载)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(一)(转载)
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- JavaScript中的继承(原型链)
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...
- 深入理解JavaScript中的继承:原型链篇
一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...
- JavaScript中的继承与原型链
先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prot ...
- javascript中的构造函数和原型及原型链
纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象 new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...
- JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记(四)
一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...
- JavaScript——中的prototype(原型)
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
随机推荐
- webapi应用架构详解
webapi适用场景 常见的应用包括以下四类,PC客户端程序,APP程序,网站程序,H5程序.这些应用需要的数据,服务可由同一个接口服务程序提供,这样,大大提高了产品多平台设计开发的效率,避免了重复的 ...
- 在windows中使用Navicat连接Linux虚拟机中的mysql数据库
今天想用navicat远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对远程用户登陆的授权问题.这里说一下我的解决方法.(本人小白) 首先,我用navicat去远 ...
- swift学习经验和错误记录
1.selector 和action 直接用字符串,后面要加冒号":" 2.StoryBoard 连接后改名又重新连接出现了找不到符号的诡异错误,unknow class xxxx ...
- [转]PHP 5.3.0以上推荐使用mysqlnd驱动
我们一般的使用场景,比较少关注PHP版本的问题,而且市面上提供的PHP运行环境都还是5.2系列的. 原文:http://zhangxugg-163-com.iteye.com/blog/1894990 ...
- DRBD 高可用配置详解(转)
高可用性集群解释:一般是指当集群中有某个节点失效的情况下,其上的任务会自动转移到其他正常的节点上.还指可以将集群中的某节点进行离线维护再上线,该过程并不影响整个集群的运行.今天来做个Heartbeat ...
- lnmp服务器的目录信息
LNMP状态管理命令: LNMP状态管理: /root/lnmp {start|stop|reload|restart|kill|status}Nginx状态管理:/etc/init.d/nginx ...
- RSYNC在zabbix中的检查
RSYNC在zabbix中的检查 作者:高波 归档:学习笔记 2017/08/21 快捷键: Ctrl + 1 标题1 Ctrl + 2 标题2 Ctrl + 3 标题3 Ctr ...
- 本机添加多个git仓库账号
我们可能会需要在一台电脑上以不同的github账户去使用git,这时就需要去解决如何管理本机上的多个ssh key的问题了. 生成新ssh key 如果我们电脑上已经存在了一个ssh key,那么我们 ...
- 绝对详细!Nginx基本配置、性能优化指南
大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了!而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...
- cs108 03 ( 调试, java通用性)
Debuger Great questions These questions will solve most bugs: what method shows the symptom ? what l ...