javascript之原型
一、初识原型
JS的引用类型会内置一个特殊的属性prototype。默认的prototype是object类型的,是引用类型。既然默认的prototype是object类型的,那么prototype也会有一个原型,并且指向object的原型。
另外补充一点,function的原型可直接访问,object的不行。
示例:
function SuperType(){};SuperType.age=18;SuperType.prototype.color=[“red”,”blue”];var t1=new SuperType ();t1.name=”hh”;var t2=new SuperType ();t2.qq=”aa”;
SuperType,t1,t2原型关系示意图:
定义function SuperType时,编译器会为其分配一个prototype属性,并在内存中开辟一片区域用于存放SuperType的原型的数据,假设这片区域的地址为0xA。然后让SuperType的prototype指向0xA。由SuperType创建出来的t1和t2的prototype也指向内存地址0xA。如果有SuperType.prototype.color.push(“green”),则t1和t2的color也会变为[“red”,”blue”,”green”]。因为SuperType,t1,t2的原型指向的是同一个地址的数据。这个过程可以这么比喻:把原型比喻为你的银行卡账户,假设有一万块钱。当有人盗刷你的银行卡,刷走了4000,然后你去银行查看你账户余额,当然的会剩下6000。因为你跟盗刷你银行卡的人所持的银行卡指向的是同一个账户。
SuperType.prototype.color.push(“green”)后,示意图如下:
二、 原型链
其实在上面的示意图中,顺着箭头走,如Test—>Test的原型—>Object的原型,就是一条原型链了。当然t2—>Test的原型—>Object的原型也是一条原型链。下面对原形链进行补充,说明原型链在继承体系中是怎么工作的。
示例:
function SuperType(){}; SuperType.age=18; SuperType.prototype.color=[“red”,”blue”];function SubType(){} SubType.property=”property”; SubType.prototype=new SuperType(); SubType.prototype.test=function(){alert(“test”);}function Child(){} Child.prototype=new SubType(); var t1=new SuperType (); t1.name=”hh”; var t2=new SuperType (); t2.qq=”aa”;var s=new SubType(); var c=new Child();
注意,SubType的原型被重新赋值了,SubType.prototype=new SuperType();
所以SubType的原型是SuperType的一个对象实例。
上述代码的原型链示意图如下:
三、重置原型
要重置原型,只要对原型重新赋值即可。例如:function Person(){} Person.prototype={ name:”Leo” } 需要注意的是,Person原型重写后,Person的原型为{ name:”Leo”}。{ name:”Leo”}是一个匿名的Object实例,所以其constructor,为Object。也就是说重写后Person的原型的constructor为Object。如果constructor重要,可以为其增加一个constructor属性,如下:Person.prototype={ name:”Leo”, constructor:Person}不过此时还会有一个问题,这样设置的constructor将会使constructor变成是可枚举的。所以,如果想让它变为不可枚举的,可用Object.defineProperty进行设置。
四、原型的动态性
示例:
function Person(){}var p=new Person();Person.prototype.sayHi=function(){alert(“Hi”);};p.sayHi();//这里没问题,因为p在调用sayHi时,会先从自身找sayHi,找不到则会沿//着原形链去寻找,然后在Person的原型中找到了sayHi,于是就执行
原型动态性之-------重写原型的问题
function Person(){}var p=new Person();Person.prototype={sayName: function(){alert(“Hi”);},constructor:Person}p.sayName();//此时将会报错,p没有sayName方法
这里为何p.sayName会报错,Person的原型不是有sayName么?
且看下面的示意图:
五、原型共享所引发的问题
原型的优点就是共享。例如:
function Person (){} Person.prototype.sayName=function(){}; var p1=new Person (); var p2=new Person ();
在原型中定义sayName函数,于是p1,p2对象有同一个sayName。而不会在内存中分配两次内存来分别存放p1的sayName和p2的sayName。而缺点也是由共享所致。共享对于函数而言,是合适的,但是对于其他属性而言,可能就会出问题。示例如下:
function Person(){} Person.prototype.color=[“red”,”green”]; var p1=new Person(); var p2=new Person(); alert(p1.color);//输出red,green alert(p2.color); //输出red,green p2.color.push(“blue”); alert(p1.color); //输出red,green,blue。
注意,这里我并没有更改p1的color;alert(p2.color); //输出red,green,blue这里我们可以发现,p2的color进行更改之后,p1的color也跟着更改,这正是原型共享所引发的问题。
六、原型链与instanceof实现原理
假设a instanceof b,那么会从a的原形链中找出是否有跟b的原型相等的原型,如果找到则返回true,否则返回false。
示例如下:
function SuperType(){} function SubType(){} function Test(){} SubType.prototype=new SuperType(); var s=new SubType(); console.log(s instanceof SubType);//打出true,这是因为s的原型等于SubType的原型 SubType.prototype=new SuperType(); console.log(s instanceof SubType);//打出false
示意图如下:(省略了百度上的文字说明而改为图片说明)
以上是百度经验里关于 javascript原型 的介绍。
延伸:
1.构造函数中的return
构造函数在没有return的情况下新的实例默认返回undefined;如果构造函数中有return语句,
分两种情况:
- return 基本类型,返回函数
- return 对象,返回对象。
2.原型模式的执行流程
- 先查找构造函数实例里的属性或方法,如果有,就立即返回。
- 如果构造函数的实例没有,就去它的原型对象里找,如果有,就立即返回
拜读了风雨后见彩虹的文章
转载于:https://www.cnblogs.com/Merrys/p/8012661.html
javascript之原型相关推荐
- javascript之原型与原型链
前言 了解JavaScript的原型与原型链有助于我们更深层次的理解这门语言,看过很多相关的文章,写的都很好,下面是根据自己的理解,一步步揭开原型与原型链 正文 一.数据类型 在JavaScr ...
- 【面试必备】javascript的原型和继承
摘要: 原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- 关于javascript的原型和原型链,看我就够了(二)
温故 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 仔细观察如下代码 function Foo(name) {th ...
- Javascript的原型链图
90%的前端或者js程序员或者老师们对Javascript懂得不比这个多 给手机看的 但是这个图里的所有褐色单向箭头链就是Javascript的原型链(颜色标注对理解js原型链很关键) 这图中的各个_ ...
- 【前端芝士树】Javascript的原型与原型链
[前端芝士树]Javascript的原型.原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下 0. 为什么会出现原型和原型链的概念 1994年,网景公司(Ne ...
- 三张图搞懂JavaScript的原型对象与原型链
对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...
- 关于javascript的原型和原型链,看我就够了(一)
关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起 创建对象 创建对象的三种方式: 对象直接量 通过对象直接量创建对象,这 ...
- JavaScript Prototypes 原型 Lynda课程中文字幕
JavaScript: Prototypes 中文字幕 JavaScript:原型 中文字幕JavaScript: Prototypes 面向对象编程的JavaScript方法对许多开发人员来说都是陌 ...
- Javascript的原型链、instanceof与typeof
为什么80%的码农都做不了架构师?>>> 在Javascript里,一切对象(Object和Function)都有内部的属性_proto_,但只Object.prototype ...
最新文章
- url中去掉index.php,方便redirect()
- 我的问道游戏主题皮肤
- 数据挖掘在企业中应用的四种途径
- 深入浅出设计模式原则之里氏代换原则(Liskov Substitution Principle)
- prometheus连续查询_Prometheus 不完全避坑指南
- face alignment by 3000 fps系列学习总结(三)
- matplotlib绘制矢量图像(svg),pdf and ps文件
- [转载] 利用python制作简单计算器
- apache和nginx那点事儿--阻塞和异步
- MySQL 重置密码
- python背包问题并行_背包问题九讲python3实现
- oracle ogg操作日志,对一段Oracle GoldenGate (OGG) 传输过程日志(.rpt文件)的解释...
- 厚着脸皮求领导写了一篇java小白进阶大牛之路!!!
- Publish Over SSH 本地安装
- Python使用 Pyvisa库 控制 NI 设备Fluke(详细)
- CSO是什么?这家年增长48%的企业级软件公司告诉你
- sql语句分类(附mysql实操语句)
- Python实例6: 贺卡制作
- 用Python中的py2neo库操作neo4j,搭建简单关联图谱—基于家有儿女中的人物关系
- 康奈尔大学的计算机专业怎么样,康奈尔大学研究生院计算机专业怎么样?