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 相关文章推荐
jQuery使用post方法提交数据实例
Mar 25 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
layui原生表单验证的实例
Sep 09 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
adodb与adodb_lite之比较
2006/12/31 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jQuery功能函数详解
2015/02/01 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
javascript表达式和运算符详解
2017/02/07 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python any()函数的使用方法
2019/10/28 Python
基于Django实现日志记录报错信息
2019/12/17 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
平面设计自荐信
2013/10/07 职场文书
校长先进事迹材料
2014/02/01 职场文书
搞笑创意广告语
2014/03/17 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers