Javascript的对象建立要领

2019年8月31日 183次阅读 来源: abc126

建立对象

1.1 经由过程Object对象建立

var person = new Object();
person.name = "Albert";
person.sayName = function(){
    console.log(this.name);
};

1.2 经由过程字面量建立

var person = {
    name : "Albert",
    sayName : function(){
        console.log(this.name)
    }
};

Object和字面量建立的题目：

建立许多对象的时刻会发作大批反复代码。

1.3 工场形式

function createPerson(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        console.log(this.name)
    }
    return o;
}
var person = createPerson("Albert");

工场形式的题目：

没法辨认对象范例，即没法经由过程instanceof和constructor来辨认对象范例：

person instanceof ???;
person.constructor == ???;

1.4 组织函数

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}
var person = new Person("Albert");
console.log(person.constructor == Person)//true
console.log(person instanceof Person)//true

组织函数的题目：

每一个要领都要在每一个实例上从新建立一次，尤其是函数，如许每一个Person的实例都包含了一个差别的sayName的函数实例。

注重1
组织函数没有return语句。要建立Person的新实例，必需采纳new操作符，new操作符大体上完成了一下4件事变：

  • 建立一个新的对象（本例中Person建立的新对象，记为person）;

  • 将组织函数的作用域赋给新对象（this=>person）;

  • 实行组织函数中的代码（Person中的this.name=name;this.say.....）;

  • 返回新对象

注重2
组织函数也是函数，假如不经由过程new操作符挪用，则作用环境为全局（浏览器中为windows，node环境中为global）

function Person(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name)
    }
}

Person("BB");
global.sayName()//BB
console.log(global.name)//BB

1.5 原型形式

function Person(name){}
Person.prototype.name = "Albert";
Person.prototype.sayName = function(){
        console.log(this.name)
    }

var person = new Person();
console.log(Object.getPrototypeOf(person)==Person.prototype);//true

浏览器支撑：IE9+，如许一切的Person实例同享name属性及sayName函数

注重1

  • 对象的某个属性是不是来自实例，可经由过程hasOwnProperty()来肯定,假如是在原型中，则返回false。

  • 推断对象是不是具有属性，可以经由过程in操作符，比方console.log("name" in person)//true来推断，不论是在原型照样实例中，都返回true，经由过程for-in轮回时，实例及原型中均会被罗列。

注重2
在定义原型时，假如用字面量替代为prototype属性定义，则原型的constructor属性不会指向Person。由于经由过程字面量定义，完整重写了默许的prototype对象。然则此时instanceof照样可以返回准确的效果。

function Person(name){};
Person.prototype={
    name : "Albert",
    sayName : function(){
        console.log(this.name);
    }
};
var person = new Person();
console.log(person instanceof Person);//true
console.log(person.constructor == Person);//false
console.log(person.constructor == Object);//true

所以可以再补充定义：

Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    value:Person
})

注重3
在重定义原型前，不能建立对象实例，否则会形成实例的原型指向毛病

function Person(name){};
var person = new Person();
Person.prototype={
    name : "Albert",
    sayName : function(){
        console.log(this.name);
    }
};
person.sayName(); //error

此例中person的原型被指向了Person的默许原型，固挪用sayName函数会发作毛病。

原型形式的题目：

  • 小题目：为了省略组织函数通报初始化参数，一切的实例在默许状况下都会去的想通的属性值

  • 原型属性被一切实例同享（合适function范例的值），而通常状况下，援用范例（Array、Object）属性值平常不愿望对一切实例同享。

1.6 组织函数与原型组合

运用组织函数都是实例属性和原型的同享特征，离别定义对应的内容，组合共同完成对象建立，而且该形式还支撑想组织函数通报参数。

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//援用范例为实例属性
};
Person.prototype.sayName = function(){
        console.log(this.name);
};

1.7 动态原型形式

将1.6中的组合封装在一个组织函数中的形式。具体要领为：搜检某个应当存在的要领是不是有用来决议是不是须要初始化原型。

function Person(name){
    this.name = name;
    this.friends = ["Bob","Harry"];//援用范例为实例属性
    //****ProtoType****
    if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    }
};

1.8 寄生组织形式

组织函数在不反回值的状况下，默许会返回新对象实例。
而经由过程在函数末端增加return语句，可以重写new后挪用函数时的返回值。

function Person(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        console.log(this.name);
    };
    return o;
};
var person = new Person("Albert");
console.log(person instanceof Person);//false

该函数除了运用new操作符和把包装函数取名叫“组织函数”之外，和工场形式实际上是如出一辙的。
该形式属于比较特别的组织形式，可用于不允许修正原对象的状况。

function SpecialArray(){
    var values = new Array();
    values.push.apply(values,arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values
}

1.9 稳妥（durable）组织函数形式

该形式组织出来的对象没有大众属性，不实用this对象，不实用new操作符，实用于在一些平安环境中，可防止数据被别的运用（如Mashup）修改（运用闭包特征），类似于寄生组织函数形式，单不实用this和new。

function Person(name){
    var o = new Object();
    //****定义私有变量和函数****
    var _name = name;
    o.sayName = function(){
        console.log(_name);
    };    
    return o;
};
var person = Person("Albert");

这类形式中，除了sayName()要领之外，没有别的方法接见_name的值。

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