js高程3--第6章面向对象的程序设计--第二节创建对象,批量创建对象有很多种模式,每一种模式都有自己的优点与缺点,搞清楚它们出现的历史原因,优缺点,我们才能使用的更加游刃有余!
本片文章并没有将细节的挖的特别深,重点关注的是每种模式的优缺点,怎么形成的。细节会另写博客总结。
正文开始
我们都知道创建单个对象
有两种方法,构造函数
和字面量
的形式。
var obj = new Object(); //构造函数
var obj1 = {}; //字面量
如果我们想要创建多个对象
,这两种形式就有明显的缺点:每一个新对象都要手写生成,会产生大量重复的代码!
为了解决这个问题,聪明的程序员开始使用工厂模式
。
用函数来封装以特定接口创建对象的细节
function createPerson(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayName = function(){
alert(this.name);
}
return obj;
}
var zhangsan = creatPerson('zhangsan',18);
优点:解决了创建多个相似对象,代码重复问题
缺点:没有解决对象识别问题,即不知道当前对象的类型,一直都是Object类型
随着javascript的发展,又一个新的模式出现了!
ECMAScript中的构造函数可以用来创建特定类型的对象。
类似Object,Array这种原生的构造函数,我们可以使用new Object()
,new Array()
来创建对象类型
或者数组类型
的对象。
同样我们可以构建自定义类型的构造函数
,定义自定义类型的属性和方法。
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
}
}
var zhangsan = new Person('zhangsan',18);
优点:可以使用instanceof,isPrototypeOf用来识别对象的类型
缺点 :每个方法都要在每个实例上重新创建一遍,浪费内存。
有人觉得既然实例的sayName函数的作用相同,就没有必要提前把函数绑定到构造函数中,可以这样
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName(){ //变为全局函数
alert(this.name);
}
var zhangsan = new Person('zhangsan',18);
看似很好的解决了每次都重新创建的问题,但是这样又延伸出一个新的让人无法接受的问题,全局变量污染,这样根本没有封装性可言。
very lucky!这些问题都可以通过原型模式
解决。
function Person(){}
Person.prototype.name = 'zhang';
Person.prototype.age = 18;
Person.prototype.sayName = function(){
alert(this.name);
}
这样每一个实例的__proto__
属性引用Person
的原型属性地址,共用一个原型对象。
但是上面的写法每次添加属性都要Person.prorotype很麻烦,可以使用下面字面量的形式
。
function Person(){}
Person.prototype = {
name:'zhang',
age:18,
sayName:function(){
alert(this.name);
}
}
var zhang = new Person();
但是字面量的写法会切断原型链,尽管这里使用instanceof
,isPrototypeOf
仍然可以判断实例的类型,
但是我们通过zhang.constructor
得到的是Object,而不再是Person
了,因为我们改变了Person的原型属性默认的地址,新地址constructor属性是不存在的。
所以为了是原型链完整,可以使用下面的形式
function Person(){}
// 也可在这里直接添加constructor,
// 只不过constructor属性特征跟默认的(不可枚举)是不一样的
Person.prototype = {
name:'zhang',
age:18,
sayName:function(){
alert(this.name);
}
}
// 手动添加构造函数属性,保证原型链完整,
Object.defineProperty(Person.prototype,'constructor',{
value:Person,
enumerable:false,
})
var zhang = new Person();
但是,这样还是会有问题,所有的实例都是一样的属性和方法,没有私人属性和方法,这当然不是我们想要的。
解决这个问题很简单,把构造函数模式
和原型模式
混合使用
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
sayName:function(){
alert(this.name);
}
}
var zhang = new Person();
// 手动添加构造函数属性,保证原型链完整,
Object.defineProperty(Person.prototype,'constructor',{
value:Person,
enumerable:false,
})
Perfect!!!这种组合构造函数和原型模式是目前使用最为广泛的模式,可以说是创建自定义类型的默认模式了。
但是,-_-,哈哈 心中一万只神兽,竟然还有但是!!!
严格面向对象的语言使用者看见这种形式会非常懵逼,说好的封装,竟然不把所有信息封装在构造函数里面,竟然还有独立的原型,wtf!
程序员嘛,多少会有点的强迫症。
这个模式非常的巧妙,第一次看见非常的兴奋。
function Person(name,age){
this.name = name;
this.age = age;
// 第一次初始化构造函数的时候执行,之后不再执行
// 这里的属性判断随便一个原型属性都可以
if(typeof this.sayName != 'function'){
Person.prototype = {
sayName:function(){
alert(this.name);
}
}
}
}
var zhang = new Person();
当得了当~~~,如果不加这个判断,每次实例化都执行一遍原型是不现实的,加个判断完美解决了这个问题,这种解决问题的思想是值得非常借鉴的,可以应用到我们的实际开发中。
还没有搞明白,待续
还没有搞明白,待续
要真正搞清楚对象这一块,需要清楚一下几个知识点:
Object
instanceof
getPrototypeOf
isPrototypeOf
hasOwnProperty
defineProperty
in
本人能力有限,理解的不对的欢迎指正!
原文:https://www.cnblogs.com/zhanghaoqi/p/11369727.html