javascript --- 原型初探七日谈(三)
原型陷阱:
在处理原型问题上时,我们要注意两种行为。
1. 当我们对原型对象执行完全替换的时候,有可能会触发原型链的某种异常。
2. prototype.constructor 属性是不可靠的。
下面,我们新建一个构造函数,并创建两个对象:
var her = fucntion(){ this.name = 'Anna'; } var she1 = her(); var she2 = her();
即使在对象she1和she2对象被创建之后,我们仍然可以对her()的原型添加属性,并且之前创建的这些对象也可以访问这些属性。
her.prototype.say = function(){ return 'Hello' } she1.say(); // Hello she2.say(); // Hello
如果我们检查一下这些对象的构造函数,会发现一切正常:
she1.constructor === her; // true she2.constructor === her; // true
现在,我们用一个新对象覆盖掉该构造函数的原型对象:
her.prototype = { sex : 'women', height : '170cm' }
事实证明,原有对象不能访问这些新增属性了,但原有对象们与她们的构造函数还保持着一种神秘的联系:
she1.sex; // undefinedshe1.say(); // Hello
而我们之后创建的对象使用的或访问的都是更新过后的prototype对象。
var a = her(); a.say(); // a.say() is not defined; a.sex = 'women';
这时候,新对象的constructor就不会在指向her()了,而是指向Object().
a.constructor; // function Object(){}she1.constructor; // function her(){this.name = 'Anna'}
当然我们可以设置constructor属性的指向来解决上述异常:
function her(){}; her.prototype = {}; new her().constructor === her; // false her.prototype.constructor = her; new her().constructor === her; // true
当我们重写prototype对象的时候,一定要重置prototype的constructor属性。
就是辣么酸爽
javascript --- 原型初探七日谈(三)的更多相关文章
- javascript --- 原型初探七日谈(一)
在javascript中,像原型,闭包这样的概念,只要我们能领悟其中的原理,一切都会显得格外清晰与明了. 原型属性(prototype): 下面我们简单定义一个函数 function her(a, b ...
- javascript --- 原型初探七日谈(二)
扩展内建对象: 在javascript中,内建对象的构造函数都是可以通过其原型来进行扩展的.这意味着我们可以做一些事情,例如我们要往数组原型中添加一个新方法,就可以在其所有的数组中使用,下面我们来试试 ...
- javascript --- 继承初探七日谈 (一)
原型链是javascript实现继承的默认方式.下面来一个例子看一下她的魔法吧: 首先定义三个构造函数: function her(){ this.name = 'Anna'; this.toStri ...
- javascript 函数初探 (三)--- javascript 变量的作用域
javascript 变量的作用域: 这是一个至关重要的问题.特别是当我们从别的语言转向javascript时,必须要明白一点,即在javascript中,变量的定义并不是以代码块作为作用域的,而是以 ...
- javascript 对象初探 (三)--- 传递/比较对象
传递对象 当我们拷贝某个对象或者将对象传递给某个函数时,往往传递的都是该对象的引用.因此我们在该对象的引用上做任何改动,实际上都会影响到引用的原对象. var she = {num:1}; var h ...
- 浅谈系列之 javascript原型与对象
在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...
- JavaScript原型OOP——你上车了吗?
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
随机推荐
- Angularjs中link函数参数含义小节
restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...
- SQL*Loader之CASE5
CASE5 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase5.sql set termout off rem host write sys$output &quo ...
- Nutch源码阅读进程4---parseSegment
前面依次看了nutch的准备工作inject和generate部分,抓取的fetch部分的代码,趁热打铁,我们下面来一睹parse即页面解析部分的代码,这块代码主要是集中在ParseSegment类里 ...
- 30套免费的响应式 HTML5 & CSS3 模板下载
HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对 ...
- No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
以前用MyEclipse,现在用eclipse配置maven后,运行run install.报错: [ERROR] No compiler is provided in this environmen ...
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...
- HT for Web 3D游戏设计设计--汉诺塔(Towers of Hanoi)
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...
- C#多线程技术总结(异步)
我这里针对现有的C#多线程技术进行一个汇总,一是复习,二是方便索引,文章部份知识点来源于网络,非本人原创. 一.并行(异步): 1.System.Threading.Tasks命名空间下的(TPL): ...
- php对xml文件进行CURD操作
XML是一种数据存储.交换.表达的标准: - 存储:优势在于半结构化,可以自定义schema,相比关系型二维表,不用遵循第一范式(可以有嵌套关系): - 交换:可以通过schema实现异构数据集成: ...
- 现在就使用HTML5的十大原因
你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...