JS中的原型對象

whlong 發布于2019-08-22 16:14 / 3049人閱讀

摘要：下面列幾個權威指南里面介紹的關于原型的方法獲取一個實例對象的原型才支持部分瀏覽器也支持一個屬性判斷一個構造函數是否是指定實例對象的原型

JS中的原型對象

白天寫了一篇【JS中創建對象的方法】，寫完以后感覺意猶未盡（實際情況是感覺原型那塊內容沒有交
代清楚），所以開這一篇繼續聊聊關于JavaScript中的原型對象

相信用過vue的童鞋，都經常這樣做，用Vue.prototype.xxx = xxx 把一個方法或者屬性添加到Vue對象的原型上，
這樣，我們在vue實例的任何地方，都可以用這個方法或屬性了，我最喜歡用的，就是把異步請求庫
（我比較喜歡用axios）掛載到vue原型上：

// 一般是./src/mian.js
// 這里為了方便理解就直接引入axios，實際使用，我們可以先用axios封裝一個異步請求模塊
// 在模塊里做一些攔截或者處理，然后再導入這個模塊。具體做法看
import axios from "axios"
import Vue from "vue"
import App from "./App"
// 為所有Vue實例添加一個post模塊，可以在vue實例中直接使用this.post
Vue.prototype.post = axios
new Vue({
  el: "#app",
  components: { App },
  template: ""
})

這了是prototype就是我們所說的原型，那什么是原型呢？我們看看MDN給的解釋

當談到繼承時，JavaScript 只有一種結構：對象。每個對象都有一個私有屬性（稱之為 [[Prototype]]），
它指向它的原型對象（prototype）。該 prototype 對象又具有一個自己的 prototype ，
層層向上直到一個對象的原型為 null。根據定義，null 沒有原型，并作為這個原型鏈中的最后一個環節。

視乎看起好有點拗口，沒關系，我用自己的話總結了一下

1.prototype其實就是存在于對象中的一個特殊的對象，你可以把它理解為對象的一個屬性或方法，
如 a.prototype,看起來是不是很像對象a的一個屬性呢？

2.每個對象都有一個prototype,除了null

那這個prototype是干嘛的呢？其實回頭看看上面關于vue的代碼就知道了，
prototype最主要的作用就是該原型所屬對象的所有實例，都能共享prototype里的屬性和方法
上面的代碼中，通過向Vue.prototype中添加一個post方法，然后就可以在所有vue實例中使用該方法，就是個簡單的實踐。

我們回頭看看【JS中創建對象的方法】里面的原型模式

function Student(){}   // 聲明一個空函數
Student.prototype.name = "xiaohong"
Student.prototype.age = 17
Student.prototype.gender = "f"
Student.prototype.study = fucntion() { console.log("我在學習...")}

我們先定義了一個空函數，注意：這個時候，我們并沒有認為的給函數添加一個prototype屬性/方法，
而Student卻自動有了prototype，然后我們往prototype里面添加了name,age,gender屬性和study方法，
然后我們用new實例化2個Student對象出來

var studentA = new Student()
console.log(studentA.name)    // xiaohong
console.log(studentA.age)     // 17
console.log(studentA.gender)  // f
studentA.study()              // 我在學習...

var studentB = new Student()
console.log(studentB.age)     // xiaohong
console.log(studentB.name)    // 17
console.log(studentB.gender)  // f
studentB.study()              // 我在學習...

上面的例子可以看出，對象的prototype里面的屬性和方法，在該對象的所有實例里面，都是共享的
那如果我們想要讓實例對象有自己的屬性/方法，該怎么辦呢？比如，我想讓studentB的名字是"lili",
很簡單，直接在實例對象上添加該屬性/方法：

studentA.name = "lili"
studentA.study = function () {
    console.log("我在偷懶")
}

console.log(studentA.name)  // lili
console.log(studentB.name)  // xiaohong
studentA.study()            // 我在偷懶
studentB.study()            // 我在學習...

可以看出，studentA的屬性/方法被改變的時候，studentB沒有對應的跟著改變，這是為什么呢？
不是說好的全所有prototype里的屬性/方法都是共享的嗎？事實上，prototype里的屬性/方法，確實是共享的，
問題出在我們是在實例對象上賦值，所以這個屬性/方法，是屬于實例的，而不是屬于prototype的，prototype的屬性，
也無法在實例對象上寫入，也就是說，實例對象和prototype上，同時存在了 name屬性和study方法，那么，
為什么 studentA 和 studentB 訪問到的屬性/方法會不一樣呢？其實每次訪問一個屬性/方法的時候，
都會先從實例對象開始查找，如果實例上有，就直接返回，如果實例上沒有，就繼續往prototype上查找,有就返回，
如果prototype上還有 prototype，那么還會繼續網上查找，直到原型鏈的最頂層。如果都沒有查到，則會返回undefined。

