Prototype原型模式

通过构造函数的弊端引出原型概念

先看一个一只猫的构造函数

function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){alert("吃老鼠");};
}

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

再看

alert(cat1.eat == cat2.eat); //false

因此，为了让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址，引出了原型

什么是原型？

原型对象实际上就是构造函数的一个实例，和普通的实力对象没有本质上的区别。可以包含特定类型的所有实例的共享属性或者方法。这个prototype的属性值是一个对象（属性的集合），默认的只有一个叫做constructor的属性，指向这个函数本身。

比如我们简单定义一个SuperType名字的函数，里面什么属性也没有在函数内部是这个样子的

function SuperType(){
}

从上图我们看到，函数里面虽然什么都没有，但是有一个默认的prototype属性,它是一个对象，它指向的是自己的地址，而prototype这个对象本身里面又有一个属性constructor，而这个属性，又指向了函数本身,有点绕，你可以通过下面的代码做一下测试，看看效果

alert(SuperType.prototype) //object
alert(SuperType.prototype.constructor) //弹出函数本身function SuperType(){}

prototype和constructor是原型最基本的概念

把之前的Cat构造函数修改成如下：

function Cat(name,color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

alert(cat1.eat == cat2.eat); //true

Prototype模式的验证方法

为了配合prototype属性，Javascript定义了一些辅助方法，帮助我们使用它。

isPrototypeOf()    这个方法用来判断，某个proptotype对象和某个实例之间的关系。

function Cat(name,color){
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠  

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

hasOwnProperty()    每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

in运算符   in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

alert("name" in cat1); // true
alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) {
    alert("cat1["+prop+"]="+cat1[prop]);
}

来看一下 javascript高级程序设计 书中对与原型的描述和说明

function Person(){ }  //创建Person构造函数
Person.prototype.name = "Nicholas";//创建共享属性name
Person.prototype.age = 29; //创建共享属性age
Person.prototype.job = "Software Engineer"; //创建共享属性job
Person.prototype.sayName = function(){     //创建共享函数sayName
    alert(this.name);
};  

//分别创建了person1和person2,里面都有sayName函数，并且弹出的值都是一样
var person1 = new Person();
person1.sayName();   //"Nicholas"
var person2 = new Person();
person2.sayName();   //"Nicholas"
alert(person1.sayName == person2.sayName);  //true

通过上面的图，可以看到，person1和person2，他们内部都有一个指向Person.prototype的指针，可以通过原型的isPrototype方法测试一下

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true
function User(){};
var person3 = new User();
alert(Person.prototype.isPrototypeOf(person3));  //false
alert(User.prototype.isPrototypeOf(person3));  //true

作为类比，我们考虑下JavaScript中的数据类型 - 字符串（String）、数字（Number）、数组（Array）、对象（Object）、日期（Date）等。 我们有理由相信，在JavaScript内部这些类型都是作为构造函数来实现的，比如： // 定义数组的构造函数，作为JavaScript的一种预定义类型 function Array() { // ... }

// 初始化数组的实例
var arr1 = new Array(1, 56, 34, 12);
// 但是，我们更倾向于如下的语法定义：
var arr2 = [1, 56, 34, 12];

同时对数组操作的很多方法（比如concat、join、push）应该也是在prototype属性中定义的。 实际上，JavaScript所有的固有数据类型都具有只读的prototype属性（这是可以理解的：因为如果修改了这些类型的prototype属性，则哪些预定义的方法就消失了）， 但是我们可以向其中添加自己的扩展方法。

 // 向JavaScript固有类型Array扩展一个获取最小值的方法
    Array.prototype.min = function() {
        var min = this[0];
        for (var i = 1; i < this.length; i++) {
            if (this[i] < min) {
                min = this[i];
            }
        }
        return min;
    };

    // 在任意Array的实例上调用min方法
    console.log([1, 56, 34, 12].min());  // 1

注意：这里有一个陷阱，向Array的原型中添加扩展方法后，当使用for-in循环数组时，这个扩展方法也会被循环出来。 下面的代码说明这一点（假设已经向Array的原型中扩展了min方法）：

    var arr = [1, 56, 34, 12];
    var total = 0;
    for (var i in arr) {
        total += parseInt(arr[i], 10);
    }
    console.log(total);   // NaN

解决方法：

  var arr = [1, 56, 34, 12];
    var total = 0;
    for (var i in arr) {
        if (arr.hasOwnProperty(i)) {
            total += parseInt(arr[i], 10);
        }
    }
    console.log(total);   // 103

constructor

constructor始终指向创建当前对象的构造函数。比如下面例子：

 // 等价于 var foo = new Array(1, 56, 34, 12);
    var arr = [1, 56, 34, 12];
    console.log(arr.constructor === Array); // true
    // 等价于 var foo = new Function();
    var Foo = function() { };
    console.log(Foo.constructor === Function); // true
    // 由构造函数实例化一个obj对象
    var obj = new Foo();
    console.log(obj.constructor === Foo); // true

    // 将上面两段代码合起来，就得到下面的结论
    console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时，有趣的事情就发生了。 我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

 function Person(name) {
        this.name = name;
    };
    Person.prototype.getName = function() {
        return this.name;
    };
    var p = new Person("ZhangSan");

    console.log(p.constructor === Person);  // true
    console.log(Person.prototype.constructor === Person); // true
    // 将上两行代码合并就得到如下结果
    console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的prototype时 （注意：和上例的区别，这里不是修改而是覆盖）constructor的行为

  function Person(name) {
        this.name = name;
    };
    Person.prototype = {
        getName: function() {
            return this.name;
        }
    };
    var p = new Person("ZhangSan");
    console.log(p.constructor === Person);  // false
    console.log(Person.prototype.constructor === Person); // false
    console.log(p.constructor.prototype.constructor === Person); // false

覆盖Person.prototype时，等价于进行如下代码操作：

  Person.prototype = new Object({
        getName: function() {
            return this.name;
        }
    });

而constructor始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：

 function Person(name) {
        this.name = name;
    };
    Person.prototype = {
        getName: function() {
            return this.name;
        }
    };
    var p = new Person("ZhangSan");
    console.log(p.constructor === Object);  // true
    console.log(Person.prototype.constructor === Object); // true
    console.log(p.constructor.prototype.constructor === Object); // true

怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：

 function Person(name) {
        this.name = name;
    };
    Person.prototype = new Object({
        getName: function() {
            return this.name;
        }
    });
    Person.prototype.constructor = Person;
    var p = new Person("ZhangSan");
    console.log(p.constructor === Person);  // true
    console.log(Person.prototype.constructor === Person); // true
    console.log(p.constructor.prototype.constructor === Person); // true

对象的_proto_隐式原型

上面我们创建了两个对象,person1和person2,这两个对象，也都指向了Person构造函数的原型,这是因为每个对象都有一个隐藏的属性——“_proto_”，这个属性引用了创建这个对象的函数的prototype。即：person1._proto_ === Person.prototype
这个_proto_是一个隐藏的属性，javascript不希望开发者用到这个属性值，有的低版本浏览器甚至不支持这个属性值。看下面的代码:

console.log(Object.prototype);
var obj = new Object();
console.log(obj.__proto__);

会发现打印了相同的内容:

obj这个对象本质上是被Object函数创建的，因此obj._proto_=== Object.prototype。我们可以用一个图来表示。

关于隐式原型，主要涉及到原型继承的主要原理

时间： 2024-08-05 07:06:53

Prototype原型模式的相关文章

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

设计模式（五）：PROTOTYPE原型模式 -- 创建型模式

1.定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 2.适用场景 原型模式的主要思想是基于现有的对象克隆一个新的对象出来,一般是有对象的内部提供克隆的方法,通过该方法返回一个对象的副本,这种创建对象的方式,相比我们之前说的几类创建型模式还是有区别的,之前的讲述的工厂模式与抽象工厂都是通过工厂封装具体的new操作的过程,返回一个新的对象,有的时候我们通过这样的创建工厂创建对象不值得,特别是以下的几个场景的时候,可能使用原型模式更简单也效率更高. • 1)当一个系统应该独立于

