原生js的对象创建模式以及优缺点

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);
    }
    return o;
}
var person1 = createPerson("spademan", 26, "front-end");
var person2 = createPerson("ivan", 27, "seller");
person1.sayName(); //"spademan"
person2.sayName(); //"ivan"

特点: 通过 new Object() 来创建一个对象实例,并为其添加属性和方法并返回

优点: 工厂类集中了所有对象的创建,便于对象创建的统一管理,且可以大量创建

缺点:(1).工厂模式却无从识别对象的类型,因为它们直接由 Object() 构造函数创建,原型链上只有 Object.prototype 对象,不像Date、Array等 .
(2).每创建一个对象实例,就会为每个对象实例创建一遍相同功能但是是不同函数实例的方法,它们并不相等。这显然是不可取的
另外在相应的业务方面,除非是适用场景,否则不可滥用工厂模式,会造成代码的复杂度(参考)

注意:除了简单工厂模式之外还有抽象工厂模式

2.构造函数模式
function GitHub(name, url) {
    this.name = name;
    this.url = url;
    this.alertUrl = function() {
        alert(this.url);
    }
}
var git = new GitHub('spademan', 'https://github.com/spademan');
console.log(git instanceof GitHub);    // true, 判断git是否是GitHub的实例,即解决了工厂模式中不能识别对象的类型的问题

特点: 需要使用new,并且没有return关键字

优点: 可以识别对象的类型

缺点:使用构造函数的最大的问题在于每次创建实例的时候都要重新创建一次方法(理论上每次创建对象的时候对象的属性均不同,而对象的方法是相同的),然而创建两次完全相同的方法是没有必要的,因此,我们可以将函数移到对象外面(这一点和工厂模式相同)

3.原型模式
function Person() {}
Person.prototype.name = 'spademan'
Person.prototype.age = 23
Person.prototype.getName = function () {
    return this.name
}
Person.prototype.setName = function () {
    this.name = name
}
var spademan_1 = new Person()
var spademan_2 = new Person()
console.log(spademan_1.getName === spademan_2.getName)    // => true

特点: 构造函数内不定义属性和方法,把属性和方法都定义在构造函数的原型上。这样所有的对象实例都共享对象原型上的属相和方法

优点: 多个实例可以共享原型上的属性和方法

缺点: 修改原型上的一些引用属性,所有实例对应的属性也将被改变,这样可能带来一些问题

4.构造函数模式 + 原型模式(也叫混合模式)
// 写法1
function Person(name, age) {
    this.name = name
    this.age = age
    this.getAge = function () {
        return this.age
    }
}
Person.prototype.country = 'China'
Person.prototype.getName = function () {
    return this.name
}
Person.prototype.setName = function (name) {
    this.name = name
}
var spademan = new Person('spademan', 26)
var spademan_2 = new Person('spdeman_2', 27)
//写法2
function Person(name, age) {
    this.name = name
    this.age = age
    this.getAge = function () {
        return this.age
    }
}
Person.prototype.country = 'China'
Person.prototype.getName = function () {
    return this.name
}
Person.prototype.setName = function (name) {
    this.name = name
}
var spademan = new Person('spademan', 26)
var spademan_2 = new Person('spdeman_2', 27)

优点: 构造函数内定义私有的属性和方法,构造函数的原型上定义共有的属性和方法。是目前最常用的方式之一

5.模块模式(参考)
// 写法1
var MODULE = (function () {
    var my = {},
        privateVariable = 1;
    
    function privateMethod() {
        // ...
    }
    
    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };
    
    return my;
}());
// 写法2
var MODULE = (function (my) {
    var privateVariable = 1;
    function privateMethod() {
        // ...
    }
    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };
    
    return my;
}(MODULE|| {}));
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值