理解Javascript_06_理解对象的创建过程


Posted in Javascript onOctober 15, 2010

简单的代码
我们先来看一段简单的代码:

function HumanCloning(){ 
} 
HumanCloning.prototype ={ 
name:'笨蛋的座右铭' 
} 
var clone01 = new HumanCloning(); 
alert(clone01.name);//'笨蛋的座右铭' 
alert(clone01 instanceof HumanCloning);//true 
HumanCloning.prototype = {}; 
alert(clone01.name);//'笨蛋的座右铭' 
alert(clone01 instanceof HumanCloning);//false 
var clone02 = new HumanCloning(); 
alert(clone02.name);//undefined 
alert(clone02 instanceof HumanCloning);//true

复杂的理论
JS中只有函数对象(函数)具备类的概念,因此创建一个对象,必须使用函数对象。函数对象内部有[[Construct]]方法和[[Call]]方法,[[Construct]]用于构造对象,[[Call]]用于函数调用,只有使用new操作符时才触发[[Construct]]逻辑。注:在本例中HumanCloning这个自定义函数是一个函数对象,那么请问Object,String,Number等本地对象是函数对象吗?答案是肯定的,这是因为本地对象都可以看作是函数的派生类型,在这个意义上,可以将它们跟用户定义的函数等同看待。(与《理解Javascript_04_数据模型》中"内置数据类型"一节相呼应)
var obj=new Object(); 是使用内置的Object这个函数对象创建实例化对象obj。var obj={};和var obj=[];这种代码将由JS引擎触发Object和Array的构造过程。function fn(){}; var myObj=new fn();是使用用户定义的类型创建实例化对象。
注:关于函数对象的具体概念会在后续的文章中讲解,现在可以将"函数对象"简单的理解为"函数"的概念及可.

内部的实现
结合本例,函数对象为HumanCloning,函数对象创建的对象实例为clone01和clone02. 现在我们来看一下var clone01 = new HumanCloning();的实现细节(注:函数对象的[[Construct]]方法处理逻辑来负责实现对象的创建):
1. 创建一个build-in object对象obj并初始化
2. 如果HumanCloning.prototype是Object类型,则将clone01的内部[[Prototype]]设置为HumanCloning.prototype,否则clone01的[[Prototype]]将为其初始化值(即Object.prototype)
3. 将clone01作为this,使用args参数调用HumanCloning的内部[[Call]]方法
3.1 内部[[Call]]方法创建当前执行上下文(注:关于执行上下文,将在后续博文中讲解,在《Javascript提速_01_引用变量优化》一文中已有部分讲解》)
3.2 调用HumanCloning的函数体
3.3 销毁当前的执行上下文
3.4 返回HumanCloning函数体的返回值,如果HumanCloning的函数体没有返回值则返回undefined
4. 如果[[Call]]的返回值是Object类型,则返回这个值,否则返回obj
注意,如下代码为步骤1,步骤2和步骤3的代码解释:

var clone01 = {}; 
//程序外部是无法访问[[prototype]]的,仅用于理解 
//clone01.[[prototype]] = HumanCloning.prototype; 
HumanCloning.call(clone01);

注意步骤2中, prototype指对象显示的prototype属性,而[[Prototype]]则代表对象内部Prototype属性(隐式的)。构成对象Prototype链的是内部隐式的[[Prototype]],而并非对象显示的prototype属性。显示的prototype只有在函数对象上才有意义,从上面的创建过程可以看到,函数的prototype被赋给派生对象隐式[[Prototype]]属性,这样根据Prototype规则,派生对象和函数的prototype对象之间才存在属性、方法的继承/共享关系。(即原型继承实现原理,正是《理解Javascript_05_原型继承原理》的内容)
注意步骤3.4中描述,让我们来看一个来自于怿飞的问题:
理解Javascript_06_理解对象的创建过程

我想,现在回答这个问题,应该是易如反掌吧。

注:原文地址http://www.planabc.net/2008/02/20/javascript_new_function/

内存分析
理解Javascript_06_理解对象的创建过程
一张简易的内存图,并引入的函数对象的概念,同样也解释了上面代码(相对来说图不是很严谨,但易于理解)。在此也引出了一个问题,instanceof的实现原理,想必大家也看出了一些苗头,instanceof的判断依赖于原型链,具体实现细节,请参见后续博文。
本地属性与继承属性
对象通过隐式Prototype链能够实现属性和方法的继承,但prototype也是一个普通对象,就是说它是一个普通的实例化的对象,而不是纯粹抽象的数据结构描述。所以就有了这个本地属性与继承属性的问题。
首先看一下设置对象属性时的处理过程。JS定义了一组attribute,用来描述对象的属性property,以表明属性property是否可以在JavaScript代码中设值、被for in枚举等。
obj.propName=value的赋值语句处理步骤如下:
1. 如果propName的attribute设置为不能设值,则返回
2. 如果obj.propName不存在,则为obj创建一个属性,名称为propName
3. 将obj.propName的值设为value
可以看到,设值过程并不会考虑Prototype链,道理很明显,obj的内部[[Prototype]]是一个实例化的对象,它不仅仅向obj共享属性,还可能向其它对象共享属性,修改它可能影响其它对象。
我们来看一个示例:

function HumanCloning(){ 
} 
HumanCloning.prototype ={ 
name:'笨蛋的座右铭' 
} 
var clone01 = new HumanCloning(); 
clone01.name = 'jxl'; 
alert(clone01.name);//jxl 
var clone02 = new HumanCloning(); 
alert(clone02.name);//笨蛋的座右铭

结果很明确,对象的属性无法修改其原型中的同名属性,而只会自身创建一个同名属性并为其赋值。
参考。
https://3water.com/article/25008.htm
Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
layUI实现列表查询功能
Jul 27 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 #Javascript
JavaScript访问样式表代码
Oct 15 #Javascript
IE下js调试工具Companion.JS
Oct 15 #Javascript
jquery $.ajax各个事件执行顺序
Oct 15 #Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 #Javascript
jquery 元素相对定位代码
Oct 15 #Javascript
JQuery小知识
Oct 15 #Javascript
You might like
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php中static和const关键字用法分析
2016/12/07 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python下载的库包存放路径
2020/07/27 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
简短大学毕业感言
2014/01/18 职场文书
中秋手机店促销方案
2014/06/16 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
技术员岗位职责
2015/02/04 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
MySQL连接控制插件介绍
2021/09/25 MySQL
mysql创建存储过程及函数详解
2021/12/04 MySQL
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL