深入理解JavaScript编程中的原型概念


Posted in Javascript onJune 25, 2015

 JavaScript 的原型对象总是让人纠结。即使是经验丰富的JavaScript专家甚至其作者,经常对这一概念给出很有限的解释。我相信问题来自于我们对原型最早的认识。原型总是与new, constructor 以及令人困惑的prototype属性紧密联系。事实上,原型是一个相当简单的概念。为了更好地理解它,我们需要忘记我们所‘学到'的构造原型,然后,追本溯源。

什么是原型?

原型是一个从其他对象继承属性的对象。

是不是任何对象都可以是原型?

是的

那些对象有原型?

每个对象都有一个默认的原型。原型本身就是对象,每一个原型本身也存在一个原型。(只有一个例外,默认的对象原型在每条原型链的顶端,其他的原型在原型链的后面)

退一步说,什么又是对象呢?

在JavaScript中一个对象是以键值对保存的任意的无序集合,如果它不是原始类(undefined,null,boolean.nuber或string),它就是一个对象。

你可以认为每个对象都有一个prototype. 但当我写({}).prototype的时候,我却得到了undefined,你疯不疯?

忘记你所掌握的关于prototype属性的理解 - 这很可能是迷惑的根源. 一个对象真正的prototype是内部[[Prototype]]属性. ECMA 5介绍了标准的访问方法,Object.getPrototypeOf(object)。这个最新的实现已被Firefox, Safari, Chrome and IE9所支持. 另外,除了IE,所有的浏览器都支持非标准的访问方法__proto__.不然的话,我们只能说对象的构造方法就是它的prototype属性.
 

var a = {};
 
//Opera 或 IE<=8下失败
Object.getPrototypeOf(a); //[object Object]
 
//IE下失败
a.__proto__; //[object Object]
 
//所有浏览器
//(but only if constructor.prototype has not been replaced and fails with Object.create)
a.constructor.prototype; //[object Object]

很好, false 是原始类型, 为什么false.__proto__ 会返回一个值呢?

当访问原始类型的原型(prototype),它会强制转化为一个对象。
 

//(works in IE<=8 too, due to double-negative)
false.__proto__ === Boolean(false).__proto__; //true

我想使用原型实现继承,我现在该怎么做?

给一个实例添加原型属性,几乎是没有意义的.除非一种情况,那就是,很有效率的添加属性直接到实例本身.假设我们已经有了一个对象,要共享已经存在的对象的功能.例如Array,我们可以这样做
 

//fails in IE<=8
var a = {};
a.__proto_ = Array.prototype;
a.length; //0

但是我们可以看到原型的真正强大在于多个实例共享同一原型。原型对象的属性只被定义一次就可以被它引用的所有实例所继承。使用原型对性能和程序可维护性的提高效果是很显而易见的。那么这就是构造函数产生的原因吗?是的,构造函数提供了一个便捷的跨浏览器机制来实现对实例创建时的公用原型分配。。

在给出一个例子之前,我需要知道constructor.prototype property是干什么的?

好吧,首先,JavaScript不区分构造函数和其它方法,所以每个方法都有prototype属性。反而任何不是方法的,都没有这样的属性。
 

//永远不是构造函数的方法,无论如何都是有prototype属性的
Math.max.prototype; //[object Object]
 
//构造函数也有prototype属性
var A = function(name) {
  this.name = name;
}
A.prototype; //[object Object]
 
//Math不是一个方法,所以没有prototype属性
Math.prototype; //null

现在可以定义: 一个方法的prototype属性是当这个方法被用作构造函数来创建实例时赋给该实例的prototype的对象。

非常重要的一点是,要理解方法的prototype属性和实际的prototype没有任何关系。
 

//(在IE中会失败)
var A = function(name) {
  this.name = name;
}
 
A.prototype == A.__proto__; //false
A.__proto__ == Function.prototype; //true - A的prototype是它的构造函数的prototype属性

能给个例子不?

以下的代码,可能你已经看到或用过上百次了,但这里又把它搬上来了,但可能会有些新意。
 

//构造器. <em>this</em> 作为新对象返回并且它内部的[[prototype]]属性将被设置为构造器默认的prototype属性
var Circle = function(radius) {
  this.radius = radius;
  //next line is implicit, added for illustration only
  //this.__proto__ = Circle.prototype;
}
 
