原型模式(一)
在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' ]
网友评论