那么新的問題來了，我們該如何判斷一個屬性，是屬于實例本身的，還是屬于prototype的？答案是hasOwnProperty方法，
hasOwnProperty方法可以檢測到實例對象里面有沒有給定的屬性，該方法只能檢測到實例里面的屬性，檢測不到prototype上的

studentA.hasOwnProperty("name")  // true
studentB.hasOwnProperty("name")  // false

那如果想同時查找實例對象和原型對象prototype呢？我們可以用 in 操作符

"name" in studentA    // true
"name" in studentB    // true

有了這2個方法，我們就可以組合起來判斷屬性是屬于實例還是原型了。

這里老是說到實例，不得不提一下，實例對象雖然是構造函數“構造”出來的，但是其實跟構造函數沒有直接聯系，
實例對象內部指向的是構造函數的prototype（原型）。 實例跟構造函數的一個間接關系是
實例.prototype.constructor --> 構造函數

關于原型的介紹就到這里，有需要更深入的童鞋，建議去讀一下javascript權威指南。里面關于原型的介紹比我這詳細。

下面列幾個javascript權威指南里面介紹的關于原型的方法

獲取一個實例對象的原型 (ES5才支持)

Object.getPrototypeOf(studentA) // Student.prototype

部分瀏覽器（chrome,safari,firefox）也支持一個屬性 __proto__

studentA.__proto__ == Student.prototype

判斷一個構造函數是否是指定實例對象的原型

Student.prototype.isPrototypeOf(studentA) // true

云服務器 GPU云服務器 js中的對象 js包裝對象中的屬性 js 獲取對象中的數據類型 js原型面試題

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

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

JS對象繼承與原型鏈

摘要：此用來定義通過構造器構造出來的對象的原型，構造器內部的代碼用來給對象初始化。對象繼承 VS 類繼承在 class-based 的面向對象的世界里，要出現對象，必須先有類。類之間可以繼承，類再使用 new 操作創建出實體，父子對象之間的繼承體現在父類和子類上。你不能說對象 a 繼承了對象 b，只能說 class A 繼承了 class B，然后他們各自有一個實例a、b。 JS中實現...

QLQ 2019-08-22 11:08 評論0 收藏0
你是否理解js的Object與Function與原型鏈

摘要：原型對象是由創建的，因此原型對象的構造函數是構造函數也可以是稱為對象，原型對象也就繼承了其生父構造函數中的數據，也同時繼承了原型對象的數據。當然這條原型鏈中的數據，會被還是還是這類構造函數繼承，但是不會被這些繼承，他們不處于同一個鏈條上。 js中，Function的本質是什么？Object的本質又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

itvincent 2019-08-20 17:51 評論0 收藏0
一次性搞懂js中的原型與原型鏈

摘要：每個原型都有一個屬性指向關聯的構造函數由于實例對象可以繼承原型對象的屬性，所以實例對象也擁有屬性，同樣指向原型對象對應的構造函數。 showImg(https://segmentfault.com/img/remote/1460000017183104?w=1300&h=834); 構造函數：function Foo ( ) { }; 實例對象：let f1=new Foo; 談到...

Freeman 2019-08-23 13:46 評論0 收藏0
JS對象(1)重新認識面向對象

摘要：對象重新認識面向對象面向對象從設計模式上看，對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外，允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象從設計模式上看，對象是...

superw 2019-08-21 11:17 評論0 收藏0
JS對象隨筆

摘要：原型對象對象的原型對象實質上是對象的構造函數的原型對象。構造函數所有的對象都是通過構造函數實例化出來的。即一個對象，如果沿著原型鏈找下去，最終都會找到構造函數原型對象相互之間糾纏不休，你中有我，我中有你。 JS中的對象 JS中對象（若無特殊說明，本文中的對象都為對象實例，即使是空對象實例）可謂是一個核心的概念，縱觀整個JS的數據結構如String、Number、Array、Boolea...

Lin_YT 2019-08-20 13:41 評論0 收藏0