在JavaScript中创建对象,对于JavaScript开发者来说,会有很多种方法去创建,本文将剖析JavaScript原型设计模式,在大多数地方,可以使用这种原型属性来分享对象中的实例方法。
1.定义内部方法(Defining Methods Internally)
在所有创建对象的方式中,这大概是最简单,最直观的方式了。使用function定义构造函数,在设置所有对象的属性和方法时,只要在前面追加this就可以了。你或许没有意识到,这个特殊的模型是非常耗内存的,原因就是这个getInfo()方法在每次新建一个实例时都要被创建,如果你仅仅是创建几个对象,那么也不会占太多的内存。
- function Car(make, model, level, color, warranty) {
-
this.make = make;
-
this.model = model;
-
this.level = level;
-
this.color = color;
-
this.warranty = warranty;
-
this.getInfo = function() {
-
return this.make + ', ' + this.model + ', ' + this.level + ', '+ this.color + ', ' + this.warranty;
- };
- }
-
var aCar = new Car('Acura', 'TL', 'Sport', 'blue', 5);
-
alert(aCar.getInfo()); //displays Acura, TL, Sport, blue, 5
2.添加外部原型(Methods Added Externally to the Prototype)
通过给对象方法添加构造函数原型来分享所有对象方法。首先要定义构造函数和属性,然后把方法添加到函数原型属性中。这样做的好处是你可以随时添加方法并且被该类型的所有对象(即使是已经被实例化的对象)识别。
- function Car(make, model, level, color, warranty) {
-
this.make = make;
-
this.model = model;
-
this.level = level;
-
this.color = color;
-
this.warranty = warranty;
- }
-
-
Car.prototype.getInfo = function() {
-
return this.make + ', ' + this.model + ', ' + this.level + ', '+ this.color + ', ' + this.warranty;
- };
-
-
var aCar = new Car('Acura', 'TL', 'Sport', 'blue', 5);
-
alert(aCar.getInfo()); //displays Acura, TL, Sport, blue, 5
-
-
Car.prototype.accelerate = function() {
-
return 'How fast?';
- };
-
alert(aCar.accelerate()); //displays "How fast?"
3.原型模式(The Prototype Pattern)
比前面那个例子稍微先进点的方式,用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。在功能上,这两个模型并没有什么不同,它可以将所有的方法组合在一起。
- function Car(make, model, level, color, warranty) {
-
this.make = make;
-
this.model = model;
-
this.level = level;
-
this.color = color;
-
this.warranty = warranty;
- }
- Car.prototype = {
-
getInfo: function () {
-
return this.make + ', ' + this.model + ', ' + this.level + ', '+ this.color + ', ' + this.warranty;
- }
- };
4.The Revealing Prototype Pattern
与之前的模式比起来,这种对象的创建会有很多显著的效果,第一个是在一个构造函数中,它可以包围所有对象的属性和方法。第二个优点是我们可以定义私有对象成员,并且通过用var关键字定义本地变量。
-
var Car = function(make, model, level, color, warranty) {
-
var _make = make,
- _model = model,
- _level = level,
- _color = color,
- _warranty = warranty;
-
return {
-
getInfo: function () {
-
return _make + ', ' + _model + ', ' + _level + ', '+ _color + ', ' + _warranty;
- }
- };
- };
5.Extending the Revealing Prototype Pattern
然而,Revealing Prototype Pattern的另外一个突出优点是,它使扩展和/或覆盖现有的功能更直接一点。让我们来扩展Car对象,通过定义它的构造函数和分配一个新的Car实例给UsedCar原型去创建一个UsedCar:
-
var UsedCar = function(mileage) {
-
//Define a variable unique to each instance of UsedCar
-
this.mileage = mileage;
- };
-
UsedCar.prototype = new Car('Honda', 'Civic', 'LX', 'gray', 2);
同样,我们可以重写Car对象的功能仅仅用相同的函数名字来替换它,通过扩展我们可以重用getInfo()这个方法,这样对UsedCar会有好处的。我们可以从UsedCar的原型中获得getInfo()方法,因为我们构建了一个Car实例在这。使用封闭,我们可以追加UsedCar的里程,通过getInfo()这个方法进行输出。
-
var UsedCar = function(mileage) {
-
//Define a variable unique to each instance of UsedCar
-
this.mileage = mileage;
- };
-
-
UsedCar.prototype = new Car('Honda', 'Civic', 'LX', 'gray', 2);
-
var aUsedCar = new UsedCar(50000);
-
alert(aUsedCar.getInfo()); //displays Honda, Civic, LX, gray, 2
-
//this will add the mileage to getInfo()'s output
-
UsedCar.prototype.getInfo = function(superGetInfo) {
-
return function() { return superGetInfo() + ', '+ this.mileage; };
- }(UsedCar.prototype.getInfo);
-
-
alert(aUsedCar.getInfo()); //displays Honda, Civic, LX, gray, 2, 50000
以上我们总结了在JavaScript中最常见的几种原型模式,如果你有其他不同的见解,可以留言与我们讨论。
分享到:
相关推荐
外文翻译:学用JavaScript设计模式,pdf版本,中文版 设计模式是可重用的用于解决软件设计中一般问题的方案。设计模式如此让人着迷,以至在任何编程语言中都有对其进行的探索。 其中一个原因是它可以让我们站在巨人...
javascript 设计模式与开发实践 作者 曾探 本书字体清晰,学习起来舒服。和张容铭的javascript设计模式相比,个人觉得有以下不同之处: 1、需要对原型链和闭包有一定的基础 2、案例比较经典并且通熟易懂,讲解特别...
第7章 设计模式 单体模式 工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 小结 第8章 DOM和浏览器模式 关注分离 DOM脚本 事件 长期运行脚本 ...
对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。 看了这张图后突然对javascript有了质的理解。 javascript的...
javascript设计模式的学习 重点学习了原型链的一些继承模式 但是在日常开发当中很少用到 不知道是哪里出了问题
深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 深入理解JavaScript系列(45):代码复用模式(避免篇...
主要介绍了javascript设计模式 – 原型模式,结合实例形式分析了javascript原型模式相关概念、原理、应用场景及操作注意事项,需要的朋友可以参考下
深入理解JavaScript系列(42):设计模式之原型模式 深入理解JavaScript系列(43):设计模式之状态模式 深入理解JavaScript系列(44):设计模式之桥接模式 深入理解JavaScript系列(45):代码复用模式(避免篇...
主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
24种设计模式的入门,整合7种开发语言的代码示例。 (C#、JAVA、JavaScript、C++、Python、Go、PHP) 第一节 设计模式:学习顺序 第二节 简单工厂模式 第三节 工厂方法模式 第四节 抽象工厂模式 第五节 单例模式 第...
介绍 原型模式(prototype)是指用原型实例指向...在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很多讲解的都是关于类的,但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概
JavaScript 设计模式精讲,JavaScript 设计模式精讲,JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript 设计模式精讲JavaScript ...
主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下
该文档是根据博客园汤姆大叔的深入...42.设计模式之原型模式 43.设计模式之状态模式 44.设计模式之桥接模式 45.代码复用模式(避免篇) 46.代码复用模式(推荐篇) 47.对象创建模式(上篇) 48.对象创建模式(下篇)
第7章 设计模式 单体模式 工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 小结 第8章 DOM和浏览器模式 关注分离 DOM脚本 事件 长期运行脚本 远程脚本 酉己置JavaScript 载入策略...