javascript Object与Function使用


Posted in Javascript onJanuary 11, 2010

如今的JavaScript再也不是以前被当做玩具的在网页上运行的花哨的脚本了。JavaScript已经逐渐标准化,作为一门真正的编程语言广泛地应用在Web开发上。因此,越来越多的人开始重新认识这门脚本语言,并在不断地探索关于JavaScript核心思想和实现原理,过程中遇到了一些非常混淆的问题。本文着重解释一个比较常见但是非常容易使开发人员或者是初学JavaScript的人非常混淆的问题,那就是两个核心构造函数Object和Function,他们之间到底有什么关系?为何instanceof运算符的返回结果会让你感到混淆?本文将为你一一道来。不过在这之前,我们需要先了解一些JavaScript中的概念和基本的运行机制。

JavaScript的对象体系结构

其实在JavaScript语言中,整个核心的体系结构都围绕着两个构造函数Object和Function来构建的。我将引用来自mollypages.org的一张JavaScript对象体系结构图来说明。
javascript Object与Function使用
instanceof 运算符
instanceof是一个二元运算符,如:A instanceof B. 其中,A必须是一个合法的JavaScript对象,B必须是一个合法的JavaScript函数 (function). 判断过程如下:
如果函数B在对象A的原型链 (prototype chain) 中被发现,那么instanceof操作符将返回true,否则返回false.
例如下面的代码会返回true.

// return true if specified function is found// in the object's prototype chain as a constructor.alert({} instanceof Object);

JavaScript中的原型链(prototype chain)机制
这里简单概括一下,因为这个话题需要很大篇幅去讨论,本文只是引用了这个概念,重点并非详细讨论该机制。
JavaScript中的原型(prototype)是和函数(function)紧密相连的,因为每个函数默认都会有一个属性叫prototype, 每一个通过函数和new操作符生成的对象都具有一个属性__proto__, 这个属性保存了创建它的构造函数的prototype属性的引用。这个__proto__对象就是实现原型链的核心对象。JavaScript是一门面向对象的编程语言,它的继承特性其实就是通过原型链机制来实现的。同时,instanceof运算符也需要在原型链的支持。我们举例说明:

代码

// create a custom constructor Foo 
function Foo() { 
} 
// create an insatnce of Foo 
var foo = new Foo(); // foo is an instance of Foo 
alert(foo instanceof Foo);// true 
// foo is also an instance of Object because 
// Foo.prototype is an instance of Object. 
// the interpreter will find the constructor 
// through the prototype chain. 
alert(foo instanceof Object);// true 
// Prototype chain of the object foo 
// 
// __proto__ __proto__ __proto__ 
// foo -----------> Foo.prototype -----------> Object.prototype -----------> null 
// But foo is not an instance of Function, because 
// we could not find Function.prototype in foo's 
// prototype chain. 
alert(foo instanceof Function);// false 
// However, its constructor Foo is an instance of 
// Function. 
alert(Foo instanceof Function);// true 
// it's also an instance of Object 
alert(Foo instanceof Object);// true 
// Prototype chain of the constructor Foo 
// 
// __proto__ __proto__ __proto__ 
// Foo -----------> Function.prototype -----------> Object.prototype -----------> null

从上面的代码来分析,我们不难得出这样一个结论:任何对象的原型链最后都能追溯到Object.prototype. 这也就是我们为什么说JavaScript中所有的对象都继承自Object的原因了。

为何Object instanceof Function和Function instanceof Object都返回true?
Object, Function, Array等等这些都被称作是构造“函数”,他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象,所以:

alert(Object instanceof Function);// return true
与此同时,又因为Function.prototype是一个对象,所以他的构造函数是Object. 从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象,所以:

alert(Function instanceof Object);// return true
有趣的是根据我们通过原型链机制对instanceof进行的分析,我们不难得出一个结论:Function instanceof Function 依然返回true, 原理是一样的
1. Function是构造函数,所以它是函数对象
2. 函数对象都是由Function构造函数创建而来的,原型链机制解释为:函数对象的原型链中存在Function.prototype
3. instanceof查找原型链中的每一个节点,如果Function.prototype的构造函数Function的原型链中被查到,返回true
因此下面代码依然返回true

alert(Function instanceof Function);// still true

结论
1. 在JavaScript语言中,一切的一切都是对象,它们全部继承自Object. 或者说所有对象的原型链的根节点都是Object.prototype
2. 理解原型链机制在JavaScript中式如何工作的是非常重要的。掌握了它,不管一个对象多么复杂,你总能够轻而易举地将它攻破。

Javascript 相关文章推荐
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
js运动事件函数详解
Oct 21 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 #Javascript
JavaScript 事件冒泡简介及应用
Jan 11 #Javascript
Javascript 读书笔记索引贴
Jan 11 #Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 #Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 #Javascript
Javascript学习笔记7 原型链的原理
Jan 11 #Javascript
Javascript学习笔记6 prototype的提出
Jan 11 #Javascript
You might like
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python中的全局变量用法分析
2015/06/09 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python如何爬取个性签名
2018/06/19 Python
flask中的wtforms使用方法
2018/07/21 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
建筑结构施工专业推荐信
2014/02/21 职场文书
春节联欢会主持词
2014/03/24 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
辩护词格式
2015/05/22 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技