JavaScript 对象的创建

刺骨的言语ヽ痛彻心扉 2022-08-06 12:25 220阅读 0赞

Object类型是JavaScript中使用最多的一种类型。创建Object[实例][Link 1]的方式有多种，接下来一一列举。  
  
1. Object构造函数

1.  var person = new Object();  
    
2.  person.name = "Brittany";  
    
3.  person.age = 23;  
    
4.  person.job = "web front-end engineer";  
    
5.  person.sayName = function() \{  
    
6.      console.log(this.name);  
    
7.  \};  
    
8.  person.sayName();   //Brittany

复制代码

2. 对象字面量模式

1.  var person = \{  
    
2.      name: "Brittany",  
    
3.      age: 23,  
    
4.      job: "web front-end engineer",  
    
5.      sayName: function() \{  
    
6.          console.log(this.name);  
    
7.      \}  
    
8.  \};  
    
9.  person.sayName();

复制代码

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

1.  function createPerson(name, age, job) \{  
    
2.      var o = new Object();  
    
3.      o.name = name;  
    
4.      o.age = age;  
    
5.      o.job = job;  
    
6.      o.sayName = function() \{  
    
7.          console.log(this.name);  
    
8.      \};  
    
9.      return o;  
    
10. \}  
    
11.   
    
12. var person1 = createPerson("Brittany", 23, "Software Engineer");  
    
13. var person2 = createPerson("Sam", 26, "Software Engineer");  
    
14. console.log(typeof person1);   //Object

复制代码

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

1.  function Person(name, age, job) \{  
    
2.      this.name = name;  
    
3.      this.age = age;  
    
4.      this.job = job;  
    
5.      this.sayName = function() \{  
    
6.          console.log(this.name);  
    
7.      \}      
    
8.  \}  
    
9.  var person1 = new Person("Brittany", 23, "Web front-end engineer");  
    
10. var person2 = new Person("Closure", 26, "Manager");  
    
11. person1.sayName();  
    
12. person2.sayName();  
    
13. console.log(person1.sayName == person2.sayName);   //false

复制代码

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

1.  function Person(name, age, job) \{  
    
2.      this.name = name;  
    
3.      this.age = age;  
    
4.      this.job = job;  
    
5.      this.sayName = sayName;  
    
6.  \}  
    
7.  function sayName() \{  
    
8.      console.log(this.name);  
    
9.  \}

复制代码

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

1.  function Person() \{\}  
    
2.  Person.prototype.name = "Brittany";  
    
3.  Person.prototype.age = 23;  
    
4.  Person.prototype.job = "Web front-end engineer";  
    
5.  Person.prototype.getName = function() \{  
    
6.      console.log(this.name);  
    
7.  \};  
    
8.  var p1 = new Person();  
    
9.  var p2 = new Person();  
    
10.   
    
11. console.log(p1.name);                    //Brittany  
    
12. console.log(p2.name);                    //Brittany  
    
13. console.log(p1.getName == p2.getName);   //true

复制代码

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

1.  p1.name = "Susan";  
    
2.  console.log(p1.name);                    //Susan

复制代码

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

1.  console.log(p2.hasOwnProperty("name"));  //false  
    
2.  p2.name = "koko";  
    
3.  console.log(p2.hasOwnProperty("name"));  //true  
    
4.  delete p2.name;  
    
5.  console.log(p2.hasOwnProperty("name"));  //false

复制代码

isPropertyOf()

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

复制代码

getPropertyOf()

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

复制代码

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

1.  var p3 = new Person();  
    
2.  console.log("name" in p3);                //true  
    
3.  console.log(p3.hasOwnProperty("name"));   //false  
    
4.  p3.name = "insist";  
    
5.  console.log(p3.hasOwnProperty("name"));   //true

复制代码

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

1.  function hasPrototypeProperty(object, name) \{  
    
2.      return !hasOwnProperty("name") && (name in object);  
    
3.  \}

复制代码

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

1.  for(var prop in p1) \{  
    
2.      console.log(prop);                    //name age job sayName  
    
3.  \}

复制代码

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

1.  var keys = Object.keys(Person.prototype);  
    
2.  console.log(keys);             //\["name age job sayName"\]  
    
3.  var p1 = new Person();   
    
4.  console.log(Object.keys(p1));  //\[\]  
    
5.  p1.name = "get";  
    
6.  console.log(Object.keys(p1));  //\["name"\]

复制代码

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

1.  var keys = Object.getOwnPropertyNames(Person.prototype);  
    
2.  console.log(keys);     //\["constructor", "name", "age", "job", "getName"\]   
    
3.  var keys\_p1 = Object.getOwnPropertyNames(p1);  
    
4.  console.log(keys\_p1);  //\[\]

复制代码

3)更简洁的原型语法

1.  function Person() \{\}  
    
