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的一些基本原理普遍存在这里或者 ...
随机推荐
- 自制jQuery焦点图切换简易插件
首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery ...
- Java Web项目的发布
自己写的项目,我们想部署到其他电脑上,供别人访问. 首先安装jdk,和Tomcat.这里我的Tomcat是免安装版的,根据http://www.cnblogs.com/Joanna-Yan/p/487 ...
- PhotoShop简介
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- Mac OSX Java 编译时乱码问题
由于是新系统,之前没有配置过导致今天javac编译的时候发现再iterm和Terminal中显示的是乱码,后来在网上找到解决方法,现在共享一下: 方法一: 在iterm2/Terminal中输入: c ...
- 材价看板(2)- 运行两周的kanban,改进的起点
改进从何谈起?必须找到起点,那起点从哪来? 看板不需要像Scrum那样改变以往工作角色,简单通过任务上墙,配合敏捷的设计就能通过显示化日常工作来让问题自己蹦出来.在任何一个新采用看板的研发团队,执行一 ...
- Android之Activity的生命周期
PS:写一发关于Activity的生命周期,也算是面试的重点内容. 学习内容: 1.Activity的生命周期 2.面对多种情况的时候Activity的生命周期 3.onSaveInstanceSta ...
- 【JDK源码分析】浅谈HashMap的原理
这篇文章给出了这样的一道面试题: 在 HashMap 中存放的一系列键值对,其中键为某个我们自定义的类型.放入 HashMap 后,我们在外部把某一个 key 的属性进行更改,然后我们再用这个 key ...
- 基于HTML5 WebGL实现3D飞机叶轮旋转
在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...
- linux软件管理之------编译安装nginx服务器并手动编写自动化运行脚本
红帽系列的 linux软件管理分为三类:1. rpm 安装软件.2. yum 安装软件.3. 源码包编译安装.前面两种会在相关专题给出详细讲解.源码包的编译安装是非常关键的,我们知道linux的相关版 ...