您的位置:首页 > Web前端 > JavaScript

javascript 创建对象的7种模式

2015-07-30 11:37 615 查看
使用字面量方式创建一个 student 对象:

var student = function (){
name : "redjoy",
age : 21,
sex: women,
sayName: function(){
alert(this.name);
}
};


使用Object.defineProperties() 方法给对象添加属性:(只有IE9+,FF4+,SF5+,OP 12+,Chrome支持)

var student = {};
Object.defineProperties( student,{
name:{
value: "redjoy"
},
age:{
value: 21
},
_year:{
value:2015
},
year:{
get:function(){
return  this._year;
},
set:function(newValue){
if (newValue > 2015){
this._year = newValue;
this.age += newValue -1993;
}
}
}
});


当面对使用Object构造函数和对象字面量创建单个对象时,我们会因为使用同一个接口创建很多对象,产生大量的重复代码。所以,有了创建对象的七种模式:

一、工厂模式(抽象了创建具体对象的过程)

function createStudent(name,age,sex){
var s = new Object();
s.name = name ;
s.age = age ;
s.sex = sex;
s.sayName = function (){
console.log(this.name);
};
return s;
}

var student1 = createStudent("redjoy",21,"women");
var student2 = createStudent("jonny",23,"man");


二、构造函数模式

重写上面的例子:

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

var student1 = new Student("redjoy",21,"women");
var student2 = new Student("jonny",23,"man");


与工厂模式相比,构造函数模式可以将它的实例标示为一种特定的类型。

三、原型模式

function Student(){
}//构造函数

Student.prototype = {
name :"redjoy",
age : 21,
sex : "women",
sayName : function(){
console.log(this.name);
}
};

var student1 = new Student();
var student2 = new Student();


四、组合使用构造函数模式和原型模式(最常见的方式)

优点:构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。

function Student(name ,age ,sex ){
this.name = name ;
this.age = age ;
this.sex = sex;
}//在构造函数里定义实例属性

Student.prototype = {
constructor : Student,
sayName : funtion(){
console.log(this.name);
}
}//在原型中定义constructor属性和sayName()方法

var student1 = new Student("redjoy",21,"women");
var student2 = new Student("jonny",23,"man");

console.log(student1.sayName === student2.sayName);//true


五、动态原型模式

优点:把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),同时还保持了构造函数和原型的优点。

function Student(name , age ,sex ){
//属性
this.name = name;
this.age = age;
this.sex = sex;
//方法
if (typeof this.sayName != "function"){
Student.prototype.sayName = function(){
console.log(this.name);
};
}
}
var student = new Student("redjoy",21,"women");
student.sayName();


注意:在使用动态原型模式时,不能使用对象字面量重写原型。

六、寄生构造函数模式

function Student(name , age,sex){
var s = new Object();
s.name = name;
s.age = age;
s.sex = sex;
s.sayName = function(){
console.log(this.name);
};
return s;
}

var student = new Student("redjoy",21,"women");
student.sayName();//"redjoy"


七、稳妥构造函数模式

稳妥对象:指的是没有公告属性,而且其方法也不引用this的对象。

与寄生构造函数模式类似,但存在两点不同:

1. 新创建对象的实例方法不用this

2. 不是要new 操作符调用构造函数

重写上面的例子:

function Student( name, age ,sex ){
//创建要返回的对象
var s = new Object();
//可以在这里定义私有变量和函数与上面类似
//添加方法
s.sayName = function(){
console.log(name);
};

//返回对象
return s;
}


可根据每个创建对象的模式来选择适合自己的方法,创建对象

(以上作为自己的个人笔记,参考来源于 javascript高级程序设计 第三版)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: