javascript创建对象过程
*内容
---关于创建javascript的对象,将说明如下问题:
1)new操作符做了些什么
2)属性prototype,constructor的含义
---关于instanceof的含义
*示例,演示原型机制
---源码(下载)
1 function testObject(object){ 2 if(!typeof object == "object") 3 return; 4 5 console.log("object.constructor: " + object.constructor.toString()); 6 7 if(object.prototype){ //false, 对象没有prototype属性 8 console.log("object.prototype.constructor: " + object.prototype 9 .toString()); 10 } 11 12 if(object.__proto__){ //通过内部不可见指针__proto__找到原型对象; 这里运行环境Node,这个属性可见 13 console.log("object.__proto__.constructor: " + object.__proto__.constructor.toString()); 14 console.log("__proto__ is not Null"); 15 console.log("object.__proto__: " + object.__proto__.toString()); //BasicObject实例的原型是一个Object,而不是null 16 } 17 18 console.log("object.constructor.prototype: " + object.constructor.prototype.name); 19 20 if(object.name){ 21 console.log("object.name: " + object.name); 22 } 23 24 if(object instanceof object.constructor) 25 console.log("instanceof True"); 26 else 27 console.log("instanceof False"); 28 } 29 30 //test 1 31 console.log("Test 1: "); 32 function BasicObject(){ 33 console.log("new BasicObject()"); 34 this.name = "BasicObject"; 35 } 36 37 var obj = new BasicObject(); 38 testObject(obj); 39 if(obj.isPrototypeOf(obj)){ 40 console.log("prototype is itself"); 41 } 42 console.log("BasicObject.prototype: "+BasicObject.protoype); //undefined 43 44 //test 2 45 console.log("Test 2: "); 46 function ProtoObject(){ 47 console.log("new ProtoObject()"); 48 // this.name = "ProtoObject"; 49 } 50 ProtoObject.prototype = new BasicObject(); 51 //console.log("prototype: "+ProtoObject.prototype.toString()); 52 53 testObject(new ProtoObject()); 54 55 //test 3 56 console.log("Test 3: "); 57 function ConstructorObject(){ 58 console.log("new ConstructorObject()"); 59 this.constructor = ConstructorObject; 60 } 61 ConstructorObject.prototype = new BasicObject(); 62 63 testObject(new ConstructorObject()); 64 65 //test null 66 console.log("Test null: "); 67 if(null === null){ // is true 68 console.log("null === null"); 69 } 70 if(!null){ 71 console.log("null is false"); 72 }
--- 运行结果
Test 1: new BasicObject() object.constructor: function BasicObject(){console.log("new BasicObject()");this.name = "BasicObject"; } object.__proto__.constructor: function BasicObject(){console.log("new BasicObject()");this.name = "BasicObject"; } __proto__ is not Null object.__proto__: [object Object] object.constructor.prototype: undefined object.name: BasicObject instanceof True BasicObject.prototype: undefined Test 2: new BasicObject() new ProtoObject() object.constructor: function BasicObject(){console.log("new BasicObject()");this.name = "BasicObject"; } object.__proto__.constructor: function BasicObject(){console.log("new BasicObject()");this.name = "BasicObject"; } __proto__ is not Null object.__proto__: [object Object] object.constructor.prototype: undefined object.name: BasicObject instanceof True Test 3: new BasicObject() new ConstructorObject() object.constructor: function ConstructorObject(){console.log("new ConstructorObject()");this.constructor = ConstructorObject; } object.__proto__.constructor: function BasicObject(){console.log("new BasicObject()");this.name = "BasicObject"; } __proto__ is not Null object.__proto__: [object Object] object.constructor.prototype: BasicObject object.name: BasicObject instanceof True Test null: null === null null is false
*回答初始问题
---new做了些什么
1)创建对象:创建新对象->构造函数作用域赋给新对象->执行构造器代码->返回新对象;
2)设置原型:创建的新对象有一个不可见的属性(一般是__proto__,但是我在Node中测试这个属性可见),其指向构造器函数的prototype属性指向的原型对象值;
3)设置constructor:创建的新对象有一个constructor属性,指向构造函数.prototype.constructor指向的构造函数;
4)对于没有自定义prototype属性的构造数,新对象默认设置的原型为new Object()(这是从测试程序在Node上运行的结果和下面的摘要分析出的结论)
"All objects have an internal property called [[Prototype]]. The value of this property is either null or an object
and is used for implementing inheritance." ---Ecma-262
此时,可以说new相当于这样:新对象.__proto__ = new Object();新对象.constructor = 新对象的构造器.
(这是一个推论,还没找到在语言定义上的明确说明,后面有时间仔细看看Ecma).
---属性prototype
构造函数的属性,保存了所有这个构造函数生成的对象的原型对象
---属性constructor
1)对象属性,说明了这个对象是由哪个构造函数生成的;
2)赋值规则:若构造函数有原型,则其值为原型的constructor(此时,通常需要自己在构造器中手动指定); 若构造函数没有定义原型, 则默认当前这个构造函数;
3)constructor的主要用处,在于通过'对象.constructor'可获取原型对象.
*示例,演示instanceof特性
---源码(下载)
1 function ObjA(){} 2 3 function ObjB(){ 4 this.constructor = ObjB; 5 } 6 ObjB.prototype = new ObjA(); 7 8 var objA = new ObjA(); 9 var objB = new ObjB(); 10 11 if(objA instanceof Object) 12 console.log("objA instanceof Object is true"); 13 if(objA instanceof ObjA) 14 console.log("objA instanceof ObjA is true"); 15 16 if(objB instanceof Object) 17 console.log("objB instanceof Object is true"); 18 if(objB instanceof ObjB) 19 console.log("objB instanceof ObjB is true"); 20 if(objB instanceof ObjA) 21 console.log("objB instanceof ObjA is true");
---结果
objA instanceof Object is true objA instanceof ObjA is true objB instanceof Object is true objB instanceof ObjB is true objB instanceof ObjA is true
*总结instanceof
---格式: 对象 instanceof 构造函数
当构造函数是对象的constructor, 或者是原型对象的constructor时,返回true,否则返回false
*总结
---js对象, 简单说就是一个无序的key/value集合;
---原型机制,是js为提供复用性而采取的一种"继承"策略, 多个对象共享一个原型, 通过牺牲时间换取了更多的内存空间, 语言的特性和发展和其历史环境有关系;
---简单又灵活, 也易对编程产生更多不安全因素; 可以学习一些设计模型, 以便开发可控的,安全的对象. 简单是一种美.
*参考
http://www.mollypages.org/misc/js.mp
http://bclary.com/2004/11/07/#a-15.3.5.2
转载于:https://www.cnblogs.com/bronte/articles/2511709.html
javascript创建对象过程相关推荐
- Javascript创建对象几种方法解析
Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...
- JavaScript创建对象:深入理解编程原理
在学习JavaScript的过程中,经常被它的对象系统(Object,Function,Prototype)搞的云里雾里的,感觉这些东西如果不搞清楚,后续的JavaScript学习也会不扎实,所以,下 ...
- javascript创建对象方法总结
javascript创建对象方法的总结. 对象是什么? js中对象是"无序属性的集合,其属性可以包含基本值,对象或者函数",简单来说,它就是一个名值对,有key和value,val ...
- JavaScript创建对象的7大模式
在JavaScript中,创建对象有7大模式,分别是工厂模式.构造函数模式.原型模式.组合使用构造函数模式和原型模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.下面针对这7种模式展开讲解. 工 ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
- 万字干货!详解JavaScript执行过程
作者 | FinGet 责编 | 欧阳姝黎 JS代码的执行,主要分为两个个阶段:编译阶段.执行阶段.本文所有内容基于V8引擎. 前言 v8引擎 v8引擎工作原理: V8由许多子模块构成,其 ...
- javascript打飞机程序8x8x飞机大战js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量.运算符.判断.循环.数组.自定义函数.系统函数.事件等. 讲解了JavaScript编程语言制作游戏界面,添加游 ...
- JavaScript创建对象的4种方法
JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是,对象是有特征和行为的,是具体特指的某一个事物.使用对象可以使程序更加整洁 通过Object()方法来创建 Object( ...
- JavaScript创建对象的两种方法和遍历对象的属性
创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例 1.定义并创建对象的实例 var person=new Object(); person.firstnam ...
- JavaScript创建对象–如何在JS中定义对象
Objects are the main unit of encapsulation in Object-Oriented Programming. In this article, I will d ...
最新文章
- Ubuntu 16.04安装NASM汇编IDE-SASM
- 网站建设需遵循用户访问习惯
- ARM Cortex Debug Port Access Port DP AP JTAG-DP SW-DP SWJ-DP JTAG-AP MEM-AP
- C陷阱与缺陷学习笔记
- 技术宝典 | ToB 业务场景下自动化测试的实践及探索
- 安装LAMP环境(PHP5.4)
- 一句 Task.Result 就死锁, 这代码还怎么写?
- linux设置组配置额步骤,linux 中磁盘配额设置
- 本地测试用的帐号csv文件
- PDFJS集成批注功能
- 如何下载jQuery
- html设计的概念,HTML标签, 元素与列表,前端UI设计-2019.08.30
- 【Linux】磁盘类型设备驱动介绍
- Talk | 清华大学陈晓宇苏黎世联邦理工黄嘉伟 :基于实际应用的强化学习
- iOS:quartz2D绘图(绘制渐变图形)
- [极客大挑战 2019]Http1(BUCTF在线评测)
- ASUS eeepc-1005HA安装archlinux后耳机无声解决方案
- 电邮地址_电子邮件如何运作?
- 学习OpenCV3——图像旋转算法实现
- 射频识别RFID:七个问题 让你看透RFID
热门文章
- 每天一道剑指offer-链表中环的入口节点
- 润乾报表分组求和_中国式复杂报表:按段分组报表制作对比(润乾 vs 帆软)...
- Linux环境下安装Hadoop(完全分布式)
- 爬虫之scrapy环境安装
- PHP 三联截骨,Steel骨盆三联截骨联合手术治疗大龄儿童发育性髋关节脱位疗效观察...
- 华为荣耀8x云相册不见了_京东手机最新销量排行:荣耀、小米卖的最好
- jquery 封装ajax方法,关于二次封装jquery ajax办法示例详解
- linux 显存占用内存,Linux服务器内存、CPU、显卡、硬盘使用情况查看
- java 发送 json数据_Java web中怎样取得Android通过post发送的json数据
- andriod 获取attrs_Android:具有attrs.xml中对象引用的Custom View,...