javascript prototype,executing,context,closure


Posted in Javascript onDecember 24, 2008

要学好JavaScript,有几个基本概念必须搞清楚:prototype,executing,context,closure。
Prototype

在JavaScript语言中,通常使用Prototype来实现OO。在这里,我们不对JavaScript的OO实现进行过多的探讨,着重来看一下JS中对象的内存模型。在开始之前,需要先明确以下几点:
1. JS中,存在以下几种数据类型:string,number,boolean,object,function(注意:首字母均为小写)。
2 “Object”, “String”, “Date”等内置数据类型,在JS中实际上是函数名称(使用"alert(typeof Object)"可以验证,输出为"function")。我们通常指的类型为"Date"的数据类型,实际上是通过"new Date"所产生的对象。
3. 在JavaScript中,对象都是associative array (hash table),可以动态指定对象的property。
4. 在Firefox中可以使用"__proto__"属性来查看一个对象的"prototype"。

下面我们来看一个简单的例子:

function Person() { this.age = 10; this.name = "test";}Person.prototype = new Object;var p = new Person;alert(p); // output "[object Object]"alert(p.__proto__); // output "[object Object]"

可以看出Person数据类型具有一个“prototype”,如果更改这个prototype,会影响到所有已经产生的Person类型的对象,同时也会影响到以后建立的Person类型的对象。如果指定一个function的prototype属性,则所有使用该function生成的对象实例中(使用new操作符)都具有该prototype,在Firefox 中,可以使用"__proto__"属性访问。

通常情况下,我们讲JS中的对象都继承Object数据类型,这是如何体现的呢?我们把以上的程序稍微修改一下:

function Person() { this.age = 10; this.name = "test";}var p = new Person;alert(p); // output "[object Object]"alert(p.__proto__); // output "[object Object]"alert(p.__proto__.__proto__); // output "[object Object]"alert(p.__proto__.__proto__ == Object.prototype); // output "true"alert(p.__proto__.__proto__.__proto__); // output "null"

由以上程序可以看到,Person的"prototype"(在这里,没有明确指定Person.prototype, 而是使用缺省值)的"prototype" (p.__proto__.__proto__)正是Object.prototype, Object.prototype是prototype chain的终点(其自己的祖先为null)。

在JS中,Object是function,同时,所有function的实例,也都是Object。请看如下程序:

/* Object, Function都是function数据类型 */alert(typeof Object); // output "function"alert(typeof Function); // output "function"/* Function的prototype是一个空function */alert(Function.prototype); // output "function() {}"alert(Function.__proto__ == Function.prototype); // output "true"/* function是object, 其prototype chain的终点是Object.prototype */alert(Function.__proto__.__proto__ == Object.prototype); //output "true"/* Object是function的实例 */ alert(Object.__proto__ == Function.prototype); // output "true"alert(Object.__proto__.__proto__ == Object.prototype); // output "true"改变Function.prototype会影响到“Object”,改变Object.prototype会影响到所有function的实例。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
JavaScript 事件参考手册
Dec 24 #Javascript
javascript XML数据显示为HTML一例
Dec 23 #Javascript
window.location和document.location的区别分析
Dec 23 #Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 #Javascript
js 解决“options为空或不是对象”
Dec 22 #Javascript
javascript 动态参数判空操作
Dec 22 #Javascript
Javascript 布尔型分析
Dec 22 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
建立动态的WML站点(二)
2006/10/09 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
模具毕业生推荐信
2014/02/15 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
教师自我剖析材料
2014/09/29 职场文书
学校师德师风整改措施
2014/10/27 职场文书
军训通讯稿范文
2015/07/18 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
Python3.10的一些新特性原理分析
2021/09/15 Python
Web应用开发TypeScript使用详解
2022/05/25 Javascript