js创建对象的方式

255 阅读3分钟

创建对象的方式

  1. 对象字面量
  2. 构造函数
  3. 工厂模式
  4. 构造函数模式
  5. 原型模式
  6. 组合模式
  7. 动态原型模式
  8. 寄生构造函数模式
  9. 稳妥构造函数模式

逐项说明

一、对象字面量

var obj = {};

实例特性:对象之间相互独立

  • 优势:代码简洁
  • 劣势:使用同一个接口创建多个对象会产生很多重复代码

二、构造函数

var obj = new Object();

实例特性:对象之间相互独立

  • 优势:代码简洁
  • 劣势:使用同一个接口创建多个对象会产生很多重复代码

三、工厂模式

function createObj(name, list) {
    var o = new Object();
    o.name = name;
    o.list = list;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}
var obj1 = createObj('obj1Name', [1]);
var obj2 = createObj('obj2Name', [1, 2]);
obj2.list.push(3);
console.log(obj1.list, obj2.list);      // [1] [1, 2, 3]
console.log(obj1.sayName === obj2.sayName);     // false

实例特征:对象之间相互独立,不共享属性和方法

  • 优势:抽象创建对象的流程
  • 劣势:无法识别对象的类型

四、构造函数模式

function Obj(name, list) {
    this.name = name;
    this.list = list;
    this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}
var obj1 = new Obj('obj1Name', [1]);
var obj2 = new Obj('obj2Name', [1, 2]);
obj2.list.push(3);
console.log(obj1.list, obj2.list);      // [1] [1, 2, 3]
console.log(obj1.sayName === obj2.sayName);     // true

实例特征:对象之间相互独立,但可有共享的方法(全局中)

  • 优势:避免显式地创建对象,直接将属性和方法赋给this对象,避免了return
  • 劣势:全局作用域下定义多个对象的函数并不合理
构造函数与函数的区别:
构造函数:大写字母开头,new操作符调用
普通函数:小写字母开头,正常调用(this对象指向当前作用域所属的对象)
使用new操作符创建特定类型的对象:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(this指向的新对象)
3. 执行构造函数中的代码(添加属性)
4. 返回新对象

五、原型模式(所有原生的引用类型均采用此模式创建的)

function Obj() {}
Obj.prototype = {
    constructor: Obj,
    name: 'obj1Name',
    list: [1, 2],
    sayName: function() {
        alert(this.name);
    }
}
var obj1 = new Obj();
var obj2 = new Obj();
obj2.list.push(3);
console.log(obj1.list, obj2.list);      // [1, 2, 3] [1, 2, 3]
console.log(obj1.sayName === obj2.sayName);     // true

实例特性:对象间共享属性和方法,失去独立性

  • 优势:原型中所有属性和方法均共享,不必在构造函数中定义对象信息
  • 劣势:属性共享造成对象间失去独立性

六、组合模式(构造函数模式+原型模式,创建自定义类型最常见的方式)

function Obj(name) {
    this.name = name;
    this.list = [1, 2];
}
Obj.prototype = {
    constructor: Obj,
    sayName: function() {
        alert(this.name);
    }
}
var obj1 = new Obj('obj1Name');
var obj2 = new Obj('obj2Name');
obj2.list.push(3);
console.log(obj1.list, obj2.list);      // [1, 2] [1, 2, 3]
console.log(obj1.sayName === obj2.sayName);     // true

实例特性:对象间既有共享的方法或属性,又有独立的方法或属性。

  • 优势:利用构造函数模式定义属性(支持传参),利用原型模式定义共享的方法和属性
  • 劣势:每次创建对象都要初始化原型对象,缺乏封装性

七、动态原型模式(个人认为最佳)

function Obj(name) {
    this.name = name;
    this.list = [1, 2];
    if(typeof this.sayName !== 'function') {
        Obj.prototype.sayName = function() {
            alert(this.name);
        }
    }
}
var obj1 = new Obj('obj1Name');
var obj2 = new Obj('obj2Name');
obj2.list.push(3);
console.log(obj1.list, obj2.list);      //  [1, 2] [1, 2, 3]
console.log(obj1.sayName === obj2.sayName);     // true

实例特性:对象间既有共享的方法或属性,又有独立的方法或属性。

  • 优势:代码封装性较好,同时避免多次初始化原型对象

八、寄生构造函数模式(不推荐)

function Obj(name) {
    var o = new Object();
    o.name = name;
    o.sayName = function() {
        alert(this.name);
    };
    return o;
}
var obj1 = new Obj('obj1Name');
var obj2 = new Obj('obj2Name');
console.log(obj1.sayName === obj2.sayName);     // false
console.log(obj1 instanceof Obj);       // false

实例特性:对象间相互独立,没有共享方法或属性

  • 优势:可在特殊情况下为对象创建构造函数(如创建一个具有特殊方法的数组,由于不能直接修改Array构造函数,则可使用此模式)
  • 劣势:不能通过instanceof来确定对象的类型

九、稳妥构造函数模式(在安全环境下)

function Obj(name) {
    var o = new Object();
    o.sayName = function() {
        alert(name);
    }
}
var obj1 = Obj('obj1Name');
obj1.sayName();
  • 优势:适合在某些安全执行环境中(禁止使用this、new)或防止被其他应用程序改动时使用,只能通过特定的方法访问属性。