JSprototype物件使用教學

這次帶給大家JSprototype物件使用教學，JSprototype物件使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

我們透過原型方式，解決了多個實例的方法共享問題，接下來，我們就來搞清楚原型(prototype)，原型鏈的來龍去脈。

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

1,每個函數都有一個原型屬性(prototype) ， 這個屬性是一個指針，指向建構子的原型物件( CreateObj.prototype)， 如上圖的第1根綠色的線

2，在預設情況下，所有原型物件都會自動取得一個constructor屬性，該屬性的作用上文已經解釋過，該屬性包含一個指向prototype屬性所在的函數，如上圖的第2根綠色的線

3，所有的實例( 透過建構函式new出來的， 原型物件[ 如CreateObj.prototype, 上圖我還沒畫出來]等)都包含一個隱式原型(proto)，該指標指向實例的建構子的原型物件,

如上圖的第3根線和第4根線. obj1的建構子是CreateObj, CreateObj的原型物件是CreateObj.prototype, obj2同理，所以:

obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4，寫在建構函數中， 為this賦值的屬性與方法， 在畫圖的過程中，把他們畫在物件上面，如userName這個是給物件賦值的屬性，所以在obj1和obj2這兩個物件上都會存在一個屬性userName

# 5，寫在原型物件上的方法或屬性，應該把他們畫在原型物件上，如

CreateObj.prototype.showUserName = function(){
return this.userName;
}

showUserName這個方法就要畫在圖中CreateObj.prototype上面

6，當一個物件存取屬性和方法的時候，他的存取規則叫（就近原則）, 規則如下：

當實例上面，存在屬性或方法時，直接用實例上面的，#​​

## 如果實例上面不存在屬性和方法，就會沿著實例的proto指標所指向的原型物件繼續往上查找，如果找不到，值就是undefined.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

在obj1,obj2上面是不存在showUserName這個方法的，所以會順著proto查找到CreateObj.prototype原型物件上的showUser

Name方法

如果，把CreateObj.prototype原型物件上的showUserName註解掉，那麼obj1.showUserName和obj2.showUserName就會報錯

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

如果在建構函式中為this新增一個showUserName方法， 那麼obj1和obj2就會直接呼叫this上面的，因為這兩個方法會被畫在圖中的實例上，所以：

console.log( obj1.showUserName === obj2.showUserName ); //false

現在，你應該可以明白，把屬性和方法寫在建構子的原型物件(prototype)上之後，能實作多個實例屬性和方法的共享的原理了吧

什麼是原型鏈？

在前面，我有說過，所有的實例（包括原型對象）都有一個隱式原型proto，那麼CreateObj.prototype這個原型對象，他的proto指向誰呢？

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }
  console.log( CreateObj.prototype.proto ); //指向Object.prototype
  console.log( CreateObj.prototype.proto === Object.prototype ); //true

CreateObj.prototype.proto指向的是Object.prototype, 通過 全等

運算子 (===) 測試之後為true

# Object.prototype.proto 指向的是NULL

這就是原型鏈，透過隱式原型把一些建構函式層層的串起來，透過上面這個圖，就知道，為什麼自訂的物件能呼叫toString, valueOf,等方法了吧？

因為所有的物件都是繼承自Object.

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

react-router4.0實作重定向與404功能

js設定元素樣式步奏詳解

JS實作排序方法總結

以上是JSprototype物件使用教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！