js面向对象浅析---对象建立的几种罕见体式格局

媒介

虽然运用Object组织函数或许运用对象字面量可以很轻易的用来建立一个对象,但这类体式格局有一个显著的瑕玷:运用一个接口建立多个对象会发生很多冗余的代码。因而为了处理这个题目,人们开始运用以下几种体式格局来罕见对象。

工场形式

该形式笼统了建立对象的详细历程,用函数来以特定接口建立对象的细节

    function cPerson(name,sex,age){
    var o = new Object();
    o.name = name;
    o.sex = sex;
    o.age = age;
    o.show = function(){
        console.log(this.name,this.age,this.sex);
    }
    return o;
}
    var p1 = cPerson('谦龙','男','100');
        p1.show();
    var p2 = cPerson('雏田','女','14');
        p2.show();

工场形式测试

《js面向对象浅析---对象建立的几种罕见体式格局》
工场体式格局的题目:运用工场形式可以建立一个包括一切信息的对象,可以无数次的挪用的这个函数。虽然其处理了建立多个相似对象的题目,但却没有处理对象辨认的题目(即怎样得知一个对象的范例)

组织函数形式

function CPerson(name,sex,age) {//注重这里 组织函数首字母大写
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.show = function () {
        console.log(this.name, this.age, this.sex);
    }
}


var p1 = new CPerson('谦龙','男','100');
    p1.show();
var p2 = new CPerson('雏田','女','14');
    p2.show();

组织函数形式测试
《js面向对象浅析---对象建立的几种罕见体式格局》

注重组织函数与工场形式有些差异的处所,以下

  1. 组织函数首字母大写

  2. 没有显式地建立对象

  3. 将属性和要领赋值给了 this对象

  4. 没有return语句

而且以这类体式格局来挪用组织函数会大抵阅历一下几个步骤

  1. 建立一个新的对象

  2. 将组织函数的作用域赋值给这个对象(因而this就指向了这个对象)

  3. 实行组织函数中的代码(即给新对象增加属性和要领的历程)

  4. 返回对象

注重:组织函数实在和平常的函数没有太大的差异,唯一的差异在于挪用体式格局的差异。以下演示差异的几种挪用体式格局

    // 挪用体式格局1 new 体式格局
    
    var p1 = new CPerson('谦龙','男','100');
    p1.show();//谦龙 100 男
    
    // 挪用体式格局2 平常函数挪用
    
    CPerson('谦龙','男','100');
    window.show()//谦龙 100 男 注重属性和要领会被设置到window对象上
    
    // 挪用体式格局3 在另一个对象的作用域中挪用
    var obj = new Object();
        CPerson.call(obj,'谦龙','男','100');
        obj.show(); //谦龙 100 男 在obj的作用域

组织函数的题目:运用组织函数最主要的题目就是每一个要领都要在每一个实例上从新建立一次,p1与p2的都有show要领,但不是同一个Function的实例,由于function在js中也是一个对象。因而他们共有的show要领并不相称。

原型形式

每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用处是 包括可以由特定范例的一切实例 同享的属性和要领。即挪用组织函数所建立的谁人对象的 原型对象

长处是可以让一切对象的实例同享他的属性的要领。即无需在组织函数中定义实例的信息

 function CPerson(){

    }
    CPerson.prototype.name='谦龙';
    CPerson.prototype.sex='男';
    CPerson.prototype.age=100;
    CPerson.prototype.show=function(){
        console.log(this.name, this.age, this.sex);
    }
    var p1 = new CPerson();
        p1.show(); //谦龙 100 男
    var p2 = new CPerson();
        p2.show();//谦龙 100 男
        console.log(p1.show == p2.show)//true

原型形式测试

《js面向对象浅析---对象建立的几种罕见体式格局》

由上图可知p1与p2同享属性和要领

原型形式的题目:

  1. 省略了为组织函数通报初始化参数,致使默许情况下一切实例将获得雷同的属性值

  2. 一切属性都会被实例所同享,当属性的范例是援用范例的时刻会出肯定的题目,实例间对该属性的修正会相互影响
    针对以上所说的第二个题目我们给出实例

        function CPerson(){

        }

        CPerson.prototype.name='谦龙';
        CPerson.prototype.sex='男';
        CPerson.prototype.age=100;
        CPerson.prototype.job=['前端','后端'];
        CPerson.prototype.show=function(){
            console.log(this.name, this.age, this.sex);
        }
        var p1 = new CPerson();
            p1.job.push('测试');
            console.log(p1.job);//["前端", "后端", "测试"]
        var p2 = new CPerson();
            console.log(p2.job);//["前端", "后端", "测试"]
            console.log(p1.job == p2.job);// true

