Javascript的对象建立要领

建立对象

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");

工场形式的题目:

没法辨认对象范例,即没法经由过程instanceofconstructor来辨认对象范例:

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范例的值),而通常状况下,援用范例(ArrayObject)属性值平常不愿望对一切实例同享。

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)修改(运用闭包特征),类似于寄生组织函数形式,单不实用thisnew

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