JavaScript高級程序設計創建對象方法總結

dreambei 發布于2019-08-26 10:41 / 2090人閱讀

摘要：缺點無法通過識別對象，以為都是來自，無法得知來自每次通過創建對象的時候，所有的方法都是一樣的，但是卻存儲了多次，浪費資源。所有的方法都是共享的，沒有辦法創建實例自己的屬性和方法，也沒有辦法像構造函數那樣傳遞參數。

工廠模式

function Person() {
  var o = new Object();
  o.name = "hanmeimei";
  o.say = function() {
    alert(this.name);
  }
  return o;
}
var person1 = Person();

優點：

簡單易懂。

缺點：

無法通過constructor識別對象，以為都是來自Object，無法得知來自Person

每次通過Person創建對象的時候，所有的say方法都是一樣的，但是卻存儲了多次，浪費資源。

構造函數模式

function Person() {
  this.name = "hanmeimei";
  this.say = function() {
    alert(this.name)
  }
}
var person1 = new Person();

優點：

通過constructor或者instanceof可以識別對象實例的類別

可以通過new 關鍵字來創建對象實例，更像OO語言中創建對象實例

缺點：

多個實例的say方法都是實現一樣的效果，但是卻存儲了很多次（兩個對象實例的say方法是不同的，因為存放的地址不同）

注意：

構造函數模式隱試的在最后返回return this 所以在缺少new的情況下，會將屬性和方法添加給全局對象，瀏覽器端就會添給window對象。

也可以根據return this 的特性調用call或者apply指定this。這一點在后面的繼承有很大幫助。

原型模式

function Person() {}
Person.prototype.name = "hanmeimei";
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ["lilei"];
var person1 = new Person();

優點：

say方法是共享的了，所有的實例的say方法都指向同一個。

可以動態的添加原型對象的方法和屬性，并直接反映在對象實例上。

var person1 = new Person()
Person.prototype.showFriends = function() {
  console.log(this.friends)
}
person1.showFriends()  //["lilei"]

缺點：

1.出現引用的情況下會出現問題具體見下面代碼：

var person1 = new Person();
var person2 = new Person();
person1.friends.push("xiaoming");
console.log(person2.friends)  //["lilei", "xiaoming"]

因為js對引用類型的賦值都是將地址存儲在變量中，所以person1和person2的friends屬性指向的是同一塊存儲區域。

2.第一次調用say方法或者name屬性的時候會搜索兩次，第一次是在實例上尋找say方法，沒有找到就去原型對象(Person.prototype)上找say方法，找到后就會在實力上添加這些方法or屬性。
3.所有的方法都是共享的，沒有辦法創建實例自己的屬性和方法，也沒有辦法像構造函數那樣傳遞參數。

注意：

優點②中存在一個問題就是直接通過對象字面量給Person.prototype進行賦值的時候會導致constructor改變，所以需要手動設置，其次就是通過對象字面量給Person.prototype進行賦值，會無法作用在之前創建的對象實例上

    var person1 = new Person()
    Person.prototype = {
        name: "hanmeimei2",
          setName: function(name){
          this.name = name
          }
    }
    person1.setName()   //Uncaught TypeError: person1.set is not a function(…)

這是因為對象實例和對象原型直接是通過一個指針鏈接的，這個指針是一個內部屬性[[Prototype]]，可以通過__proto__訪問。我們通過對象字面量修改了Person.prototype指向的地址，然而對象實例的__proto__，并沒有跟著一起更新，所以這就導致，實例還訪問著原來的Person.prototype，所以建議不要通過這種方式去改變Person.prototype屬性

動態原型模式

function Person(name) {
  this.name = name
  if(typeof this.say != "function") {
    Person.prototype.say = function(
    alert(this.name)
  }
}
var friend = new Person("jjc")
friend.say()

構造函數和原型組合模式

function Person(name) {
  this.name = name
  this.friends = ["lilei"]
}
Person.prototype.say = function() {
  console.log(this.name)
}
var person1 = new Person("hanmeimei")
person1.say() //hanmeimei

優點：

解決了原型模式對于引用對象的缺點

解決了原型模式沒有辦法傳遞參數的缺點

解決了構造函數模式不能共享方法的缺點

缺點：

沒寫到一起，封裝性不強

寄生構造函數模式

function Person(name) {
  var o = new Object()
  o.name = name
  o.say = function() {
    alert(this.name)
  }
  return o
}
var peron1 = new Person("hanmeimei")

穩妥構造模式

function Person(name) {
  var o = new Object()
  o.say = function() {
    alert(name)
  }
}
var person1 = new Person("hanmeimei");
person1.name  // undefined
person1.say() //hanmeimei

優點：

安全，那么好像成為了私有變量，只能通過say方法去訪問

GPU云服務器云服務器高級javascript程序設計 javascript高級程序設計 javascript高級程序 javascript對象方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106607.html

JavaScript高級程序設計——原型和原型鏈

摘要：但是確是一個特例它的指向的是至于為什么簡單解釋下所有的構造器都來自于，甚至包括根構造器及自身。所有構造器都繼承了的屬性及方法。如知道了所有構造器含內置及自定義的都是，的是誰呢這說明所有的構造器也都是一個普通對象，可以給構造器添加刪除屬性等。 showImg(https://segmentfault.com/img/remote/1460000009446154); 前言此文章為加深對...

My_Oh_My 2019-08-20 16:37 評論0 收藏0
《javascript高級程序設計》筆記：內存與執行環境

摘要：因此，所有在方法中定義的變量都是放在棧內存中的當我們在程序中創建一個對象時，這個對象將被保存到運行時數據區中，以便反復利用因為對象的創建成本通常較大，這個運行時數據區就是堆內存。上一篇：《javascript高級程序設計》筆記：繼承近幾篇博客都會圍繞著圖中的知識點展開 showImg(https://segmentfault.com/img/bVY0C4?w=1330&h=618);...

fuyi501 2019-08-21 17:44 評論0 收藏0
JavaScript高級程序設計學習筆記三（基本語法)

摘要：數據類型中有種簡單數據類型也稱為基本數據類型和。在中非空字符串，非零數字，任意對象，都被認為。而空字符串，和，，認為是。用于表示整數和浮點數。標識符由數字字母下劃線美元符組成，但首字母不能是數字。變量方法對象命名推薦駝峰法。 JavaScript語法一.語法簡介因為JavaScript語法和Java等語法非常類似。所以只是簡單介紹一下。大小寫 JavaScript是大小寫敏感的語...

Mike617 2019-08-22 11:20 評論0 收藏0
如何閱讀《JavaScript高級程序設計》（一）

摘要：題外話最近在看高級程序設計這本書，面對著多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。全局環境的關閉是頁面關閉或者瀏覽器關閉，而局部環境的關閉是指函數結束。數值范圍最大和最小的范圍是超出范圍的數字如何表示是一個特殊的值。題外話最近在看《JavaScript高級程序設計》這本書，面對著700多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。探究一下到底怎么讀這本書。本書的內容好像...

chadLi 2019-08-01 18:19 評論0 收藏0
如何閱讀《JavaScript高級程序設計》（一）

摘要：題外話最近在看高級程序設計這本書，面對著多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。全局環境的關閉是頁面關閉或者瀏覽器關閉，而局部環境的關閉是指函數結束。數值范圍最大和最小的范圍是超出范圍的數字如何表示是一個特殊的值。題外話最近在看《JavaScript高級程序設計》這本書，面對著700多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。探究一下到底怎么讀這本書。本書的內容好像...

jubincn 2019-08-29 14:08 評論0 收藏0