*内容

---关于创建javascript的对象,将说明如下问题:

1)new操作符做了些什么

2)属性prototype,constructor的含义

---关于instanceof的含义

*示例,演示原型机制

---源码(下载)

t_object.js

 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 }

--- 运行结果

Node运行结果

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特性

---源码(下载)

t_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");

---结果

Node运行结果

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创建对象过程相关推荐

  1. Javascript创建对象几种方法解析

    Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...

  2. JavaScript创建对象:深入理解编程原理

    在学习JavaScript的过程中,经常被它的对象系统(Object,Function,Prototype)搞的云里雾里的,感觉这些东西如果不搞清楚,后续的JavaScript学习也会不扎实,所以,下 ...

  3. javascript创建对象方法总结

    javascript创建对象方法的总结. 对象是什么? js中对象是"无序属性的集合,其属性可以包含基本值,对象或者函数",简单来说,它就是一个名值对,有key和value,val ...

  4. JavaScript创建对象的7大模式

    在JavaScript中,创建对象有7大模式,分别是工厂模式.构造函数模式.原型模式.组合使用构造函数模式和原型模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.下面针对这7种模式展开讲解. 工 ...

  5. JavaScript创建对象的6种方式

    JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...

  6. 万字干货!详解JavaScript执行过程

    作者 | FinGet       责编 | 欧阳姝黎 JS代码的执行,主要分为两个个阶段:编译阶段.执行阶段.本文所有内容基于V8引擎. 前言 v8引擎 v8引擎工作原理: V8由许多子模块构成,其 ...

  7. javascript打飞机程序8x8x飞机大战js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...

    js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量.运算符.判断.循环.数组.自定义函数.系统函数.事件等. 讲解了JavaScript编程语言制作游戏界面,添加游 ...

  8. JavaScript创建对象的4种方法

    JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是,对象是有特征和行为的,是具体特指的某一个事物.使用对象可以使程序更加整洁 通过Object()方法来创建 Object( ...

  9. JavaScript创建对象的两种方法和遍历对象的属性

    创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例 1.定义并创建对象的实例 var person=new Object(); person.firstnam ...

  10. JavaScript创建对象–如何在JS中定义对象

    Objects are the main unit of encapsulation in Object-Oriented Programming. In this article, I will d ...

最新文章

  1. Ubuntu 16.04安装NASM汇编IDE-SASM
  2. 网站建设需遵循用户访问习惯
  3. ARM Cortex Debug Port Access Port DP AP JTAG-DP SW-DP SWJ-DP JTAG-AP MEM-AP
  4. C陷阱与缺陷学习笔记
  5. 技术宝典 | ToB 业务场景下自动化测试的实践及探索
  6. 安装LAMP环境(PHP5.4)
  7. 一句 Task.Result 就死锁, 这代码还怎么写?
  8. linux设置组配置额步骤,linux 中磁盘配额设置
  9. 本地测试用的帐号csv文件
  10. PDFJS集成批注功能
  11. 如何下载jQuery
  12. html设计的概念,HTML标签, 元素与列表,前端UI设计-2019.08.30
  13. 【Linux】磁盘类型设备驱动介绍
  14. Talk | 清华大学陈晓宇苏黎世联邦理工黄嘉伟 :基于实际应用的强化学习
  15. iOS:quartz2D绘图(绘制渐变图形)
  16. [极客大挑战 2019]Http1(BUCTF在线评测)
  17. ASUS eeepc-1005HA安装archlinux后耳机无声解决方案
  18. 电邮地址_电子邮件如何运作?
  19. 学习OpenCV3——图像旋转算法实现
  20. 射频识别RFID:七个问题 让你看透RFID

热门文章

  1. 每天一道剑指offer-链表中环的入口节点
  2. 润乾报表分组求和_中国式复杂报表:按段分组报表制作对比(润乾 vs 帆软)...
  3. Linux环境下安装Hadoop(完全分布式)
  4. 爬虫之scrapy环境安装
  5. PHP 三联截骨,Steel骨盆三联截骨联合手术治疗大龄儿童发育性髋关节脱位疗效观察...
  6. 华为荣耀8x云相册不见了_京东手机最新销量排行:荣耀、小米卖的最好
  7. jquery 封装ajax方法,关于二次封装jquery ajax办法示例详解
  8. linux 显存占用内存,Linux服务器内存、CPU、显卡、硬盘使用情况查看
  9. java 发送 json数据_Java web中怎样取得Android通过post发送的json数据
  10. andriod 获取attrs_Android:具有attrs.xml中对象引用的Custom View,...