测试

《js面向对象浅析---对象建立的几种罕见体式格局》

由以上可以看出,两个对象p1,p2对job的修正会相互影响,但根据平常头脑,实例平常要有本身的悉数的属性。

组合运用组织函数和原型形式

该体式格局运用组织函数定义实例属性、运用原型定义要领和同享的属性,效果每一个实例都有一份实例属性的副本,而且同享着要领的援用,可谓是集两家之所长。

 function CPerson(name,sex,age) {//注重这里 组织函数首字母大写
         this.name = name;
         this.sex = sex;
         this.age = age;
         this.job=['前端','后端'];
     }

    CPerson.prototype={
        constructor:CPerson,//注重这里
        show : function () {
            console.log(this.name, this.age, this.sex);
        }
    }

    var p1 = new CPerson('谦龙','男',100);
    var p2 = new CPerson('雏田','女',20);
        p1.job.push('测试');
        console.log(p1.job);//["前端", "后端", "测试"]
        console.log(p2.job);//["前端", "后端"]
        console.log(p1.job == p2.job);//fasle
        console.log(p1.show == p2.show);//true

组合形式测试
《js面向对象浅析---对象建立的几种罕见体式格局》

申明:这类组合形式是运用最普遍、认同度最高的一种建立自定义范例的要领。

动态原型形式

动态原型形式将一切的信息都封装在了函数中,而经由过程组织函数中初始化原型,坚持了同时运用组织函数和原型的长处

        function CPerson(name,sex,age) {//注重这里 组织函数首字母大写
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.job=['前端','后端'];
            if(typeof this.show !='function'){ //注重这里 
                console.log('just one');
                CPerson.prototype.show=function(){
                    console.log(this.name, this.age, this.sex);
                }
            }
        }


        var p1 = new CPerson('谦龙','男',100); //just one
        var p2 = new CPerson('雏田','女',20);//没有输出

动态原型形式测试
《js面向对象浅析---对象建立的几种罕见体式格局》

寄生组织函数形式

该体式格局的基本思想是建立一个函数,用来封装建立对象的代码,然后再返回新建立的对象。组织函数在不返回值的情况下,默许会返回新对象的实例,而经由过程return语句可以修正挪用组织函数时的返回值。

该体式格局有肯定的运用场景比方,当我们想建立一个具有分外要领的数组而又不能修正Array组织函数的情况下,可以运用这类形式

 function MyOwnArray(){
        var arr=new Array();//建立新对象
            arr.push.apply(arr,arguments);
            arr.show=function(){
                console.log(this.join('|'));
            }
        return arr;
    }

    var arr1 = new MyOwnArray('谦龙','男',100);
        arr1.show();

寄生组织函数形式测试
《js面向对象浅析---对象建立的几种罕见体式格局》

稳妥组织函数形式

稳妥对象即没有大众属性,要领也不援用this对象,稳妥对象最适合在一些平安的环境中(比方制止运用this和new)或许防备数据被其他运用程序修正的时刻运用。

注重:稳妥组织函数和寄生式组织函数有很多相似的处所,以下是他们的差异之处

  1. 不运用new操作符来挪用组织函数

  2. 建立对象的实例要领不运用this对象

  function CPerson(name,sex,age){
        var obj = new Object();
            // private members
        var myOwnName='谦龙';
        obj.showOwnName=function(){
            console.log(myOwnName);//只要经由过程该要领才接见myOwnName 私有属性
        }
        obj.show=function(){
            console.log(name,sex,age);
        }
        return obj;
    }

    var p1=CPerson('谦龙','男','100');
        p1.show();
        p1.showOwnName();

稳妥组织函数形式测试
《js面向对象浅析---对象建立的几种罕见体式格局》

除了经由过程挪用对应的要领来接见其数据成员,没有别的要领可以接见到原始增加的数据,其供应的这类平安机制适合在比方ADsafe等的环境下运用

    原文作者:谦龙
    原文地址: https://segmentfault.com/a/1190000003964584
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