深入理解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 相关文章推荐
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
3种js实现string的substring方法
Nov 09 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
浅谈Redux中间件的实践
Jul 27 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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脚本
2006/11/26 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php cli换行示例
2014/04/22 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP使用函数用法详解
2018/09/30 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
详解Python Socket网络编程
2016/01/05 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python实现批量监控网站
2016/09/09 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
英文求职信结束语大全
2013/10/26 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
学雷锋活动简报
2015/07/20 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android