JavaScript 对象的创建

2023-02-28 07:25:18

Object类型是JavaScript中使用最多的一种类型。创建Object实例的方式有多种，接下来一一列举。

1. Object构造函数

var person = new Object();

person.name = "Brittany";

person.age = 23;

person.job = "web front-end engineer";

person.sayName = function() {

    console.log(this.name);

};

person.sayName();   //Brittany

2. 对象字面量模式

var person = {

    name: "Brittany",

    age: 23,

    job: "web front-end engineer",

    sayName: function() {

        console.log(this.name);

    }

};

person.sayName();

虽然Object构造函数或对象字面量都可以用来创建单个对象，但这些方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为解决这个问题，可以使用工厂模式的一种变体。

3. 工厂模式

function createPerson(name, age, job) {

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.sayName = function() {

        console.log(this.name);

    };

    return o;

}

var person1 = createPerson("Brittany", 23, "Software Engineer");

var person2 = createPerson("Sam", 26, "Software Engineer");

console.log(typeof person1);   //Object

工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。如代码中只能检测出person1为Object类型。随着JavaScript的发展，又一个新模式出现了。

4. 构造函数模式

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.sayName = function() {

        console.log(this.name);

    }    

}

var person1 = new Person("Brittany", 23, "Web front-end engineer");

var person2 = new Person("Closure", 26, "Manager");

person1.sayName();

person2.sayName();

console.log(person1.sayName == person2.sayName);   //false

使用构造函数的主要问题：每个方法都要在每个实例上重新创建一遍。如代码中所示，person1的sayName和person2的sayName不相等。可以将函数定义转移到构造函数外部来解决。

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.sayName = sayName;

}

function sayName() {

    console.log(this.name);

}

sayName函数的定义转移到了构造函数外部。而在构造函数内部，我们将sayName属性设置成等于全局的sayName函数。这样一来，由于sayName包含的是一个指向函数的指针，因此person1和person2对象就共享了在全局作用域中定义的同一个sayName()函数。这的确解决了两个函数做同一件事的问题，可是新问题又来了：在全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域有点名不副实。而更让让人无法接受的是：如果需要定义很多方法，那就要定义很多个全局函数，于是这个自定义的引用类型就无封装性可言。这些问题可通过使用原型模式来解决。

5. 原型模式

1）对象创建

function Person() {}

Person.prototype.name = "Brittany";

Person.prototype.age = 23;

Person.prototype.job = "Web front-end engineer";

Person.prototype.getName = function() {

    console.log(this.name);

};

var p1 = new Person();

var p2 = new Person();

console.log(p1.name);                    //Brittany

console.log(p2.name);                    //Brittany

console.log(p1.getName == p2.getName);   //true

实例中创建的属性会覆盖原型中的同名属性，不能修改原型中的属性。

p1.name = "Susan";

console.log(p1.name);                    //Susan

hasOwnProperty()检测一个属性是否存在于实例中。

console.log(p2.hasOwnProperty("name"));  //false

p2.name = "koko";

console.log(p2.hasOwnProperty("name"));  //true

delete p2.name;

console.log(p2.hasOwnProperty("name"));  //false

isPropertyOf()

console.log(Person.prototype.isPrototypeOf(p1));   //true

console.log(Person.prototype.isPrototypeOf(p2));   //true

getPropertyOf()

console.log(Object.getPrototypeOf(p1) == Person.prototype);  //true

console.log(Object.getPrototypeOf(p1));                      //Person

2）原型与in操作符

in单独使用时，通过对象访问到特定属性时返回true，无论该属性存在于实例中还是原型中。hasOwnProperty()，通过对象访问到特定属性时返回true，且该属性存在于实例中。

var p3 = new Person();

console.log("name" in p3);                //true

console.log(p3.hasOwnProperty("name"));   //false

p3.name = "insist";

console.log(p3.hasOwnProperty("name"));   //true

确定属性到底是存在于对象中，还是存在于原型中。如下函数hasPrototypePropery()返回true表示该属性存在于原型中，而不是存在于实例中。

function hasPrototypeProperty(object, name) {

    return !hasOwnProperty("name") && (name in object);

}

for..in循环，所有通过对象能够访问的，可枚举的（enumerated）属性，既包括存在于实例中的属性，也包括存在于原型中的属性。

for(var prop in p1) {

    console.log(prop);                    //name age job sayName

}

Object.keys()，ECMAScript5的方法，取得对象上所有可枚举的属性，接收一个对象作为参数，返回值是一个包含所有可枚举属性的字符串数组。注意：Person.prototype也是对象。

var keys = Object.keys(Person.prototype);

console.log(keys);             //["name age job sayName"]

var p1 = new Person(); 

console.log(Object.keys(p1));  //[]

p1.name = "get";

console.log(Object.keys(p1));  //["name"]

Object.getOwnPropertyNames()，得到所有实例属性，无论它是否可枚举。

