深入理解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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
js读取注册表的键值示例
Sep 25 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
js实现省市级联效果分享
Aug 10 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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下读取文本文件的代码
2008/07/02 PHP
php array_flip() 删除数组重复元素
2009/01/14 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
优化javascript的执行速度
2010/01/23 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python实现计算器功能
2019/10/31 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
制定岗位职责的原则
2013/11/08 职场文书
读书月活动方案
2014/05/22 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python