深入浅出设计模式 ------ Prototype(原型模式)之深度克隆

继上篇深入浅出设计模式 ------ Prototype(原型模式)的浅克隆实现, 本文进入Prototype(原型模式)的进阶篇----深度克隆. 深度克隆 ---- 序列化方式实现 把对象写到流里的过程是序列化(Serilization)过程,而把对象从流中读出来的过程则叫做反序列化(Deserialization).写在流里的是对象的一个克隆(新的, 独立的), 而原对象仍存在于JVM内存模型里.因此, 以下代码采用序列化方式实现深度克隆. 第一步: 将上篇的代码做些许改动, 加入对象引用

设计模式05： Prototype 原型模式（创建型模式）

Prototype 原型模式(创建型模式) 依赖关系的倒置抽象不应该依赖于实现细节,细节应该依赖于抽象.对所有的设计模式都是这样的. -抽象A直接依赖于实现细节b -抽象A依赖于抽象B,实现细节b依赖于抽象B 动机(Motivation) 在软件工程中,经常面临着“某些结构复杂的对象”的创建工作:由于需求变化,这些对象经常面临着剧烈的变化,但是它们却拥有比较稳定一致的接口. 如何应对这种变化?如何向“客户程序(使用这些对象的程序)”隔离出这些“易变对象”,从而使得“依赖这些易变对象的客户程序”不