var keys = Object.getOwnPropertyNames(Person.prototype);

console.log(keys);     //["constructor", "name", "age", "job", "getName"] 

var keys_p1 = Object.getOwnPropertyNames(p1);

console.log(keys_p1);  //[]

3)更简洁的原型语法

function Person() {}

Person.prototype = {

    name: "Brittany",

    age: 23,

    job: "Web front-end engineer",

    getName: function() {

        return this.name;

    }

};

var friend = new Person();

console.log(friend instanceof Person);      //true

console.log(friend instanceof Object);      //true

console.log(friend.constructor == Person);  //false

console.log(friend.constructor == Object);  //false

在上面的代码中，将Person.prototype设置为等于一个对象字面量形式创建的新对象，最终结果相同。但有一个例外：constructor属性不再指向Person了。每创建一个函数，就会同时创建它的prototype对象，这个对象也会自动获得constructor属性。而我们在这里使用的语法，本质上完全重写了默认的prototype对象，因此constructor属性也就变成了新对象的constructor属性（指向Object构造函数），不再指向Person函数。此时尽管instanceof操作符还能返回正确的结果，但通过constructor已经无法确定对象的类型了。

通过如下方式，将constructor手动设置为合适的值。

Person.prototype = {

    constructor: Person,

    name: "Brittany",

    age: 23,

    job: "Web front-end engineer",

    getName: function() {

        console.log(this.name);

    }

};

4）原型的动态性

在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样如此。

var friend = new Person();

Person.prototype.sayHi = function() {

    console.log("hi");

};

friend.sayHi();

尽管可以随时为原型添加属性和方法，并且修改能够立即在所有对象实例中反映出来，但如果是重写整个原型对象，情况就不一样了。

function Person() {}

var friend = new Person();

Person.prototype = {

    constructor: Person,

    name: "Brittany",

    age: 23,

    job: "Web front-end engineer",

    getName: function() {

        console.log(this.name);

    }

};

friend.getName();                  //error

若是创建实例放在重写原型对象之后，则不会报错。

5）原生对象的原型

所有原生引用类型（Object、Array、String）都在其构造函数的原型上定义了方法，如：Array.prototype.sort()、String.prototype.subString()，通过原生对象的原型可以取得所有默认方法的引用，并可以定义新方法。

console.log(typeof Array.prototype.sort);        //function

console.log(typeof String.prototype.substring);  //function

String.prototype.startsWith = function(text) {

    return this.indexOf(text) == 0;

};

var msg = "Hello World";

console.log(msg.startsWith("Hello"));           //true

6）原型对象的问题

缺点一：省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下将取得相同的属性值。

缺点二：原型中所有属性被许多实例共享，这种共享对于函数非常适合。对于包含基本值属性倒也说得过去，因为通过在实例上添加一个同名属性，可以隐藏原型中对应的属性。但对于包含引用类型值得属性来说，问题比较突出。

function Person() { }

Person.prototype = {

    constructor: Person,

    name: "Brittany",

    friends: ["pink", "judy", "sam"],

    age: 23,

    job: "Web front-end engineer",

    getName: function() {

        console.log(this.name);

    }

};

var person1 = new Person();

var person2 = new Person();

person1.friends.push("leo");

console.log(person1.friends);           //["pink", "judy", "sam", "leo"]

console.log(person2.friends);           //["pink", "judy", "sam", "leo"]

console.log(Person.prototype.friends);  //["pink", "judy", "sam", "leo"]

person1.age = 35;

console.log(person1.age);           //

console.log(person2.age);           //

console.log(Person.prototype.age);  //

person1的friends属性修改影响了person2的friends，但是person1的age属性修改并未影响person2的age属性。

原因在于：friends数组存在于Person.prototype中而非person1中，因此修改也会通过person2.friends（与person1.friends指向同一个数组）反映出来。而age属性在person1中也存在一份，修改的age属性只是修改person1中的，并不能修改Person.prototype中的age属性。

6. 组合使用构造函数模式和原型模式

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。这样，每个实例都会有自己的一份实例属性的副本，但又同时共享着对方法的引用。

function Person(name, age, job) {

    this.name = name;

    this.age = age;

    this.job = job;

    this.friends = ["aa", "bb", "cc"];

}

Person.prototype = {

    constructor: Person,

    sayName: function() {

        console.log(this.name);

    }

};

var person1 = new Person("Brittany", 23, "Web front-end Engineer");

person1.friends.push("dd");     //["aa", "bb", "cc", "dd"]

console.log(person1.friends);

var person2 = new Person("Sam", 26, "Web front-end Engineer");

console.log(person2.friends);   //["aa", "bb", "cc"]

console.log(person1.friends == person2.friends);  //false

console.log(person1.sayName == person2.sayName);  //true

时间：2014-10-21

地点：合肥

引用：《JavaScript高级程序设计》

码农公寓