javascript面向对象系列——创建对象的5种模式

如何创建对象，或者说如何更优雅的创建对象，一直是一个津津乐道的话题。本文将从最简单的创建对象的方式入手，逐步介绍5种创建对象的模式

对象字面量

　　一般地，我们创建一个对象会使用对象字面量的形式

　　[注意]有三种方式来创建对象，包括new构造函数、对象直接量和Object.create()函数

var person1 = {
    name: "bai",
    age : 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};

　　如果我们要创建大量的对象，则如下所示：

var person1 = {
    name: "bai",
    age : 29,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};
var person2 = {
    name: "hu",
    age : 25,
    job: "Software Engineer",
    sayName: function(){
        alert(this.name);
    }
};
/*
var person3 ...
*/

虽然对象字面量可以用来创建单个对象，但如果要创建多个对象，会产生大量的重复代码

工厂模式

　　为了解决上述问题，人们开始使用工厂模式。该模式抽象了创建具体对象的过程，用函数来封装以特定接口创建对象的细节

function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayname = function(){
        alert(this.name);
    }
    return o;
}
var person1 = createPerson(‘bai‘,29,‘software Engineer‘);
var person2 = createPerson(‘hu‘,25,‘software Engineer‘);

工厂模式虽然解决了创建多个相似对象的问题，但没有解决对象识别的问题，因为使用该模式并没有给出对象的类型

构造函数模式

　　可以通过创建自定义的构造函数，来定义自定义对象类型的属性和方法。创建自定义的构造函数意味着可以将它的实例标识为一种特定的类型，而这正是构造函数模式胜过工厂模式的地方。该模式没有显式地创建对象，直接将属性和方法赋给了this对象，且没有return语句

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");

使用构造函数的主要问题是每个方法都要在每个实例上重新创建一遍，创建多个完成相同任务的方法完全没有必要，浪费内存空间

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = function(){
        alert(this.name);
    };
}
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
//具有相同作用的sayName()方法在person1和person2这两个实例中却占用了不同的内存空间
console.log(person1.sayName === person2.sayName);//false

构造函数拓展模式

　　在构造函数模式的基础上，把方法定义转移到构造函数外部，可以解决方法被重复创建的问题

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.jog = job;
    this.sayName = sayName;
}
function sayName(){
    alert(this.name);
};
var person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
console.log(person1.sayName === person2.sayName);//true

现在，新问题又来了。在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而且，如果对象需要定义很多方法，就要定义很多全局函数，严重污染全局空间，这个自定义的引用类型没有封装性可言了

寄生构造函数模式

　　该模式的基本思想是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新创建的对象。该模式是工厂模式和构造函数模式的结合

　　寄生构造函数模式与构造函数模式有相同的问题，每个方法都要在每个实例上重新创建一遍，创建多个完成相同任务的方法完全没有必要，浪费内存空间

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 person1 = new Person("bai",29,"software Engineer");
var person2 = new Person("hu",25,"software Engineer");
//具有相同作用的sayName()方法在person1和person2这两个实例中却占用了不同的内存空间
console.log(person1.sayName === person2.sayName);//false

还有一个问题是，使用该模式返回的对象与构造函数之间没有关系。因此，使用instanceof运算符和prototype属性都没有意义。所以，该模式要尽量避免使用

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 person1 = new Person("bai",29,"software Engineer");
console.log(person1 instanceof Person);//false
console.log(person1.__proto__ === Person.prototype);//false

稳妥构造函数模式

　　所谓稳妥对象指没有公共属性，而且其方法也不引用this的对象。稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new)或者在防止数据被其他应用程序改动时使用

　　稳妥构造函数与寄生构造函数模式相似，但有两点不同：一是新创建对象的实例方法不引用this；二是不使用new操作符调用构造函数

function Person(name,age,job){
    //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName = function(){
        console.log(name);
    };
    //返回对象
    return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("bai",29,"Software Engineer");
friend.sayName();//"bai"

与寄生构造函数模式相似，使用稳妥构造函数模式创建的对象与构造函数之间也没有什么关系，因此instanceof操作符对这种对象也没有什么意义

原型模式

使用原型对象，可以让所有实例共享它的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中

