小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
  • 什么是闭包?js闭包的2个最大用途以及注意事项

    什么是闭包?js闭包的2个最大用途以及注意事项

    各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。简单的说,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因……
    134人已经看过了
您的位置:首页 > 前端开发 > Javascript > 原生JS

创建对象object的6种方法和构造函数创建对象存在的问题,prototype原型对象的引入

分类: 原生JS60个赞

创建对象object的方法很多,那么每种方法都有什么问题呢?

  • 1.直接量语法创建对象(字面量语法)

  • 缺点:语句复杂,太多对象无法一一创建

        var person = {
            "name":"张三",
            "age":"30",
            "say":function(){
                console.log('啊啊啊啊');
            }
        };
        var person1 = {
            "name":"李四",
            "age":"30",
            "say":function(){
                console.log('啊啊啊啊');
            }
        };


    进阶2.工厂函数

    缺点:不太灵活

    //封装一个工厂函数,用于生产一个人的对象

        function gongchang(n, a){
            return {
                "name":n,
                "age":a,
                "say":function(){
                    console.log('我叫' + this.name);
            }
        }
        var person = gongchang('张三', 30);
        var person1 = gongchang('李四', 30);


    进阶3.构造函数直接创建对象(构造函数也是普通函数,被new 实例化了)

    缺点:浪费内存,每次new一个都会创建一个新的函数

        function Person(n, a){
            //分析过程: 1.首先创建一个空对象  var obj = {};
            //2. 将创建的对象,赋给this关键字 this = obj;
            //3. 将一些属性方法,通过this设置到对象上
            //我们只需要直接在构造函数中,使用this 设置成员即可
            this.name = n;
            this.age = a;
            this.say = function(){
                console.log('我叫' + this.name);
            }
            //4. 自动将新对象 返回  return this;
    
        }
        var person = new Person('张三', 30);
        var person1 = new Person('李四', 30);

    构造函数特点:函数名称通常首字母大写,不需要写return返回值,使用this设置成员

    构造函数相当于类型的概念; 实例化构造函数,得到这个类型下的具体的对象

    构造函数创建对象里面方法,每次实例化都是重新定义一个function,浪费内存



    进阶4.构造函数-解决内存浪费问题  

    缺点:方法非常多时,取名是个问题,容易和一些全局变量冲突

    //将构造函数中的方法,单独放在外面定义

        var fn = function(){
            console.log('我叫' + this.name);
        };
        function Person(n, a){
            this.name = n;
            this.age = a;
            this.say = fn;
        }
        var person1 = new Person('张三', 30);
        var person2 = new Person('李四', 40);
        console.log(person1);
        console.log(person2);


    进阶5:构造函数-同时解决内存和命名问题

    进阶4当方法非常多时,取名是个问题,容易和一些全局变量冲突,我们可以通过加普通对象的方法让其作用域只有对象体内来解决命名的问题

      //人的对象
        //定义一个公共的字面量对象,存放人的所有对象公共的方法
        var obj = {
            "fn":function(){
                console.log('我叫' + this.name);
            },
            "fn2":function(){
                console.log('我走的很快');
            }
        };
        //构造函数中,给每个人直接定义方法(从公共对象中取)
        function Person(n, a){
            this.name = n;
            this.age = a;
            this.say = obj.fn;
            this.walk = obj.fn2;
        }
    
        //另一类(动物)的对象
        var obj2 = {
            "fn":function(){
                console.log('我叫' + this.name);
            },
            "fn2":function(){
                console.log('我叫' + this.name);
            }
        };
        function Dongwu(){
            this.name = n;
            this.age = a;
            this.say = obj2.fn;
        }

    进阶6(最终方案):构造函数 和 原型对象 混合定义方式

    用系统自带的prototype 原型对象解决构造函数存在的内存问题和命名问题

    定义:js给每一个构造函数,都自动分配了一个公共的对象,用来存放这个构造函数实例化后的所有实例对象 公共的成员,这个公共对象就叫做原型对象,可以通过构造函数的prototype属性取到

    使用方法:将属性定义在构造函数中,将方法定义到原型对象中

    构造函数:

    function Person(n,a){
    		this.name = n;
    		this.age = a;
    	}

    原型对象

    console.log(Person.prototype);
    	Person.prototype.say = function(){
    		console.log('我叫' + this.name + ',我今年' + this.age + '岁');
    	}
    	Person.prototype.walk = function(m, n){
    		console.log('我走的很快');
    		// return m+n;
    	}

    多次实例化构造函数,得到多个实例对象

    var person1 = new Person('张飞', 30);
    	var person2 = new Person('刘备', 40);


    //Person构造函数的每一个实例对象,都可以直接使用对应的原型对象上的方法
    person1.say();
    person1.walk(1,2);
    person2.say();


    所以,创建对象object的时候建议使用方案6,把公共方法区域存在原型对象上,解决构造函数内存和命名的问题.

小米技术社区