JavaScript高級程序設計－摘要筆記－3

AndroidTraveler 發布于2019-08-22 11:02 / 1125人閱讀

摘要：如果重設構造函數的原型對象，那么，會切斷新的原型對象和任何之前已經存在的構造函數實例之間的聯系，它們引用的仍然是最初的原型。說明返回的對象與構造函數或者與構造函數的原型屬性沒有關系。

說明：

此摘要筆記系列是我最近看《JavaScript高級程序設計(第3版)》隨手所記。
里面分條列舉了一些我認為重要的、需要記下的、對我有幫助的點，是按照我看的順序來的。
摘要筆記本身沒有系統性，沒有全面性可言，寫在這里供有一定基礎的前端開發者參考交流。
里面的知識點、例子大部分來源于本書，或者延伸出來的，都經過我的測試是對的，但是沒辦法保證100%正確，如果有人看到錯誤的地方，希望指出來，謝謝。

對象原型的其它模式 1. 更簡單的原型語法

a. 重寫構造函數的 prototype 屬性

用這種方法如果不設置原型的 constructor 屬性，則原型的 constructor 屬性跟普通對象一樣，指向 Object，
如：

var Person = function () {}
Person.prototype = {
  name: "abc",
  sayHello: function () {
    console.log("hello")
  }
}
Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true

var ming = new Person()
ming.constructor === Person // false
ming.constructor === Object // true
ming.__proto__ === Person.prototype // true
ming instanceof Person // true

b. 設置原型的 constructor 屬性

之后的表現跟在原生的原型對象上添加屬性一樣，
如：

var Person = function () {}
Person.prototype = {
  constructor: Person,
  name: "abc",
  sayHello: function () {
    console.log("hello")
  }
}
Person.prototype.constructor === Person // true

var ming = new Person()
ming.constructor === Person // true
ming.__proto__ === Person.prototype // true
ming instanceof Person // true

但是，重設 constructor 屬性會導致它的 [[Enumerable]] 特性被設置成 true，變成可枚舉的。
這個問題可以用 Object.defineProperty() 來改正。
如：

var Person = function () {}
Person.prototype = {
  name: "abc",
  sayHello: function () {
    console.log("hello")
  }
}
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
})

2. 原型的動態性

如果不重設構造函數的 prototype 原型對象，那么，我們對原型對象的任何修改都能夠反映到實例上，即使先創建實例后修改原型。

如果重設構造函數的 prototype 原型對象，那么，會切斷新的原型對象和任何之前已經存在的構造函數實例之間的聯系，它們引用的仍然是最初的原型。

3. 組合使用構造函數模式和原型模式

創建自定義類型的最常用方式，就是組合使用構造函數模式和原型模式。構造函數用于定義實例屬性，原型模式用于定義方法和共享的屬性。

好處：每個實例都會有自己的實例屬性的副本，同時又共享著對方法的引用，最大限度的節省了內存。
還支持向構造函數傳遞參數。
如：

function Person (name, age) {
  this.name = name
  this.age = age
  this.friends = ["Ming", "Li"]
}
Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name)
  }
}

var zhang = new Person("zhang", 12)
var yang = new Person("yang", 15)
zhang.friends.push("wang")
console.log(zhang.friends) // ["Ming", "Li", "wang"]
console.log(yang.friends) // ["Ming", "Li"]
zhang.sayName === yang.sayName // true

4. 動態原型模式

如：

function Person (name, age) {
  this.name = name
  this.age = age
  if (typeof this.sayName !== "function") {
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
  }
}
// 注意在用這種模式時，不能使用對象字面量重寫原型。

5. 寄生構造函數模式

這種模式的基本思想就是創建一個函數，該函數的作用僅僅是封裝創建對象的代碼，然后再返回新創建的對象。但從表面看，這個函數很像構造函數。
如：

function Person (name, age) {
  var person = {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
  return person
}

var ming = new Person("ming", 12)
ming.sayName() // "ming"
ming instanceof Person // false
ming instanceof Object // true
ming.__proto__ === Object.prototype // true
ming.constructor === Object // true

注意：這個模式除了使用new操作符并把包裝的函數叫做構造函數外，跟工廠模式是一摸一樣的。
說明：返回的對象與構造函數或者與構造函數的原型屬性沒有關系。

6. 穩妥構造函數模式

(因為不使用new操作符，所以函數名稱就不首字母大寫了)

穩妥構造函數模式與寄生構造函數類似，但有兩點不同：一是新創建的實例方法不引用this；二是不使用new操作符調用構造函數。
如：

function person (name, age) {
  var o = {}
  o.sayName = function () {
    console.log(name)
  }
  return o;
}
var ming = person("ming", 12)
ming.sayName() // "ming"
ming instanceof person // false
ming instanceof Object // true

注意：在這里除了調用 sayName 方法，沒有其它辦法訪問 name 的值
說明：同寄生構造函數模式，返回的對象與構造函數或者與構造函數的原型屬性沒有關系。

關于對象原型部分結束。下一篇是繼承相關的內容

GPU云服務器云服務器高級程序設計-筆記高級javascript程序設計 javascript高級程序設計 javascript高級程序

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

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

JavaScript高級程序設計－摘要筆記－6

摘要：關于對象定義了全局對象。支持的瀏覽器有除了接受要序列化的對象外，還可以接受另外兩個參數。如果是數值，則表示每個級別縮進的空格數，最大，超過的值自動轉換成。字符串長度超過，結果中將只出現前個字符。會在結果字符串中插入換行符提高可讀性。關于JSON 1. JSON 對象 es5 定義了全局對象 JSON。支持的瀏覽器有 IE8+ 、Firefox 3.5+ 、Safari 4+、Chro...

Batkid 2019-08-20 13:43 評論0 收藏0
JavaScript高級程序設計－摘要筆記－1

摘要：說明此摘要筆記系列是我最近看高級程序設計第版隨手所記。摘要筆記本身沒有系統性，沒有全面性可言，寫在這里供有一定基礎的前端開發者參考交流。對每一項運行給定函數，返回該函數會返回的項組成的數組。是的反操作是的反操作第一部分結束。說明：此摘要筆記系列是我最近看《JavaScript高級程序設計(第3版)》隨手所記。里面分條列舉了一些我認為重要的、需要記下的、對我有幫助的點，是按照我看...

chavesgu 2019-08-22 10:48 評論0 收藏0
JavaScript高級程序設計－摘要筆記－5

摘要：函數表達式和閉包函數聲明的一個重要特征是函數聲明提升如遞歸遞歸函數是在一個函數通過名字調用自身的情況下構成的。注意中已經是塊級作用域了，所以這些東西感覺實際用途沒有那么大，但是對理解閉包對作用域鏈中的屬性的引用，這一點還是有作用的。函數表達式和閉包 1. 函數聲明的一個重要特征是函數聲明提升如： sayHi() function sayHi () { console.log(h...

JerryWangSAP 2019-08-21 11:17 評論0 收藏0
JavaScript高級程序設計－摘要筆記－4

摘要：思路是，使用原型鏈對原型屬性和方法進行繼承，借用構造函數實現對實例屬性的繼承。注意使用寄生式繼承來為對象添加函數，會由于不能做到函數復用而降低效率，這一點與構造函數模式類似。無論什么情況下都會調用兩次超類型的構造函數。說明：此摘要筆記系列是我最近看《JavaScript高級程序設計(第3版)》隨手所記。里面分條列舉了一些我認為重要的、需要記下的、對我有幫助的點，是按照我看的順序來的...

zr_hebo 2019-08-22 11:02 評論0 收藏0
JavaScript高級程序設計－摘要筆記－2

摘要：說明此摘要筆記系列是我最近看高級程序設計第版隨手所記。其中，描述符對象的屬性必須是設置其中一個或多個值，可以修改對應的特性值。如支持的瀏覽器，可以取得指定屬性的描述符。說明：此摘要筆記系列是我最近看《JavaScript高級程序設計(第3版)》隨手所記。里面分條列舉了一些我認為重要的、需要記下的、對我有幫助的點，是按照我看的順序來的。摘要筆記本身沒有系統性，沒有全面性可言，寫在這里...

roland_reed 2019-08-22 10:48 評論0 收藏0