function Person(){
    Person.prototype.name = "bai";
    Person.prototype.age = 29;
    Person.prototype.job = "software Engineer";
    Person.prototype.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person();
person1.sayName();//"bai"
var person2 = new Person();
person2.sayName();//"bai"
alert(person1.sayName == person2.sayName);//true

更简单的原型模式

　　为了减少不必要的输入，也为了从视觉上更好地封装原型的功能，用一个包含所有属性和方法的对象字面量来重写整个原型对象

　　但是，经过对象字面量的改写后，constructor不再指向Person了。因为此方法完全重写了默认的prototype对象，使得Person.prototype的自有属性constructor属性不存在，只有从原型链中找到Object.prototype中的constructor属性

function Person(){};
Person.prototype = {
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//false
console.log(person1.constructor === Object);//true

可以显式地设置原型对象的constructor属性

function Person(){};
Person.prototype = {
    constructor:Person,
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//true
console.log(person1.constructor === Object);//false

由于默认情况下，原生的constructor属性是不可枚举的，更妥善的解决方法是使用Object.defineProperty()方法，改变其属性描述符中的枚举性enumerable

function Person(){};
Person.prototype = {
    name: "bai",
    age: 29,
    job: "software Engineer",
    sayName : function(){
        console.log(this.name);
    }
};
Object.defineProperty(Person.prototype,‘constructor‘,{
    enumerable: false,
    value: Person
});
var person1 = new Person();
person1.sayName();//"bai"
console.log(person1.constructor === Person);//true
console.log(person1.constructor === Object);//false

原型模式问题在于引用类型值属性会被所有的实例对象共享并修改，这也是很少有人单独使用原型模式的原因

function Person(){}
Person.prototype = {
    constructor: Person,
    name: "bai",
    age: 29,
    job: "Software Engineer",
    friend : ["shelby","Court"],
    sayName: function(){
        console.log(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

组合模式

　　组合使用构造函数模式和原型模式是创建自定义类型的最常见方式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本，同时又共享对方法的引用，最大限度地节省了内存。该模式是目前使用最广泛、认同度最高的一种创建自定义对象的模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["shelby","Court"];
}
Person.prototype = {
    constructor: Person,
    sayName : function(){
        console.log(this.name);
    }
}
var person1 = new Person("bai",29,"Software Engineer");
var person2 = new Person("hu",25,"Software Engineer");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person2.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

动态原型模式

　　动态原型模式将组合模式中分开使用的构造函数和原型对象都封装到了构造函数中，然后通过检查方法是否被创建，来决定是否初始化原型对象

　　使用这种方法将分开的构造函数和原型对象合并到了一起，使得代码更加整齐，也减少了全局空间的污染

　　[注意]如果原型对象中包含多个语句，只需要检测其中一个语句即可

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("bai",29,"Software Engineer");
friend.sayName();//‘bai‘

最后

　　本文从使用对象字面量形式创建一个对象开始说起，创建多个对象会造成代码冗余；使用工厂模式可以解决该问题，但存在对象识别的问题；接着介绍了构造函数模式，该模式解决了对象识别的问题，但存在关于方法的重复创建问题；接着介绍了原型模式，该模式的特点就在于共享，但引出了引用类型值属性会被所有的实例对象共享并修改的问题；最后，提出了构造函数和原型组合模式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，这种组合模式还支持向构造函数传递参数，该模式是目前使用最广泛的一种模式

　　此外，一些模式下面还有一些解决特殊需求的拓展模式

原文地址：https://www.cnblogs.com/bore/p/9019096.html

时间： 2024-10-21 08:46:40

javascript面向对象系列——创建对象的5种模式的相关文章

javascript面向对象系列第三篇——实现继承的3种形式

前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种继承方式.本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,如new和instanceof.不过在后来的ES6中新增了一些元素,比如class关键字,但这并不

javascript 创建对象的7种模式

使用字面量方式创建一个 student 对象: 1 var student = function (){ 2 name : "redjoy", 3 age : 21, 4 sex: women, 5 sayName: function(){ 6 alert(this.name); 7 } 8 }; 使用Object.defineProperties() 方法给对象添加属性:(只有IE9+,FF4+,SF5+,OP 12+,Chrome支持) 1 var student = {}; 2

JavaScript中创建对象的几种模式

看了js高级程序设计的第六章,很多知识.关于创建对象的几种模式,这里记录一下. 1.工厂模式 1 function createPerson(name, age, job) { 2 var o = new Object(); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function() { 7 return this.name; 8 }; 9 return o; 10 } 没有解决对象识别的问题,不能知道一个对象的

javascript面向对象系列5——知识点(原型和原型链)

基本概念 [原型链]每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,如果原型对象等于另一个原型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针.如果另一个原型又是另一个原型的实例,那么上述关系依然成立.如此层层递进,就构成了实例与原型的链条. [原型对象]这个对象包含可以由特定类型的所有实例共享的属性和方法.所有引用类型默认都继承了Object,而这个继承也是通过原型链实现

js创建对象的几种模式

//javaScript创建对象的几种模式特点 /*//1 工厂模式function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=function() { alert(name); }} createPerson("Tom",18,"Teachaer");createPerson("Jack",20,"Student"

javascript面向对象系列第二篇——创建对象的5种模式

× 目录 [1]字面量 [2]工厂模式 [3]构造函数[4]原型模式[5]组合模式 前面的话 如何创建对象,或者说如何更优雅的创建对象,一直是一个津津乐道的话题.本文将从最简单的创建对象的方式入手,逐步介绍5种创建对象的模式 [1]对象字面量 一般地,我们创建一个对象会使用对象字面量的形式 [注意]有三种方式来创建对象,包括new构造函数.对象直接量和Object.create()函数,详细情况移步至此 var person1 = { name: "bai", age : 29, jo

javascript创建对象的几种模式

虽然Object构造函数或者对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象会产生大量的重复代码.为了解决这个问题,人们开始使用工厂模式的一种变体. 1.工厂模式 function createPerson(name, age, job){ var o=new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; retu

JavaScript中创建对象的7种模式

ECMA-262把对象定义为:"无需属性的集合,其属性可以包含基本值.对象或者函数."严格来讲,这就相当于说明对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数. 创建自定义对象最简单的方式就是创建一个Object的实例,然后再为他添加属性和方法,如下所示: var person = new Object(); person.name = &qu

js中面向对象（创建对象的几种方式）

1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 注:本文引用于 http://www.cnblogs.com/yuxingyoucan/p/5797142.html 一.创建对象的几种方式 javascript 创建对象简单的来说,无非就是使用内置对象或各种自定义对象,当然还可以使用JSON,但写法有很多,也能混合使用. 1.工厂方式创建对象:面向对象中的封装函数(内置对象) function cr