JS 原型链
之前对JS的prototype知识比较模糊,今天理清了记下来,以防忘记,直切正题:
1.要明白原型链,就必须先清楚JS的构造函数模式:
js是面向对象的语言,既然是面型对象,就一定会有一个对象的模板,Java中用"类"来作为对象的模板,而JS中,可以用构造函数来作为对象的模板,你可以认为相当于Java中的"类",
写法如下所示:
function Cat(name,color){
this.name=name;
this.color=color;
}
var c = new Cat();
Cat函数就是构造函数,构造函数中的this指向的就是当脚本运行时Cat所生成的实例,如果把构造函数看成类,就会轻松许多。
紧接着下面一句var c = new Cat();就是根据构造函数生成相应的对象,类似于JAVA中根据类生成实例对象一样。
这就是JS中面向对象的构造器模式。
2.明白了构造函数模式,来看看构造函数模式的弊端以及如何解决:
我们可以根据构造函数来创建N个对象,每个对象有自己的内存空间。我们来思考这么一个问题:如果构造函数中有两个固定值的属性,当我们用这个构造函数去创建对象的时候,每个对象都会在自己的内存空间中存放这个固定值的属性,这就造成了不必要的浪费,对吧?想一想JAVA是不是也存在这种情况?是存在的,那JAVA怎么解决的?对,继承!
在JAVA中我们会将一些对象存在共性的地方,抽取出来存放到Super类中;在JS中对于每一个构造函数都有这么一个额外的对象,用来存放一些共有的东西,是不是很父类很像?这个额外的对象就是原型对象,一个原型对象对应一个构造函数,也就是说一个构造函数只有一个原型对象,例如构造函数Object,就对应一个原型对象,构造函数Obejct的prototype属性指向他所对应的原型对象,而Object构造器生成的实例对象都有一个__proto__属性,也只想Obejct构造器所对应得原型对象,这样就实现了节省内存的目的。如下代码:
function Cat(name,color){
this.name = name;
this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
3.明白了原型的概念,再来看看原型链的概念:
要清楚在构造函数模式中有几个角色:构造函数、实例对象、原型对象。 在这三个对象之间,他们的关系是怎样的?先来理一理。
如上图所示,A代表构造函数,它持有一个prototype属性,指向他所对应的原型对象A.prototype,而A.prototype持有constructor属性指向A构造函数,以此来形成一对一的关系,而new A()代表着根据A构造函数来生成的实例对象,new A()持有一个__proto__属性,指向A所对应的原型对象,以此来实现多个实例对象共享原型对象中的固定状态的某些变量。
所以总结一下:构造函数中有一个prototype属性、原型对象有一个constructor属性、实例对象中有一个__proto__属性。
刚才好像落下一个,就是原型对象中除了constructor属性外,其实还有一个__proto__属性,这个怎么理解?如果你把原型对象看成一个实例对象,是不是他也可以从其他的原型对象中共享数据?这就是了,原型对象中的__proto__就是构成原型链的关键,你可以理解成继承链。
我们都知道JS是面向对象,那就不可避免的JS存在一个上帝级别的对象,就是Obejct,所有的一切对象来源于它,什么意思呢?
其实上面的A构造器所对应的原型对象中的__proto__指向就是Object的原型对象,所以可以向相面的图这样理解:
补充一点:其实构造函数其实也是一个对象对吧?那么它是那个构造函数构造出来的呢?当然是Function,所以说构造函数作为一个函数实例对象,也持有__proto__属性,并指向Function.prototype。
参考资料
- http://www.html-js.com/article/2841
- http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
JS 原型链的更多相关文章
- JS原型链
JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...
- 深入分析JS原型链以及为什么不能在原型链上使用对象
在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype:如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕 ...
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- js 原型链和继承(转)
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- 一张图看懂 JS 原型链
JS 原型链,画了张图,终于理清楚各种关系有木有 写在最后: __proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! function Person() { } 是函 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- JS原型链与继承别再被问倒了
原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
- 02 js原型链
1 js原型链是一个绕不开的话题.直接上说吧. /** * 1. js里的原型链是怎么样的? 带class 和不带class的原型链的不同. */ const util = require('util ...
随机推荐
- PHP异步调用多线程
$data["name"] = 'godlike';$data["age"] = 18; $post = http_build_query($data);$le ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- vs2015 HTTP Error 400. The request hostname is invalid.
<site name="> <application path="/" applicationPool="Clr4IntegratedAppP ...
- sqlserver事务加锁机制
锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...
- 欢迎来到Joyful Physics博客
本博客主要包括以下内容: 物理课程 预计会涵盖非物理专业普通物理.物理专业普通物理.理论物理(四大力学).凝聚态物理,会特别关注软物质物理,因为博主是做软物质物理的. 软硬科普 软科普写给非专业人士. ...
- RabbitMQ 简介
1. MQ描述 MQ全程为Message Queue,消息队列(MQ)是一种应用程序对应用程序通信的方法.应用程序通过读写出入队列的消息来通信,而无需专用连接来链接它们.消息传递指的是程序之间通过在消 ...
- HDOJ 4770 Lights Against Dudely
状压+暴力搜索 Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- 常用快捷键: From Eclipse to Android Studio
Eclipse: ctrl+shift+L查看所有快捷键 alt+shift+r 重命名 ctrl+shift+F 格式化代码 alt+shift+s 添加未实现方法 alt+/ 代码助手提示 ct ...
- window.onload =writeMessage(); 与window.onload =writeMessage;的区别
window.onload =writeMessage(); window.onload =writeMessage; 异:第一种是window加载时执行writeMesage方法,第二种是把writ ...
- Ajax中get请求和post请求
我们在使用Ajax向服务器发送数据时,可以采用Get方式请求服务器,也可以使用Post方式请求服务器,那么什么时候该采用Get方式,什么时候该采用Post方式呢? Get请求和Post请求的区别: 1 ...