《JavaScript高级程序设计 第三版》学习笔记 （四） 对象创建详解

最新推荐文章于 2021-05-11 21:20:42 发布
最新推荐文章于 2021-05-11 21:20:42 发布
阅读量196 收藏
点赞数

一、对象

1.ECMAScript把对象定义为“一组没有特定顺序的值，这些值可以是基本值、对象或函数。”我们可以把js的对象想象成散列表，每个值对应这一个key。每个对象都是基于引用类型创建的，可以是前面提到的原声引用类型，也可以是自定义引用类型。
2.一个对象（实例），是它内部所有函数值（方法）的执行环境。
3.对象的属性，包括两种，数据属性和访问器属性。
 (1）数据属性，包括一个数据值的位置。在这个位置可以读取和写入值。数据属性有四个特征： 
　　<1>configurable，默认为true，表示能否通过delete删除属性、能否修改属性的特征、能否把该属性改为访问器属性。一旦设置成false，就不能再设置成true了。
　　<2>enumerable，默认为true，表示能否通过for-in循环返回属性。
　　<3>writable，默认为true，表示能否修改属性值。
　　<4>value，默认为undefined，包含这个属性的数据值。
　　<5>想修改属性的特征，必须使用Object.defineProperty(object,propertyName,{writable:false});这种语句才能完成。在使用时，如果不指定configurable、enumerable、writable，这三个值默认都会被设成false，所以千万小心。
（2）访问器属性，不包含数据值，而是包含了一对getter和setter函数，但这俩函数不是必须的。访问期属性有四个特征：
　　<1>configurable，默认为true，跟数据属性一样。
　　<2>enumerable，默认为true，跟数据属性一样。
　　<3>get，在读取属性时调用的函数。
　　<4>set，在写入属性时调用的函数。
　　<5>访问器属性不能自定义，必须用Object.defineProperty设置。不用同时指定getter和setter。不指定getter不能度，不指定setter不能写。
[javascript] view plain copy
  1. //小实验  
  2. var book={_year:2014,edition:1};  
  3. Object.defineProperty(book,"year",{  
  4.     get:function(){return this._year;},  
  5.     set:function(value){  
  6.         if(value>2014){  
  7.             this._year=value;  
  8.             this.edition+=1;  
  9.         }  
  10.     }  
  11. });  
  12. book.year=2015;  
  13. alert(book.year);//2015  
  14. alert(book.edition);//2  
（3）使用Object.defineProperty可以同时定义多个属性，这是只能传入两个参数，第一个是对象实例，第二个是表示属性的json。
（4）使用Object.getOwnPropertyDescriptor(object,propertyName)，可以返回对象实例某个属性的配置。

二、创建对象

1.工厂模式

（1）工厂模式的优点是简单方便易用好理解，缺点是无法对对象进行识别，即不能判断对象实例的类型。
[javascript] view plain copy
  1. //小实验  
  2. function createCar(name, value){  
  3.     var o = new Object();  
  4.     o.name=name;  
  5.     o._value=value;  
  6.     o.getValue=function(){return this._value;}  
  7.     o.setValue=function(v){this._value=v;}  
  8.     return o;  
  9. }  
  10. var mycar=createCar("BMW",10000);  

2.构造函数模式

（1）与工厂模式的不同在于：构造函数模式没有显示创建对象；直接将属性和方法加在了this上面；没有return。
（2）按照其他OO语言的习惯，构造函数首字母大写。
（3）使用构造函数模式，必须使用new操作符。创建后，构造函数的this指针指向了新对象（myCar）。
（4）可以用constructor判断一个实例的构造函数，也可以用instanceof判断。
（5）也可以使用函数的apply或者call来使用构造函数。
[javascript] view plain copy
  1. //小实验  
  2. function Car(name,value){  
  3.     this.name=name;  
  4.     this._value=value;  
  5.     this.getValue=function(){return this._value;}  
  6.     this.setValue=function(v){this._value=v;}  
  7. }  
  8. var myCar = new Car("BMW",10000);  
  9. var myCar2= new Object();  
  10. Car.apply(myCar2,["BMW2",10001]);  
  11. alert(myCar.constructor==Car);//true  
  12. alert(myCar instanceof Car);//true  
  13. alert(myCar instanceof Object);//true  
  14. alert(myCar2.getValue());//10001  
（6）构造函数模式的缺点是，每个对象实例的方法，都会独立创建。即myCar和myCar2的getValue方法，虽然代码是一样的，但这俩并不是一个函数。这种创建方式明显浪费内存。
[javascript] view plain copy
  1. //小实验  
  2. var car1=new Car("BMW",10000);  
  3. var car2=new Car("BMW",10001);  
  4. alert(car1.getValue==car2.getValue);//false  
（7）可以把方法卸载外面，来解决（6）遇到的问题。
[javascript] view plain copy
  1. //小实验  
  2. function CarBMW(owner,value){  
  3.     this.owner=owner;  
  4.     this._value=value;  
  5.     this.getValue=_CarBMW_getValue;  
  6.     this.setValue=_CarBMW_setValue;  
  7. }  
  8. function _CarBMW_getValue(){  
  9.     return this._value;  
  10. }  
  11. function _CarBMW_setValue(v){  
  12.     this._value=v;  
  13. }  
  14. var car3=new CarBMW("Brain",10000);  
  15. var car4=new CarBMW("Join",10001);  
  16. alert(car3.getValue==car4.getValue);//true  

3.原型模式

（1）原型模式利用了函数的prototype属性。这个属性指向一个对象，而这个对象包含了构造函数创建出的所有实例的公共属性和方法。通过语义可以这样理解，prototype指向的是一个原型，而构造函数根据这个原型来创建其他实例，这些实例会共享原型中早已定义好的属性和方法。
（2）原型模式解决了构造函数模式中创建方法副本的问题，毕竟2.7里面写的解决方案很丑陋。但原型模式也有自己的问题，就是除了方法共享外，属性也是共享的。
（3）我们可以通过实例读取原型中的属性，但不能通过实例写入原型的属性。如果有写入操作，其实是给实例创建了一个局部属性，这个局部属性屏蔽了原型的同名属性。如果出现了屏蔽现象，用delete掉发生负载的属性，就能重新读取原型中的属性值。
[javascript] view plain copy
  1. //小实验  
  2. function Car(){}  
  3. Car.prototype.name="DEMO";  
  4. Car.prototype._value=0;  
  5. Car.prototype.getValue=function(){return this._value;}  
  6. Car.prototype.setValue=function(v){this._value=v;}  
  7. var car1=new Car();  
  8. var car2=new Car();  
  9. car1.name="BMW";  
  10. car2.name="Ferrari";  
  11. alert(car1.name);//BMW;  
  12. alert(car2.name);//Ferrari;  
  13. delete car1.name;  
  14. alert(car1.name);//DEMO  
  15. car1.config.owner="Brain";  
  16. alert(car2.config.owner);//Brain;  
  17. car2.config.owner="Join";  
  18. alert(car1.config.owner);//Join;  
（4）通过isPrototypeOf和getPrototypeOf来判断某个构造函数的原型是不是某个实例对象的原型。这也是判断实例的类型的方法之一。
[javascript] view plain copy
  1. //小实验  
  2. alert(Car.prototype.isPrototypeOf(car1));//true  
  3. alert(Object.getPrototypeOf(car1)==Car.prototype);//true  
（5）使用hasOwnProperty("propertyName")可以判断属性是不是实例里的。使用in操作可以判断对象是否包含某属性，不论这个属性是实例的还是原型的，alert("propertyName" in car1);。这两个结合，就能判断出属性是实例里的，还是原型里的。另外，Object.keys(object),可以获得一个实例所有可以用for-in访问的属性名字符数组。
（6）原型模式的简单语法，直接用字面量定义prototype。这样做有个问题，就是原型的constructor指针不再指向构造函数，所以不能用car1.constructor==Car来判断实例的类型，因此必须明确地指定constructor。但这又带来另一个问题，constructor本来是不能被for-in枚举的，显示定义会破坏这一原则，因此要把constructor的枚举关闭。
[javascript] view plain copy
  1. //小实验  
  2. function Car(){}  
  3. Car.prototype={  
  4.     constructor:Car,  
  5.     name:"DEMO",  
  6.     _value:0,  
  7.     getValue:function(){return this._value;},  
  8.     setValue:function(v){this._value=v;}  
  9. }  
  10. Object.defineProperty(Car.prototype,"constructor",{enumerable:false,value:Car});  
（7）实例、构造函数、原型之间是松散连接，因此在创建实例后，再定义构造函数的原型是不起作用的。
[javascript] view plain copy
  1. //小实验  
  2. function Car(){}  
  3. var myCar=new Car();  
  4. Car.prototype={  
  5.     sayHello:function(){alert("hello");}      
  6. }  
  7. myCar.sayHello();//undefined is not a function  
（8）原型模式的缺点，就是属性不能是object，否则所有实例会共享这个属性。原因很简单，object属性，使用的是引用，所有实例的指针是相同的。例子在(3)的小实验部分已经给出了。

4.构造与原型混合模式

（1）把构造函数模式与原型模式混合起来，在构造函数内部创建属性成员，在原型中创建方法成员。
（2）这样做基本上就挺好了，缺点是不利于类的继承（后面会说道）。
[javascript] view plain copy
  1. //小实验  
  2. function Car(name,value){  
  3.     this.name=name;  
  4.     this._value=value;  
  5. }  
  6. Car.prototype={  
  7.     constructor:Car,  
  8.     getValue:function(){return this._value;},  
  9.     setValue:function(v){this._value=v;}  
  10. }  
  11. Object.defineProperty(Car.prototype,"constructor",{enumerable:false,value:Car});  

5.动态原型模式

（1）在js中，构造与原型混合模式已经很不错了，但对于常使用其他OO语言的程序员来说，这种构造函数和定义原型分开的做法会让他们感到亦或。他们更习惯与一个构造函数包含所有东西。包括属性定义、方法定义。
（2）可以在构造函数中判断是否已经重新定义了原型，如果没有，就定义原型，这样，起到了一个包装的作用。
（3）其实这么做就是为了好看。
[javascript] view plain copy
  1. //小实验  
  2. function Car(name,value){  
  3.     this.name=name;  
  4.     this._value=value;  
  5.     if(typeof this.getValue != "function"){  
  6.         Car.prototype.getValue=function(){return this._value;}  
  7.         Car.prototype.setValue=function(v){this._value=v;}  
  8.     }  
  9. }  

6.寄生构造函数模式

（1）寄生构造函数模式和工厂模式的写法完全相同，也是在构造函数内部创建对象，然后返回。寄生构造函数模式和工厂模式的区别是，要使用new关键字，而工厂模式不使用new。
（2）书中说“在构造函数不返回值的情况下，默认会返回新对象实例。”当使用new关键字时，构造函数是不返回值的，所以返回了它内部生成的实例。
（3）注意，正由于第三点，这种构造函数使用new和不使用new的效果是一样的。（PS：我在进行2015 A公司线试的时候遇到了这道题，题目是实现一个用A()和new A()效果相同的构造函数。）
（4）这种方法有着明显的缺点，就是不能用instanceof排判断实例是哪个构造函数创建的，跟工厂模式一样。原因就是通过这种方式得到的对象，和在函数外面直接生成对象没有区别。
[javascript] view plain copy
  1. //小实验  
  2. function Car(name,value){  
  3.     var obj=new Object();  
  4.     obj.name=name;  
  5.     obj.value=value;  
  6.     return obj;   
  7. }  
  8. var car1=new Car("BMW",10000);  
  9. var car2=Car("Ferrari",10000);  
  10. alert(car1.name);//BMW  
  11. alert(car2.name);//Ferrari  
  12. alert(car1 instanceof Car);//false  
  13. alert(car2 instanceof Car);//false  

7.稳妥构造函数模式

（1）这种模式其实就是闭包。调用一次函数后，把形参当作数据成员属性，函数内部定义object，专门保存接口，然后把object返回。
（2）这种模式的特点是不使用new，也不使用this，容易理解。缺点是如果不释放，闭包就一直在。
（3）使用这种模式，不能直接读取和修改数据成员属性，必须为这些成员配套getter和setter。
[javascript] view plain copy
  1. //小实验  
  2. function Car(name,value){  
  3.     var obj=new Object();  
  4.     obj.getValue=function(){return value;}  
  5.     return obj;  
  6. }  
  7. var car1=Car("BMW",10000);  
  8. var car2=Car("Ferrari",10001);  
  9. alert(car1.getValue());//10000  
  10. alert(car2.getValue());//10001 
兜兜88
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS对象（对象的创建、属性的增删改查、属性的检测和枚举）
m0_46270930的博客
12-17 646
对象的创建 对象的定义 JavaScript中的一切都是对象，这是该语言的一个很大的特点。像字符串、数组等已经定义的对象叫做内置对象。用户自己也可以定义对象，叫做自定义对象。 下面介绍五种创建对象的方法，其中通过对象字面量和使用构造函数创建对象最常用。 对象字面量 这是最常用的创建对象的方法，通过新建一个键值对的集合（对象字面量）创建对象，如下： var song = { name:"Liekkas", time:180, "song language":English,
JavaScript学习手册四：JS对象
qq_45823118的博客
04-18 5320
JS对象引言A、对象的创建任务描述相关知识代码文件B、属性的增删改查任务描述相关知识代码文件C、属性的检测和枚举任务描述相关知识代码文件 引言 1、JavaScript是基于对象的语言，在JavaScript中，一切都可以被称为对象，包括字符串、数字、布尔型、HTML Element等。这些JavaScript中已有的对象称为内置对象，而用户自己定义的对象叫做自定义对象。自定义对象是数据和函数（也叫方法）的集合。 2、这里要特别提醒的是，JavaScript虽然也是一门基于对象的语言，但是它实现对象的
我们来看看JS的的小对象
qq_45549336的博客
08-06 441
JS中的对象属性的基本操作方法对象是引用类型对象中的扩展运算符对象中的解构赋值连续解构解构对象中不存在的属性监测是否含有某个属性对象合并object的快速遍历对象的深浅拷贝属性描述符修改属性描述符给属性描述符设置规定对象的getter与setterproxy代理JSON的形式JSON.stringify进阶JSON.parse进阶 属性的基本操作方法  对属性的访问，添加，删除 let obj = { name: '小明', age: 20 } //访问 console.log(obj.name)
[Javascript学习记录]1.对象_创建对象的方法
muwei5231的博客
11-21 121
对象可以理解为一个名值对，其中的值可以是数据和函数。有多种方法可以创建对象，最简单的就是创建一个Object实例,再为其添加属性与方法。如同：var person = new Object(); person.name = "zhangsan"; person.age = "19"; person.job = "student"; person.sayName = function(){
JavaScript高级程序设计（第三版）学习笔记1~5章
01-19
第2章，在html中使用JavaScript Html引入外部js脚本 [removed]两个[removed]之间不应放脚本，因为并不会被执行[removed] [removed]标签有一个defer属性可以延迟脚本执行，但是并不保证会按脚本排列顺序执行 ...
JavaScript高级程序设计（第三版）学习笔记6、7章
01-19
第6章，面向对象的程序设计 对象： 1、数据属性 configurable，表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true enumerbale，表示能否通过for-in...
JavaScript高级程序设计（第3版）学习笔记 概述
12-07
JavaScript，作为一种广泛应用于网页和网络应用的...通过学习《JavaScript高级程序设计（第3版）》这样的专业书籍，不仅可以系统地梳理JavaScript的基础，还能了解到一些高级用法和最佳实践，对提升编程技能大有裨益。
javascript高级程序设计(第三版)学习笔记（一） 正则表达式整理
01-21
1、创建正则表达式 第一种方式：注意这里的正则表达式不能使用单引号或者双引号，如下 var pattern1 = /[abc]/i; // 匹配第一个”a”或”b”或”c”，不区分大小写 第二种方式：使用RegExp构造函数创建，该构造函数...
JavaScript高级程序设计学习笔记（四）
01-20
JavaScript高级程序设计学习笔记（四）主要探讨了JavaScript中的引用类型、Function类型、函数的声明与定义、函数表达式以及一些基本包装类型的相关知识。在JavaScript中，函数不仅仅是代码块，它们也是对象，具备...
JavaScript-this
natsu-cc的博客
03-31 146
前言： 当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。 对于每个执行上下文，都有三个重要属性： 变量对象(Variable object，VO) 作用域链(Scope chain) this Types： ECMAScript 的类型分为语言类型和规范类型。 ECMAScript 语言类型是开发者直接使用 ECMAScript 可以操作的。其实就是我们常说的Undefined, Null, Boo
关于JavaScript this指向
weixin_43154931的博客
05-11 66
var value = 1; var foo = { value: 2, bar1: function () { return this.value; }, bar2: () => { return this.value; }, bar3: () => { return function() { return this.value } }, bar4: function() { return () => {
JS中function()使用方法
qq_35366014的博客
08-05 1983
javascript 函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法：  以下是引用片段：  function func1(…){…}  var func2=function(…){…};  var func3=function func4(
JavaScJavaScript 函数
QuShihua_CD的博客
05-26 778
JavaScript 函数是被设计为执行特定任务的代码块。 JavaScript 函数会在某代码调用它时被执行。 JavaScript 函数语法 JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。 函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。 圆括号可包括由逗号分隔的参数： (参数 1, 参数 2, …) 由函数执行的代码被放置在花括号中...
javaScript高级程序设计----笔记第七到九章
qq_41056944的博客
09-02 166
函数表达式 函数表达式的特征 使用函数实现递归 使用闭包定义私有变量 函数表达式特征 函数声明提升 执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。 sayHi(); function sayHi(){ alert("Hi!"); } 匿名函数 var functionName = function(arg0, arg1, arg2){ ...
js中令人头疼的this指向
y_programmer_ape的博客
07-09 226
深度理解this指向 在《JavaScript深入之执行上下文栈》中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。 对于每个执行上下文，都有三个重要属性 变量对象(Variable object，VO) 作用域链(Scope chain) this 今天重点讲讲 this，然而不好讲。 …… 因为我们要从 ECMASciript5 规范开始讲起。 先奉上 ECMAScript 5.1 规范地址： 英文版：
关于return function(){}常见的问题（一）
热门推荐
xulei_cow的博客
02-27 1万+
自运行函数的作用域与返回值
《JavaScript高级程序设计（第3版）》PDF版-前端开发者必备
"《JavaScript高级程序设计（第3版）》是前端开发人员的重要参考资料，提供了非扫描的PDF版本，保证了内容的清晰度和可读性。这本书详细介绍了JavaScript的核心语言特性、DOM操作、浏览器对象模型（BOM）、事件处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值