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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
关于JavaScript的一些看法
May 27 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
vue常用高阶函数及综合实例
Feb 25 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 冒泡排序算法的实现代码
2010/08/08 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
React优化子组件render的使用
2019/05/12 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
机电一体化自荐信
2013/12/10 职场文书
师范生自我鉴定
2014/03/20 职场文书
爱护公共设施的标语
2014/06/24 职场文书
护理见习报告范文
2014/11/03 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server