創建一個對象

起因.................
用Object或對象字面量創建對象會產生大量的重複代碼,而且只能通過變量名來區分不同的對象,沒有記錄對象的類型
例如:

 //Object創建對象
 var student = new Object();
 student.name = 's';
 student.age = "20";
 var student1 = new Object();
 student1.name = "s1";
 student.age = "20";
 //字面量創建對象
 var student = {
   name: 's',
   age: '23'
 }
 var student1 = {
   name: 's',
   age: '23'
 }

1.工廠模式創建對象

工廠模式解決了相似代碼重複書寫的問題

//好處:js中無法創建類,爲了模仿類的創建方式,抽象具體對象的創建過程;
//缺點:工廠模式創建的對象是通過普通函數調用實現的,沒有解決標識對象類型的問題,無法區分對象的類型,
  function person(name) {
   var o = new Object();
   o.name = name;
   o.sayName = function() {
     console.log(this.name)
   }
   return o;
 }
 var p1 = person('a');
 var p2 = person('b');

2.構造函數模式創建對象

 function Person(name) {
   this.name = name;
   this.sayName = function() {
     console.log(this.name);
   }
//function() { console.log(this.name);}相當於new Function(){console.log(this.name);}}
 var a = new Person('ww');
 a.sayName();
 console.log(a)

new 一個實例的過程:
(1)先創建一個對象
(2)將構造函數的作用域賦給新對象
(3),執行構造函數中的代碼
(4)返回新對象

構造函數模式解決了標識構造函數類型的問題,但是構造函數內部每定義一個函數就會實例化一個對象,可以通過將公用的方法提到全局環境下,通過普通函數調用的方式實現調用函數,避免了重複實例化對象的問題

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

 function sayName() {
   console.log(this.name)
 }
 var a = new Person('p1');
 var b = new Person('p2');
 a.sayName();
 b.sayName();

如果Person內部封裝較多的函數,會導致定義大量的全局函數,這些函數散亂分佈在全局環境中,失去了封裝性.爲了解決這個問題,可以用原型模式創建對象

3.原型模式

原型模式創建對象,把屬性和函數添加到對象的prototype上,實例化一個對象p1,p1可以通過原型鏈訪問到原型鏈上的對象

 function Person() {}
 Person.prototype.name = "ww";
 Person.prototype.sayName = function() {
   console.log(this.name);
 }
 var p1 = new Person();
 p1.sayName();

(1)原型模式的另一種方式:
clipboard.png
這種方式會導致,Person.prototype上原本指向Person的constructor丟失,可以手動添加constructor屬性,如下
clipboard.png

(2)如果先創建實例,再定義Person.prototyp的值會報錯,p1還是通過[[prototype]]隱式屬性指向Person沒修改過的原型,導致找不到sayName方法
clipboard.png

解釋如js高級程序設計一書中的例子:
clipboard.png
clipboard.png

(3)原型鏈模式存在以下問題:(1),prototype上的屬性和方法共享,一個對象對prototype屬性的修改會影響另一個對象的屬性;(2)不能傳遞參數

clipboard.png

4.組合使用構造函數和原型函數

我們可以把一些共享的屬性和方法添加到prototype,再利用構造函數在實例對象上添加不同屬性

clipboard.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章