2.  Person.prototype = \{  
    
3.      name: "Brittany",  
    
4.      age: 23,  
    
5.      job: "Web front-end engineer",  
    
6.      getName: function() \{  
    
7.          return this.name;  
    
8.      \}  
    
9.  \};  
    
10. var friend = new Person();  
    
11. console.log(friend instanceof Person);      //true  
    
12. console.log(friend instanceof Object);      //true  
    
13. console.log(friend.constructor == Person);  //false  
    
14. console.log(friend.constructor == Object);  //false

复制代码

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

1.  Person.prototype = \{  
    
2.      constructor: Person,  
    
3.      name: "Brittany",  
    
4.      age: 23,  
    
5.      job: "Web front-end engineer",  
    
6.      getName: function() \{  
    
7.          console.log(this.name);  
    
8.      \}  
    
9.  \};

复制代码

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

1.  var friend = new Person();  
    
2.  Person.prototype.sayHi = function() \{  
    
3.      console.log("hi");  
    
4.  \};  
    
5.  friend.sayHi();

复制代码

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

1.  function Person() \{\}  
    
2.  var friend = new Person();  
    
3.  Person.prototype = \{  
    
4.      constructor: Person,  
    
5.      name: "Brittany",  
    
6.      age: 23,  
    
7.      job: "Web front-end engineer",  
    
8.      getName: function() \{  
    
9.          console.log(this.name);  
    
10.     \}  
    
11. \};  
    
12. friend.getName();                  //error

复制代码

若是创建实例放在重写原型对象之后，则不会报错。   
  
5）原生对象的原型   
  
所有原生引用类型（Object、Array、String）都在其构造函数的原型上定义了方法，如：Array.prototype.sort()、String.prototype.subString()， 通过原生对象的原型可以取得所有默认方法的引用，并可以定义新方法。

1.  console.log(typeof Array.prototype.sort);        //function  
    
2.  console.log(typeof String.prototype.substring);  //function  
    
3.    
    
4.  String.prototype.startsWith = function(text) \{  
    
5.      return this.indexOf(text) == 0;  
    
6.  \};  
    
7.  var msg = "Hello World";  
    
8.  console.log(msg.startsWith("Hello"));           //true

复制代码

6）原型对象的问题  
  
缺点一：省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下将取得相同的属性值。  
  
缺点二：原型中所有属性被许多实例共享，这种共享对于函数非常适合。对于包含基本值属性倒也说得过去，因为通过在实例上添加一个同名属性，可以隐藏原型中对应的属性。但对于包含引用类型值得属性来说，问题比较突出。

1.  function Person() \{ \}  
    
2.  Person.prototype = \{  
    
3.      constructor: Person,  
    
4.      name: "Brittany",  
    
5.      friends: \["pink", "judy", "sam"\],  
    
6.      age: 23,  
    
7.      job: "Web front-end engineer",  
    
8.      getName: function() \{  
    
9.          console.log(this.name);  
    
10.     \}  
    
11. \};  
    
12. var person1 = new Person();  
    
13. var person2 = new Person();  
    
14. person1.friends.push("leo");  
    
15. console.log(person1.friends);           //\["pink", "judy", "sam", "leo"\]  
    
16. console.log(person2.friends);           //\["pink", "judy", "sam", "leo"\]  
    
17. console.log(Person.prototype.friends);  //\["pink", "judy", "sam", "leo"\]  
    
18. person1.age = 35;  
    
19. console.log(person1.age);           //35  
    
20. console.log(person2.age);           //23  
    
21. console.log(Person.prototype.age);  //23

复制代码

person1的friends属性修改影响了person2的friends，但是person1的age属性修改并未影响person2的age属性。   
  
原因在于：friends数组存在于Person.prototype中而非person1中，因此修改也会通过person2.friends（与person1.friends指向同一个数组）反映出来。而age属性在person1中也存在一份，修改的age属性只是修改person1中的，并不能修改Person.prototype中的age属性。   
  
6. 组合使用构造函数模式和原型模式   
  
构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。这样，每个实例都会有自己的一份实例属性的副本，但又同时共享着对方法的引用。

1.  function Person(name, age, job) \{  
    
2.      this.name = name;  
    
3.      this.age = age;  
    
4.      this.job = job;  
    
5.      this.friends = \["aa", "bb", "cc"\];  
    
6.  \}  
    
7.  Person.prototype = \{  
    
8.      constructor: Person,  
    
9.      sayName: function() \{  
    
10.         console.log(this.name);  
    
11.     \}  
    
12. \};  
    
13. var person1 = new Person("Brittany", 23, "Web front-end Engineer");  
    
14. person1.friends.push("dd");     //\["aa", "bb", "cc", "dd"\]  
    
15. console.log(person1.friends);  
    
16. var person2 = new Person("Sam", 26, "Web front-end Engineer");  
    
17. console.log(person2.friends);   //\["aa", "bb", "cc"\]  
    
18. console.log(person1.friends == person2.friends);  //false  
    
19. console.log(person1.sayName == person2.sayName);  //true

复制代码

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=17