javascript设计模式介绍(三) 原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么 prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示。

function Person(){}
Person.prototype.name= "Nicholas";
Person.prototype.age= 29;
Person.prototype.job= "Software Engineer";
Person.prototype.sayName= function(){
        alert(this.name);
};
var person1 = new Person();
person1.sayName();//"Nicholas"

var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName== person2.sayName); //true

在此,我们将sayName()方法和所有属性直接添加到了 Person 的 prototype 属性中,构造函数变成了空函数。即使如此,也仍然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。换句话说,person1和
person2 访问的都是同一组属性和同一个 sayName()函数。
要理解原型模式的工作原理,必须先理解 ECMAScript中原型对象的性质。

理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针。

就拿前面的例子来说,Person.prototype. constructor 指向 Person。

而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法。创建了自定义的构造函数之后,其原型对象默认只会取得 constructor 属性;至于其他方法,则都是从 Object 继承而来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262第 5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]],但
Firefox、Safari 和 Chrome 在每个对象上都支持一个属性__proto__;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。以前面使用 Person 构造函数和 Person.prototype 创建实例的代码为例,图 6-1展示了各个对象之间的关系。

在此,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor 属性之外,还包括后来添加的其他属性。Person 的每个实例——person1 和 person2 都包含一个内部属性,该属性仅仅指向了 Person.prototype;换句话说,它们与构造函数没有直接的关系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用
person1.sayName()。这是通过查找对象属性的过程来实现的。

虽然在所有实现中都无法访问到[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]指向调用 isPrototypeOf()方法的对象(Person.prototype),那么这个方法就返回 true,如下所示:

<span style="white-space:pre">	</span>alert(Person.prototype.isPrototypeOf(person1));//true
	alert(Person.prototype.isPrototypeOf(person2));//true

这里,我们用原型对象的 isPrototypeOf()方法测试了 person1 和 person2。因为它们内部都有一个指向 Person.prototype 的指针,因此都返回了 true。

ECMAScript 5增加了一个新方法,叫Object.getPrototypeOf(),在所有支持的实现中,这个方法返回[[Prototype]]的值。例如:

<span style="white-space:pre">	</span>alert(Object.getPrototypeOf(person1)== Person.prototype); //true
	alert(Object.getPrototypeOf(person1).name);//"Nicholas"

这里的第一行代码只是确定 Object.getPrototypeOf()返回的对象实际就是这个对象的原型。第二行代码取得了原型对象中name 属性的值,也就是"Nicholas"。使用Object.getPrototypeOf()可以方便地取得一个对象的原型,而这在利用原型实现继承的情况下是非常重要的。

支持这个方法的浏览器有 IE9+、Firefox 3.5+、Safari 5+、Opera 12+和 Chrome。

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。

如果在实例中找到了具有给定名字的属性,则返回该属性的值;

如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。

如果在原型对象中找到了这个属性,则返回该属性的值。

也就是说,在我们调用 person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例 person1 有 sayName 属性吗?”答:“没有。”

然后,它继续搜索,再问:“person1 的原型有 sayName 属性吗?”答:“有。”

于是,它就读取那个保存在原型对象中的函数。当我们调用 person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。

而这正是多个对象实例共享原型所保存的属性和方法的基本原理。

虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性。来看下面的例子:

function Person(){}
Person.prototype.name ="Nicholas";
Person.prototype.age = 29;
Person.prototype.job ="Software Engineer";
Person.prototype.sayName =function(){
        alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ="Greg";
alert(person1.name);//"Greg"——来自实例
alert(person2.name);//"Nicholas"——来自原型

在这个例子中,person1的 name 被一个新值给屏蔽了。但无论访问 person1.name 还是访问person2.name 都能够正常地返回值,即分别是"Greg"(来自对象实例)和"Nicholas"(来自原型)。当在 alert()中访问 person1.name 时,需要读取它的值,因此就会在这个实例上搜索一个名为 name的属性。这个属性确实存在,于是就返回它的值而不必再搜索原型了。当以同样的方式访问
person2. name 时,并没有在实例上发现该属性,因此就会继续搜索原型,结果在那里找到了 name 属性。

当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;换句话说,添加这个属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为 null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用 delete 操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性,如下所示。

function Person(){}
Person.prototype.name= "Nicholas";
Person.prototype.age= 29;
Person.prototype.job= "Software Engineer";
Person.prototype.sayName= function(){
        alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name= "Greg";
alert(person1.name);//"Greg"——来自实例
alert(person2.name);//"Nicholas"——来自原型
deleteperson1.name;
alert(person1.name);//"Nicholas"——来自原型

在这个修改后的例子中,我们使用 delete 操作符删除了 person1.name,之前它保存的"Greg"值屏蔽了同名的原型属性。把它删除以后,就恢复了对原型中 name 属性的连接。因此,接下来再调用person1.name 时,返回的就是原型中 name 属性的值了。

使用hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法(不要忘了它是从Object继承来的)只在给定属性存在于对象实例中时,才会返回true。来看下面这个例子。

function Person(){}
Person.prototype.name= "Nicholas";
Person.prototype.age= 29;
Person.prototype.job= "Software Engineer";
Person.prototype.sayName= function(){
                 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name"));//false
person1.name= "Greg";
alert(person1.name);//"Greg"——来自实例
alert(person1.hasOwnProperty("name"));//true

alert(person2.name);//"Nicholas"——来自原型
alert(person2.hasOwnProperty("name"));//false

delete person1.name;
alert(person1.name);//"Nicholas"——来自原型
alert(person1.hasOwnProperty("name"));//false

通过使用 hasOwnProperty()方法,什么时候访问的是实例属性,什么时候访问的是原型属性就一清二楚了。调用 person1.hasOwnProperty( "name")时,只有当 person1 重写 name 属性后才会返回 true,因为只有这时候 name 才是一个实例属性,而非原型属性。图 6-2展示了上面例子在不同情况下的实现与原型的关系(为了简单起见,图中省略了与
Person 构造函数的关系)。

时间: 2024-11-13 11:58:55

javascript设计模式介绍(三) 原型模式的相关文章

设计模式学习05—原型模式

一.动机与定义 之前学习原型模式一直以为原型模式目的是为了方便的创建相同或相似对象,用复制对象的方式替换new的方式,还研究了深克隆和浅克隆.最近仔细看了GOF的设计模式,发现原型模式的本意并不仅仅是复制对象这么简单. 复制对象确实是一方面,当我们需要大量相似,甚至相同对象的时候,除了一个个的new之外,还可以根据一个原型,直接复制出更多的对象.但是如果把原型模式认为只是复制对象这么简单就错了. 创建型模式主要讲如何创建对象,通常包含何时创建,谁来创建,怎么创建等.GOF书里面写的意图是,用原型

Java描述设计模式(05):原型模式

一.原型模式简介 1.基础概念 原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象. 2.模式结构 原型模式要求对象实现一个可以"克隆"自身的接口,这样就可以通过复制一个实例对象本身来创建一个新的实例.这样一来,通过原型实例创建新的对象,就不再需要关心这个实例本身的类型,只要实现了克隆自身的方法,就可以通过这个方法来获取新的对象,而无须再去通过new来创建. 3.代码实现 1).UML关系图 Java描述设计模

从王者荣耀看设计模式(十七.原型模式)

从王者荣耀看设计模式(原型模式) 一.简介 王者荣耀包含有很多的玩法,其中有一种游戏模式只在周六和周日开放,那就是--克隆模式.与常规的游戏双方阵营只允许出现单一英雄不同,在克隆模式中,双方各选择一个英雄进行克隆,换句话说,一个阵营的五个人操作的五个相同的英雄 二.模式动机 在软件系统中,有些对象的创建过程比较复杂,而且有时候需要频繁创建,原型模式通过给出一个原型对象来指明所要创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象,这就是原型模式的意图所在. 三.原型模式 原型模式

javascript设计模式介绍(三) 原型模式 扩展知识

原型与 in 操作符 有两种方式使用 in 操作符:单独使用和在for-in 循环中使用.在单独使用时,in 操作符会在通过对象能够访问给定属性时返回 true,无论该属性存在于实例中还是原型中.看一看下面的例子. function Person(){} Person.prototype.name= "Nicholas"; Person.prototype.age= 29; Person.prototype.job= "Software Engineer"; Per

设计模式三 原型模式

0. 基本定义 定义:用原型实例指定创建的种类,并且通过拷贝这些原型创建新的对象. implement Cloneable 不支持 final BeanUtils copy 有使用反射实现 浅拷贝:字段是值类型,逐位复制:字段是引用类型,复制引用但不复制引用对象. 深拷贝:复制引用对象, 可通过 序列化方式实现. 1.代码参考 Resume.java public class Resume implements Cloneable, Serializable{ private String na

设计模式——介绍与工厂模式(扁平管理模式VS职业经理人模式)

本文主要对设计模式进行大概解说.特别是对工厂模式进行简明的解析: 一.设计模式的分类 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. 行为型模式,共十一种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.訪问者模式.中介者模式.解释器模式. 事实上还有两类:并发型模式和线程池模式. 二.设计模式的六大原则 1.开闭原则(Op

Javascript设计模式系列三

继承,一个类或对象继承另一个类或对象的三种方法.类式继承.原型式继承.掺元类. 一.类式继承,原型链.Extend函数. <script type="text/javascript"> ////定义Person类 var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; ////原型链 function A

java设计模式 GOF23 04 原型模式

一.原型模式介绍 因为java中new一个新对象比clone一个对象需要花费等多的资源,所以一般需要 在短时间内创建大量对象并且new对象的过程需要耗费比较多的资源使用原型模式. 想要clone一个类需要这个类实现Cloneable接口,重载clone方法,这个接口在底层 通过内存拷贝实现clone对象,因此效率很高. package com.lz.prototype; import java.util.Date; public class ShallowClone implements Clo

《Java设计模式》之原型模式

原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象.这就是原型模式的用意. 原型模式的结构 原型模式要求对象实现一个可以"克隆"自身的接口,这样就可以通过复制一个实例对象本身来创建一个新的实例.这样一来,通过原型实例创建新的对象,就不再需要关心这个实例本身的类型,只要实现了克隆自身的方法,就可以通过这个方法来获取新的对象,而无须再去通过new来创建. 原型模式有两种表现形式:(1)简单形式.(2)登记形式,这两