面向对象的程序设计-原型模式

原型模式

---

 

我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法，通俗的讲，prototype就是通过构造函数创建的实例对象的原型对象，使用原型对象的好处是可以让所有的实例对象共享它的属性和方法

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    var person1 = new Person();
    person1.sayName(); //Nicholas

    var person2 = new Person();
    person2.sayName(); //Nicholas

    console.log(person1.sayName == person2.sayName); //true

 

1、理解原型对象
无论什么时候，只要创建了一个新的函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，原型对象有一个constructor属性，指向prototype属性所在的函数指针

isPrototypeOf()方法可以确定对象之间是否存在这种关系

 

    console.log(Person.prototype.isPrototypeOf(person1)); //true

 

ECMAScript5新增加了一个方法Object.getPrototypeOf()

 

console.log(Object.getPrototypeOf(person1));//Object {name: "Nicholas", age: 29, job: "Software Engineer"}

 

每当代码读取某个对象的某个属性时，都会执行一次搜索。首先搜索从对象实例本身开始。如果在实例对象本身找到了具有给定名字的属性，则返回该属性的值，如果没有找到，在继续搜索指针指向的原型对象

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例改写原型中的值,使用delete可以完全删除实例属性，从而让我们能够重新访问原型中的属性

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    var person1 = new Person();

    var person2 = new Person();

    person1.name = "Greg";
    console.log(person1.name); //Greg
    console.log(person2.name); //Nicholas

    delete person1.name;
    console.log(person1.name); //Nicholas

 

hasOwnProperty()方法可以检测一个属性是否在实例中，还是在原型中，在实例中返回true

 

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.hasOwnProperty("name")); //false
    person2.name = "Greg";
    console.log(person2.hasOwnProperty("name")); //true

 

2、原型与in操作符

有两种方式使用in操作符，单独使用和在for-in中使用，单独使用时，in操作符在通过对象能够访问到指定属性时返回true，无论在实例中还是在原型中

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.hasOwnProperty("name")); //false
    console.log("name" in person1); //true
    person1.name = "Greg";
    console.log(person1.hasOwnProperty("name")); //true
    console.log("name" in person1); //true

 

同时使用hasOwnProperty()和in操作符，就可以确定该属性到底是存在于实例中还是存在于原型中

 

    function hasPrototypeProperty(object,name){
        return (!object.hasOwnProperty(name) && (name in object));
    }

    //hasPrototypeProperty()返回true则表示该属性在原型中

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    var person3 = new Person();
    console.log(hasPrototypeProperty(person3,"job")); //true
    person3.job = "Teacher";
    console.log(hasPrototypeProperty(person3,"job")); //false

 

 

在使用for-in循环时，返回的是所有能够通过对象访问的，可枚举属性，其中包括在实例中的属性、原型中的属性、屏蔽了原型中不可枚举属性的实例属性。

要取得对象上所有可枚举的属性，可以使用ECMAScript5的Object.keys()方法，这个方法接受一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。

    function Person(){
        Person.prototype.name = "Nicholas";
        Person.prototype.age = 29;
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    };

    // Object.defineProperties(Person.prototype,{
    //     name:{
    //         enumerable: true,
    //     },
    //     age:{
    //         enumerable: true,
    //     },
    // });

    var keys = Object.keys(Person.prototype);
    console.log(keys);
    var person1 = new Person();
    person1.name = "Greg";
    person1.age = 22;
    var person1Keys = Object.keys(person1);
    console.log(person1Keys);

 

如果想要得到所有的实例属性，无论它是否可枚举，都可以使用Object.getOwnPropertyNames()方法

    var keys = Object.getOwnPropertyNames(Person.prototype);
    console.log(keys); //["constructor", "name", "age", "job", "sayName"]

 

 

3、更简单的原型语法
是用一个包含所有属性和方法的对象字面量来重写整个原型对象

    function Person(){

    }

    Person.prototype = {
        name : "Nicholas",
        age : 29,
        job : "SoftWare Engineer",
        sayName : function(){
            console.log(this.name);
        },
    };

 

这里使用的语法，本质上完全重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object构造函数），此时尽管instanceof操作符还能返回正确的结果，但通过constructor已经无法确定对象的类型了

    var friend = new Person();

    console.log(friend instanceof Object); //true
    console.log(friend instanceof Person); //true
    console.log(friend.constructor == Person); //false
    console.log(friend.constructor == Object); //true

可见此时的constructor属性等于Object,如果constructor的值很重要，可以将它设置为适当的值

    function Person(){

    }

    Person.prototype = {
        constructor : Person,
        name : "Nicholas",
        age : 29,
        job : "SoftWare Engineer",
        sayName : function(){
            console.log(this.name);
        },
    };

注意：以这种方式重设constructor属性会导致他的[[Enumerable]]特性被设置为true。默认情况下，原生的
constructor属性是不可枚举的

 

4、原型的动态性

    var friend = new Person();
    Person.prototype.sayHi = function(){
        alert("hi");
    };
    friend.sayHi(); //hi

 

虽然friend实例是在添加新方法之前创建的，但是它可以访问这个方法，原因在于每当代码读取某个对象的某个属性时，都会执行一次搜索。首先搜索从对象实例本身开始。如果在实例对象本身找到了具有给定名字的属性，则返回该属性的值，如果没有找到，在继续搜索指针指向的原型对象

尽管可以随时为原型添加属性和方法，并且修改能够立即在所有对象实例中反映出来，如果是重新写整个原型对象，那么情况就不一样了

    function Person(){
    }

    var friend = new Person();

    Person.prototype = {
        constructor : Person,
        name : "Nicholas",
        age : 29,
        job : "SoftWare Engineer",
        sayName : function(){
            console.log(this.name);
        },
    };

    friend.sayName(); //error

 

 

5、原生对象模型
通过对原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法

    String.prototype.ll = function(text){
        return text.length;
    };
    var msg = "Hello";
    console.log(msg.ll("SoftWare")); //8

 

6、原型对象的问题
首先，它省略了为构造函数传递参数这一环节，结果所有的实例在默认情况下都将取得相同的属性值。原型模式最大的问题是由共享的本性所导致的，对于包含基本值的属性可以再实例中添加一个同名属性而对于包含引用类型的属性来说，问题就比较突出了

    function Person(){
    }

    Person.prototype = {
        constructor : Person,
        name : "Nicholas",
        age : 29,
        job : "SoftWare Engineer",
        friend : ["Shelby","Court"],
        sayName : function(){
            console.log(this.name);
        },
    };

    var person1 = new Person();
    var person2 = new Person();

    person1.friend.push("Van");
    console.log(person1.friend); //["Shelby", "Court", "Van"]
    console.log(person2.friend); //["Shelby", "Court", "Van"]
    console.log(person1.friend ==person2.friend); //true

而这个问题正是我们看到很少有人单独使用原型模式的原因所在

 

组合使用构造函数模式和原型模式

---

 

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friend = ["Shelby","Court"];
    }

    Person.prototype = {
        constructor : Person,
        sayName : function(){
            console.log(this.name);
        },
    };

    var person1 = new Person();
    var person2 = new Person();

    person1.friend.push("Van");
    console.log(person1.friend); //["Shelby", "Court", "Van"]
    console.log(person2.friend); //["Shelby", "Court"]
    console.log(person1.sayName === person2.sayName); //true

 

这是目前在ECMAScript中使用最广泛的一种创建自定义类型的方法，可以说，这是用来定义引用类型的一种默认模式

动态原型模式

---

把所有信息都封装在构造函数中，而通过在构造函数中初始化原型，又保持了同时使用构造函数和原型的优点

 

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        if(typeof this.sayName != "function"){  //只有在初次调用构造函数时才会执行
            Person.prototype.sayName = function(){
                console.log(this.name);
            };
        };
    };

    var friend = new Person("Nicholas",29,"Software Engineer");
    friend.sayName(); //Nicholas

 

 寄生构造函数模式

---

 

    function Person(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            console.log(this.name);
        };
        return o;
    }

    var friend = new Person("Nicholas",29,"Software Engineer");
    friend.sayName(); //Nicholas

 

   这个模式在特殊情况下来为对象创建构造函数，假设我们想创建一个具有额外方法的特殊数组

    function SpecialArray(){
        var values = new Array();
        values.push.apply(values,arguments);
        values.toPipedString = function(){
            return this.join("|");
        };
        return values;
    };

    var colors = new SpecialArray("red","blue","green");
    console.log(colors.toPipedString()); //red|blue|green

 

稳妥构造函数模式

---

 所谓稳妥对象，值得是没有公共属性，而且其方法也不引用this对象

   function Person(name,age,job){

       //创建要返回的对象
       var o = new Object();

       //可以再这里定义私有变量和函数

       //添加方法
       o.sayName = function(){
           console.log(name);
       };

       //返回对象
       return o;

   };

   var friend = Person("Nicholas",29,"Software Engineer");
   friend.sayName(); //Nicholas

  这样，变量friend中保存着一个稳妥对象，而除了调用sayName()方法外，没有别的方式可以访问其数据成员。