5.设计模式----prototype原型模式

原型模式:做到是原型,那肯定是自己本身才是原型,原型模式属于对象的创建模式. 关于原型模式的实现方式分2种: (1)简单形式.(2)登记形式,这两种表现形式仅仅是原型模式的不同实现. 1 package inter.method; 2 /** 3 * 提供一个具有复制本身的接口 4 * @author zengrong 5 * 6 */ 7 public interface Prototype { 8 9 public Object clone(); 10 } 1 package impl.me

深入浅出设计模式 ------ Prototype(原型模式)

一. 定义  用原型实例指定创建对象的种类. 并且通过拷贝这些原型创建新的对象. 二. 结构  三. 参与者 Prototype : 克隆自身的接口(如代码实现中的FruitPrototype) PrototypeTool : 管理Prototype的工具类, 存储原型复制自身到数据接口(如FruitTool) ConcretePrototype : 实现一个克隆自身的操作(如ConcteteFruitPrototype) Client : 测试类 四. 适用性 -- 多用于创建复杂的或者耗时的

浅析设计模式（八）——创建型模式之Prototype(原型模式)

原型模式Prototype 本文的内容: 一.原型模式的定义 二.原型模式的参与者及其角色 三.原型模式的类图 四.原型模式的示例 五.参考 一.原型模式的定义 定义:用原型实例指定创建对象的实例,并且通过拷贝这些原型创建新的对象. 使用现有的对象,生成一个完全一样的拷贝(副本,内部属性值一样,而内存地址不一样),但是这个拷贝和原对象不共用任何内部属性元素,即实现了对象的深度克隆.这个"拷贝"的精确含义取决于该对象的类,一般含义是: 对任何的对象x,都有:x.clone()!=x.换言

一天一个设计模式——Prototype 原型模式

一.模式说明 看了比较多的资料,对原型模式写的比较复杂,个人的理解就是模型复制,根据现有的类来直接创建新的类,而不是调用类的构造函数. 二.原型模式的类图 三.原型模式中的角色 原型(Protype)角色:负责定义复制现有实例生成新实例的方法 具体原型(ConcretePrototype)角色:负责实现复制现有实例生成新实例的方法 使用者(Client)角色:负责使用复制实例的方法生成新实例 四.代码示例 1.Product类: package com.designpattern.cn.prot

C#面向对象设计模式纵横谈——6.Prototype 原型模式(创建型模式)

动机(Motivation) 在软件系统中,经常面临着“某些结构复杂的对象”的创建工作.由于需求的变化,这些对象经常面临着剧烈的变化,但他们却拥有比较稳定一致的接口. 如何应对这种变化?如何向“客户程序(使用这些对象的)”隔离出“这些易变对象”,从而使得“依赖这些易变对象的客户程序”不随着需求的改变而改变. 意图(Intent) 使用原型实例指定创建对象的种类,然后通过拷贝这些原型来创建新的对象.   ----<设计模式> GOF 结构(Structure)