JavaScript constructor和instanceof,JSOO中的一对欢喜冤家


Posted in Javascript onMay 25, 2009

至少每个尝试JavaScriptOO的程序员都花费很多精力用在面向对象机制的模拟上而非业务本身.
这对Java,C++甚至Php的开发者来讲都是难以想象的.
更糟糕的是模拟OO对于JavaScript高级程序员都有着邪恶的吸引.
因为干这个事儿超然于业务之上,有种创造新编程语言一般的快感,可以令IQ尽情挥洒.
正如前些年大家都想把自个网站的common.js写成个框架一样.直到YUI,JQuery等等的强势推出才稍有平息.
然而虽然各个框架都有对JavaScriptOO模拟,但还未到有谁谁谁可以一桶糨糊的时候吧.
或许江湖就不需要的霸主出现,抑或大家只要等到JS2.0+就好了.
如果说可以new就是面向对象,那显然JavaScript在这方面是非常不错的.

function Person(name){ 
this.name = name; 
} 
var lenel = new person("lenel"); 
alert(lenel.constructor === Person); 
alert(lenel instanceof Person === true); 
alert(lenel instanceof Object === true);

到此为止,一切都很和谐.
对象的constructor正如字面上的意义指向构造它的Person.
对象是构造它的Person的一个实例(instance).
所有对象都是Object的实例,像极了Java.
JavaScript提供原型(prototype)的方式来实现方法拓展和继承
Person.prototype.getName = function(){ 
return this.name 
};

这样定义了之后所有对象都具有了getName的方法.
当然也可以将写在对象构造时
function Person(name){ 
this.name = name; 
this.getName = function(){ 
return this.name; 
}; 
}

但是这种做法不仅是带来额外性能损耗这点瑕疵,也不仅是带来了可以访问私有变量的特权.
它与使用prototype的写法还会其他有不同之处,不过这不是本文的重点.
接下来,我们想到继承,很常见的写法是这样的.
function Stuff(name,id){ 
this.name = name; 
this.id = id; 
} 
Stuff.prototype = new Person(); 
var piupiu = new Stuff("piupiu","007"); 
alert(piupiu.getName());

非常好,继承了getName方法;
考察下instanceof
alert(piupiu instanceof Stuff === true); 
alert(piupiu instanceof Person === true);

非常好,说明了Stuff和Person是有关系的.piupiu是它俩的实例,非常Java.
接下来再考察下constructor
alert(piupiu.constructor === Stuff);//false 
test(piupiu.constructor === Person);//true

问题出现了明明new的Stuff为啥constructor却是Person,
在这儿将道理也是强词夺理,我们只好记住结论
结论:对象的constructor属性并非指向其构造器,而是指向其构造器的prototype属性的constructor属性
文字功底太差,自己读过都觉得没说清楚
放在这里:
对象piupiu的constructor属性指向的是其构造器Stuff的prototype属性的constructor属性
因为Stuff.prototype = new Person();
所以Stuff.prototype.constructor === Person.
所以piupiu.consturctor === Person.
以上的结论不仅仅在对象继承的时候才出现,在定义对象时
function Student(name){ 
this.name = name; 
} 
Student.prototype = { 
getName:function(){ 
return this.name; 
}, 
setName:function(name){ 
this.name = name; 
} 
}

如果方法比较多,常常会这样写,看起来规矩一些.
其实这种写法同样牺牲了constructor
var moen = new Student("moen"); 
alert(moen.constructor === Student);//false 
alert(moen.constructor === Object);//true

因为在{}相当于new Object(),所以根据上面的结论prototype={}时,constructor变了.
保卫constructor!继承时我们用一个循环来把父类的方法copyto子类
function Stuff1(name,id){ 
this.name = name; 
this.id = id; 
} 
for(var fn in Person.prototype){ 
Stuff1.prototype[fn] = Person.prototype[fn]; 
} 
var piupiu1 = new Stuff1("piupiu1","008"); 
alert(piupiu1.getName() === "piupiu1"); 
alert(piupiu1.constructor === Stuff1);

It works!当我们兴冲冲的把父类的方法都继承下来的时候,我们却丢失了父子关系.
alert(piupiu1 instanceof Stuff1 === true);//true 
alert(piupiu1 instanceof Person === true);//false

显然,我们没有说过Stuff1是继承至Person啊,只一个for循环能说明什么呢.
这好像是一对矛盾..顾此必失彼.
所以叻,深入使用对象的时候,甚至你一不小心,都会让instantceof和constructor丢去字面的含义.
所以叻,在使用框架的时候,如果提供了继承功能,如果不试不会知道你为了继承放弃了哪个.
所以叻,模拟OO时就必须要提供替代这两个字面含义的属性或方法的实现,而且必须让使用者知道!
模拟OO绝对不只这个问题,在子类方法中调用父类的同名方法,这个OO语言常见的特性,
JavaScript实现起来也非常困难,大师们基本都有各自的一套,只不过有些用心去做了用起来相比之下更自然些,如Base库.
当然可以摒弃instanceof和constructor的使用,就当不知道有这么一回儿事儿,活儿仍可继续,死不了人的.
但如果你不是单枪匹马作战,那就通知你的Partner也摒弃这对冤家吧.
类似今天这点事儿,老鸟们都清楚的很,但如果不是团队中每个人都有统一的认识,那就是隐患.
一个好玩儿的现象<<JavaScript高级程序设计>>强调instanceof,而<<精通JavaScript>>强调constructor.而各自对另一个一笔带过或只字不提.怨念..甚深...
Javascript 相关文章推荐
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
详解javascript事件冒泡
Jan 09 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
js实现div在页面拖动效果
May 04 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
jQuery 图像裁剪插件Jcrop的简单使用
May 22 #Javascript
document.compatMode介绍
May 21 #Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 #Javascript
简单的js分页脚本
May 21 #Javascript
input+select(multiple) 实现下拉框输入值
May 21 #Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 #Javascript
Javascript 兼容firefox的一些问题
May 21 #Javascript
You might like
PHP 图片上传代码
2011/09/13 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
说一说Python logging
2016/04/15 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
数字漫画:comiXology
2020/06/13 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
前台文员岗位职责
2013/12/28 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python