前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >创建对象模式

创建对象模式

作者头像
IMWeb前端团队
发布2019-12-03 15:20:44
6010
发布2019-12-03 15:20:44
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队

本文作者:IMWeb 寒纱阁主 原文出处:IMWeb社区 未经同意,禁止转载

创建自定义对象最简单的一个方式就是创建一个Object实例:

代码语言:javascript
复制
 //简单的创建对象方式 
        var person=new Object();
        person.name='Tom';
        person.output=function(){
            console.log('name:'+this.name);
        };

也可以使用对象字面量语法:

代码语言:javascript
复制
// 对象字面量
        var person={
            name:'Tom', 
            output:function(){
                console.log('name:' +this.name);
            }
        };

上述方式有明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码。因此可以使用工厂模式:

代码语言:javascript
复制
// 工厂模式
       function createperson(){
           var person=new Object();
           person.name='Tom';
           person.output=function(){
               console.log('name:'+this.name);
           };
           return person;
       };
       var person1=createperson();
       person1.output();

用函数封装,可以无数次调用,但该方法没有解决对象识别问题,即则样知道一个对象的类型。我们可以使用构造函数模式:

代码语言:javascript
复制
// 构造函数模式
        function Person(name){
            this.name=name;
            this.output=function(){
                console.log('name:'+this.name);
            };
        };
        new Person('Tom').output();

使用构造函数也有缺点,那就是每个方法都要在每个实例上重新创建一遍。我们可以结合使用构造函数模式和原型模式:

代码语言:javascript
复制
// 构造函数模式+原型模式
        function Person(name) {
            this.name=name;
        };
        Person.prototype.output=function(){
            console.log('name:'+this.name);
        };
        new Person('Tom').output();

此外,还有一种动态原型模式,它将所有的信息封装在了函数内,必要时初始化原型:

代码语言:javascript
复制
// 原型模式
        function Person(name) {
            this.name=name;
            if(typeof this.output != 'function'){
                console.log(1);
                Person.prototype.output = function () {
                    console.log('name:' + this.name);
                };
            }
        }
        new Person('Tom').output();
        new Person('Jerry').output();
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-11-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档