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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
JS闭包用法实例分析
2017/03/27 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python 自动去除空行的实例
2018/07/24 Python
Numpy之reshape()使用详解
2019/12/26 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
学校证明范文
2015/06/24 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL