原型模式(一)

原型模式(一)

在Javascript中一切皆是对象,所以我们会创建很多对象。那么就来看看创建对象的方法.原型模式也是解决创建对象的问题的。解决了什么问题,首先看下面几种创建对象模式所带来的问题。

工厂模式

    function createPerson(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.sayName = function(){
            console.log(this.name);
        }
        return obj;
    }

    var  person1= createPerson('p1', 20);
    var  person2= createPerson('p2', 30);

用函数封装创建对象的细节。当做普通函数使用,返回创建的对象。

问题:

这样创建的对象无法区分出来类别。比如又有一个动物对象的工厂,和这个完全一样，根本无法区别。

构造函数模式

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayName = function(){
            console.log(this.name);
        }
    }

    var person1 = new Person('p1', 20);
    var person2 = new Person('p2', 30);
    console.log(person1.constructor == Person);//true
    console.log(person1 instanceof  Person)//true

和工厂模式的区别,Person不再是一个普通函数,而是一个构造函数,外面显示调用new,创建对象,而且解决了工厂模式带来的问题,但是产生了新的问题。

问题

大家都知道js中一切皆对象,那么上述的sayName方法,每个对象都自己独有一个。那么可不可以做到对象可以共享方法和属性呢

原型模式

    function Person(){}
    Person.prototype.name = "pl";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log(this.name);
    }

    var person1 = new Person();
    var person2 = new Person();
    person1.sayName();//pl
    person2.sayName();//pl

创建的每个函数都有一个prototype原型属性,这个属性是一个指针,执行一个对象,而这个对象就是原型对象。包含了所有实例共享的属性和方法。

如下图所示:

    console.log(Person.prototype);//输出Person的原型对象
    console.log(Person.prototype.isPrototypeOf(person1));//true
    console.log(Object.getPrototypeOf(person1) == Person.prototype)//true
    console.log(person1.__proto__  == Person.prototype);//true

上图展示了Person构造函数,Person原型属性以及Person实例之间的关系.Person.prototype属性指向原型对象，原型对象有个constructor属性指向构造函数。实例都包含一个属性__proto__,指向原型对象。可以用Object.getPrototypeOf(obj)得到对象的原型对象,也可以用原型对象的isPrototypeOf确定对象是否是原型对象的对象。

查看源码:

Person的值:

对象person1的值

对象person2的值

问题:

原型模式解决了方法和属性共享,但是如果属性是引用类型,如Array,Object。则会带来新的问题。

    function Person(){
    }
    Person.prototype.name = "pl";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
    Person.prototype.friends = ['f1','f2'];

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

    console.log(person1.friends);//[ 'f1', 'f2' ]
    person1.friends.push('f3');
    console.log(person2.friends);//[ 'f1', 'f2', 'f3' ]

上述中friends这个属性,是共享属性.当实例person1改变其值的时候,也会影响实例person的值。

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

    function Person(friends){
        this.friends = friends;
    }
    Person.prototype.name = "pl";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log(this.name);
    }

    var person1 = new Person(['f1','f2']);
    var person2 = new Person(['f1','f2']);

    console.log(person1.friends);//[ 'f1', 'f2' ]
    person1.friends.push('f3');
    console.log(person2.friends);//[ 'f1', 'f2']

组合使用构造函数模式与原型模式,是最常见的使用方式,能够使用构造函数和原型模式的优势。

常用的方法

    function Person(job){
        this.job = job;
    }
    Person.prototype.name = "pl";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log(this.name);
    }

hasOwnProperty

检查对象的属性是否属于对象自有的,如果是原型对象的属性false.

    var person1 = new Person('job1');
    //obj.hasOwnProperty()
    console.log(person1.hasOwnProperty('job'));//true
    console.log(person1.hasOwnProperty('name'));//true

in

检查某属性是否存在,只要存在返回true（不区分原型对象和构造函数）

    console.log('name' in person1);//true
    console.log('job' in person1);//true
    console.log('salay' in person1);//false

keys

获取对象可枚举的属性,区分原型对象和构造函数。getOwnPropertyNames得到所有属性,包括不可枚举的

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