3.Contructor(构造器)模式—精读《JavaScript 设计模式》Addy Osmani著
栏目: JavaScript · 发布时间: 6年前
内容简介:在经典的面向对象编程语言中,Construtor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法。在 JavaScript 中,几乎所有东西都是都是对象,可能你会经常找不到对象,:stuck_out_tongue_closed_eyes:,你承认不?:grin:来看一下什么是 Object构造器 :
在经典的面向对象编程语言中,Construtor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法。
在 JavaScript 中,几乎所有东西都是都是对象,可能你会经常找不到对象,:stuck_out_tongue_closed_eyes:,你承认不?:grin:
来看一下什么是 Object构造器 :
用于创建特定类型的对象——准备好对象以备使用,同时接受构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法值。
下图为:Constructor(构造器)模式
对象的创建
在 JavaScript 中,创建对象时有发生,常见的创建方式有两种:
- 直接空对象赋值;
- 使用 new关键字
// 1. 直接空对象赋值 var newObject = {}; // 2. 使用 new 关键字创建,newObject构造器的简洁记法 var newObject = new Object(); 复制代码
在 Object构造器为特定的值创建对象封装,或者没有传递值时,它将创建 一个空对象并返回这个空对象;
对象的赋值
四种方法可以将键值赋值给一个对象:
- ECMAScript 3 兼容方式;
- “点”语法;
- 中括号语法
- 只适用于ECMAScript 5 方式;
- Object.defineProperty;
- Object.defineProperties
// 1.点语法 // 设置属性 newObject.someKey = "Hello World!"; // 获取属性值 var key = newObject.someKey; // 2.中括号语法 // 设置属性 newObject["somekey"] = "Hello world!"; // 获取属性值 var key = newObject["somekey"]; // 3.Object.defineProperty // 设置属性 Object.defineProperty(newObject,"somekey",{ value:"Hello World!",// 该属性对应的值,默认为undefined writable:true,// 能否修改属性的值,如果直接使用字面量定义对象,默认值为true enumerable:true,// 表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,如果直接使用字面量定义对象,默认值为true configurable:true// 表示能否通过delete删除此属性,能否修改属性的特性,或能否修改把属性修改为访问器属性,如果直接使用字面量定义对象,默认值为true }); // 也可以简化一下这种方式 var defineProp = function(obj,key,value){ config.value=value; Object.defineProperty(obj,key,config); } // 使用上述方式,先创建一个空的 person对象 var person = Object.create(null); // 然后设置各个属性 defineProp(person,"car","Delorean"); defineProp(person,"dateOfBrith","1989"); defineProp(person,"hasBeard",false); // 获取属性值同1,2 var key_car = person["car"]; var key_dateOfBrith = person["dateOfBrith"]; var key_hasBeard = person["hasBeard"]; // 4.Object.defineProperties // 设置属性 Object.defineProperties(newObject,{ "someKey":{ value:"Hello World!", writable:true }, "anotherKey":{ value:"Foo Bar", writable:false } }); // 获取属性值同1,2 var key_someKey = person["someKey"]; var key_anotherKey = person["anotherKey"]; 复制代码
上面定义的这些方法甚至可以用于继承如下所示:
// 用法 // 创建赛车司机 driver 对象,继承于 person 对象 var driver = Object.create(person); // 为 driver 设置一些属性 defineProp(deriver,"topSpeed","100mph"); // 获取继承属性 console.log(driver.dateOfBrith); // 获取我们设置的100mph属性 console.log(driver.topSpeed); 复制代码
基本Constructor(构造器)
大家都知道 JavaScript 不支持类的概念,但是它却支持与对象一起使用的 特殊的 Constructor 函数。通过在构造器前面加 new关键字,告诉 JavaScript 像使用构造器一样实例化一个新的对象,并且对象成员由该函数定义。
在构造器内,关键字 this引用新创建的对象。回顾对象创建,基本的构造器看起来可能是这样的:
function Car(model,year,miles){ this.model = model; this.year = year; this.miles = miles; this.toString= function(){ return this.model+ " has done " + this.miles + " miles"; } } // 用法 var civic = new Car("Honda Civic",2009,20000); var mondeo= new Car("Ford Mondeo",2010,5000); console.log(civic.toString()); console.log(mondeo.toString()); 复制代码
上面是一个简单的构造器模式版本,但是也是存在问题的:因为她很难继承,另一个 问题就是 toString()这样的函数是为每个使用 Car 构造器创建的新对象而重新定义的。 这不是最理想的,因为这种函数应该在所有的 Car 实例之间共享。
其实这个问题很好解决,因为有很多ES3和 ES5兼容替代方法能够用于创建对象。
带原型的Constructor(构造器)
JavaScript中有一个名为 prototype 的属性。调用 JavaScript 构造器创建一个对象后,新的对象就具有构造器原型的所有属性。通过这种方式,可以创建多个 Car 对象,并访问相同的原型。所以我们可以扩展原始示例,如下所示:
function Car(model,year,miles){ this.model = model; this.year = year; this.miles = miles; } // 前方警告:小伙伴是否还记得反模式一条:避免重新定义 prototype对象 // 所以下面我们是使用 Object.prototype.newMethod而不是Object.prototype来定义对象内部的方法 Car.prototype.toString=function(){ return this.model+ " has done " + this.miles + " miles"; } // 用法 var civic = new Car("Honda Civic",2009,20000); var mondeo= new Car("Ford Mondeo",2010,5000); console.log(civic.toString()); console.log(mondeo.toString()); // 这样 toString()的单一示实例就可以在所有的 Car 对象之间共享了 复制代码
小结
今天的构造器模式,是不是很nice?
但是,你掌握了多少?
你可以动动小手指示例代码都敲一遍,相信你可以更进一步了解,掌握 Constructor(构造器)模式。
下一篇将对Module(模块)模式做详细的介绍。这一模式更精彩,因为很快你就会知道为什么别人都那么写了,以及模块化的相关概念等等等
( ^_^ )/~~拜拜
以上所述就是小编给大家介绍的《3.Contructor(构造器)模式—精读《JavaScript 设计模式》Addy Osmani著》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 精读《React 性能调试》
- 精读《Typescript 4》
- 精读《正则 ES2018》
- AIStats 2017文章精读(四)
- 精读《如何比较 Object 对象》
- 精读《谈谈 Web Workers》
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Rework
Jason Fried、David Heinemeier Hansson / Crown Business / 2010-3-9 / USD 22.00
"Jason Fried and David Hansson follow their own advice in REWORK, laying bare the surprising philosophies at the core of 37signals' success and inspiring us to put them into practice. There's no jarg......一起来看看 《Rework》 这本书的介绍吧!