资讯专栏INFORMATION COLUMN

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

浠ラ箍 / 2306人阅读

摘要:简单工厂模式特点通过来创建一个对象实例,并为其添加属性和方法并返回优点工厂类集中了所有对象的创建,便于对象创建的统一管理且可以大量创建缺点工厂模式却无从识别对象的类型,因为它们直接由构造函数创建,原型链上只有对象,不像等每创建一个对象实例

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|| {}));

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86781.html

相关文章

  • 高级前端面试题大汇总(只有试题,没有答案)

    摘要:面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。 面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何...

    kviccn 评论0 收藏0
  • 2018大厂高级前端面试题汇总

    摘要:面试的公司分别是阿里网易滴滴今日头条有赞挖财沪江饿了么携程喜马拉雅兑吧微医寺库宝宝树海康威视蘑菇街酷家乐百分点和海风教育。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本人于7-8月开始准备面试,过五关斩六将,最终抱得网易归,深深感受到高级前端面试的套路。以下是自己整理的面试题汇总,不敢藏私,统统贡献出来。 面试的公司分...

    zzir 评论0 收藏0
  • 跨平台技术演进

    摘要:接下来,我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年,年,各大厂商快速跟进,已经有了很大的影响力。下面,我们以微信小程序为例,分析小程序的技术架构。 前言 大家好,我是simbawu ,@BooheeFE Team Leader,关于这篇文章,有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展,手机成了互联网行业最大的流量分发入口。以及随着5G...

    魏宪会 评论0 收藏0

发表评论

0条评论

浠ラ箍

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<