//扩充 Circle默认的prototype对象的属性因此扩充了每个由它新建实例的prototype对象的属性
Circle.prototype.area = function() {
  return Math.PI*this.radius*this.radius;
}
 
//创建Circle的两个示例,每个都会使用相同的prototype属性
var a = new Circle(3), b = new Circle(4);
a.area().toFixed(2); //28.27
b.area().toFixed(2); //50.27

这很棒。如果我改变了constructor的prototype属性,即使是已存在的实例对象也可以立刻访问新的prototype版本吗?

嗯......不完全是。如果我修改的是现存prototype的属性后,那么确实是这种情况,因为对象创建时a.__proto__引用了A.prototype所定义的对象。
 

var A = function(name) {
  this.name = name;
}
 
var a = new A('alpha');
a.name; //'alpha'
 
A.prototype.x = 23;
 
a.x; //23

但是如果我将prototype属性用一个新对象代替,a.__proto__ 仍然指向原始对象。
 

var A = function(name) {
  this.name = name;
}
 
var a = new A('alpha');
a.name; //'alpha'
 
A.prototype = {x:23};
 
a.x; //null

一个缺省的prototype是什么样的?

一个拥有constructor属性的对象。
 

var A = function() {};
A.prototype.constructor == A; //true
 
var a = new A();
a.constructor == A; //true (a 的constructor属性继承自它的原型)

instanceof与prototype有啥关系?
如果A的prototype属性出现在a的原型链中,则表达式a instanceof A会返回true。这意味着我们可以欺骗instanceof,让它失效。
 

var A = function() {}
 
var a = new A();
a.__proto__ == A.prototype; //true - so instanceof A will return true
a instanceof A; //true;
 
//mess around with a's prototype
a.__proto__ = Function.prototype;
 
//a's prototype no longer in same prototype chain as A's prototype property
a instanceof A; //false

那么我还能利用原型干些其它的什么事儿?

记得我曾经说过每一个构造器都拥有一个prototype属性,利用该属性可以将原型赋值给所有由构造器产生的实例?其实这同样适用于本地构造器,例如Function和String。通过扩展(而不是替换)这个属性,我们可以更新每个指定类型对象的prototype。 

String.prototype.times = function(count) {
  return count < 1 ? '' : new Array(count + 1).join(this);
}
 
"hello!".times(3); //"hello!hello!hello!";
"please...".times(6); //"please...please...please...please...please...please..."

告诉我更多关于继承与原型是怎么工作的。原型链又是什么东东?

因为每个对象和每个原型(本身)都有一个原型,我们可以想象, 一个接一个的对象连接在一起形成一个原型链。 原型链的终端总是默认对象(object)的原型。
 

a.__proto__ = b;
b.__proto__ = c;
c.__proto__ = {}; //默认对象
{}.__proto__.__proto__; //null

原型继承机制是内在且隐式实现的。当对象a要访问属性foo时,Javascript会遍历a的原型链(首先从a自身开始),检查原型链的每一个环节中存在的foo属性。如果找到了foo属性就会将其返回,否则返回undefined值。

直接赋值会咋样?

当直接为对象属性赋值时,原型继承机制就玩不转了。a.foo='bar'会直接赋值给a的foo属性。要想为原型对象的属性赋值,你需要直接定位原型对象的该属性。
关于javascript原型就讲全了。我觉得对于原型概念的理解,我把握的还是比较准确的,但是我的观点无论如何也不是最后的结果。请随便告之我的错误之处或提出和我不一致的观点。

Javascript 相关文章推荐
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 #Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 #Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 #Javascript
深入分析JSON编码格式提交表单数据
Jun 25 #Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 #Javascript
jquery使整个div区域可以点击的方法
Jun 24 #Javascript
jQuery寻找n以内完全数的方法
Jun 24 #Javascript
You might like
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python实现Event回调机制的方法
2019/02/13 Python
python实现动态创建类的方法分析
2019/06/25 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python统计字符的个数代码实例
2020/02/07 Python
python实现控制台输出彩色字体
2020/04/05 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
生日邀请函范文
2014/01/13 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
销售活动策划方案
2014/08/26 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android