本文實(shí)例講述了JS原型和原型鏈原理與用法。分享給大家供大家參考，具體如下：

Javascript語(yǔ)言的繼承機(jī)制一直很難被人理解。

它沒(méi)有"子類(lèi)"和"父類(lèi)"的概念，也沒(méi)有"類(lèi)"（class）和"實(shí)例"（instance）的區(qū)分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來(lái)實(shí)現(xiàn)繼承。

Brendan Eich設(shè)計(jì)javascript之初是為了實(shí)現(xiàn)網(wǎng)頁(yè)與瀏覽器之間交互的一種簡(jiǎn)單的腳本語(yǔ)言

如果真的是一種簡(jiǎn)易的腳本語(yǔ)言，其實(shí)不需要有"繼承"機(jī)制。但是，Javascript里面都是對(duì)象，必須有一種機(jī)制，將所有對(duì)象聯(lián)系起來(lái)。所以，Brendan Eich最后還是設(shè)計(jì)了"繼承"。

背景介紹

1.構(gòu)造函數(shù)

構(gòu)造函數(shù) ，是一種特殊的方法。主要用來(lái)在創(chuàng)建對(duì)象時(shí)初始化對(duì)象。每個(gè)構(gòu)造函數(shù)都有prototype(原型)屬性

2.原型模式

每個(gè)函數(shù)都有prototype(原型)屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，這個(gè)對(duì)象的用途是包含特定類(lèi)型的所有實(shí)例共享的屬性和方法，即這個(gè)原型對(duì)象是用來(lái)給實(shí)例共享屬性和方法的。

而每個(gè)實(shí)例內(nèi)部都有一個(gè)指向原型對(duì)象的指針。

原型鏈

每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含指向原型對(duì)象內(nèi)部的指針。我們讓原型對(duì)象的實(shí)例（1）等于另一個(gè)原型對(duì)象（2）,

此時(shí)原型對(duì)象（2）將包含一個(gè)指向原型對(duì)象（1）的指針，

再讓原型對(duì)象（2）的實(shí)例等于原型對(duì)象（3），如此層層遞進(jìn)就構(gòu)成了實(shí)例和原型的鏈條，這就是原型鏈的概念

構(gòu)造函數(shù)

構(gòu)造函數(shù) ，是一種特殊的方法。主要用來(lái)在創(chuàng)建對(duì)象時(shí)初始化對(duì)象。 即為對(duì)象變量賦初始值。每個(gè)構(gòu)造函數(shù)的實(shí)例都將共享構(gòu)造函數(shù)的初始值。 構(gòu)造函數(shù)的出現(xiàn)是為了解決使用Object構(gòu)造函數(shù)和字面量表示法不方便創(chuàng)建大量重復(fù)對(duì)象的問(wèn)題。

傳統(tǒng)創(chuàng)建對(duì)象實(shí)例的方法

  var person={
    name:'張女士',
    age:'80',
    gender:'女'
  };
 console.log(person)

注：這個(gè)方法如果用于創(chuàng)建大量相同屬性和方法的對(duì)象時(shí)，會(huì)產(chǎn)生大量重復(fù)代碼

構(gòu)造函數(shù)的方法

//構(gòu)造函數(shù)方法創(chuàng)建對(duì)象實(shí)例
function Person(name,age,gender) {
this.name=name;
this.age=age;
this.gender=gender;
this.say=function () {
    alert(this.name)
  }
}
var person1=new Person('鐘女士',80,'女');
var person2=new Person('張女士',80,'女');
console.log(person2)
console.log(person1)

原型模式

使用構(gòu)造函數(shù)的問(wèn)題是，每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍，即在構(gòu)造函數(shù)的不同實(shí)例上的同名函數(shù)是不相等的。而我們創(chuàng)建每個(gè)構(gòu)造函數(shù)都有一個(gè)prototype(原型)屬性，這個(gè)屬性是個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類(lèi)型的所有實(shí)例共享的屬性和方法，我們使用這個(gè)原型對(duì)象來(lái)共享實(shí)例的屬性和方法的模式就叫原型模式

//原型模式創(chuàng)建對(duì)象
function Person(){
}
Person.prototype.name='鐘女士';
Person.prototype.age=80;
Person.prototype.gender='女';
var person1= new Person();
console.log(person1)
//簡(jiǎn)寫(xiě)原型模式
Person.prototype={
  constructor:Person
  name:'鐘女士'，
  age:80,
  gender:'女'
}

注：每個(gè)原型對(duì)象都有constructor屬性，由于簡(jiǎn)寫(xiě)模式重寫(xiě)了默認(rèn)的prototype對(duì)象，所以constructor也會(huì)被重新定義，不再指向他的構(gòu)造函數(shù)，所以可以自己寫(xiě)一個(gè)constructor屬性指向他的構(gòu)造函數(shù)

原型鏈

每個(gè)構(gòu)造函數(shù)都有原型對(duì)象，每個(gè)構(gòu)造函數(shù)實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針（proto），如果我們讓第一個(gè)構(gòu)造函數(shù)的原型對(duì)象等于第二個(gè)構(gòu)造函數(shù)的實(shí)例，結(jié)果第一個(gè)構(gòu)造函數(shù)的原型對(duì)象將包含一個(gè)指向第二個(gè)原型對(duì)象的指針，再然第三個(gè)原型對(duì)象等于第一個(gè)構(gòu)造函數(shù)的實(shí)例，這樣第三個(gè)原型對(duì)象也將包含指向第一個(gè)原型對(duì)象的指針，以此類(lèi)推，就夠成了實(shí)例于原型的鏈條，這就是原型鏈的基本概念

function One(){
}
function Two(){
}
function Three(){
}
Two.prototype=new One();
Three.prototype=new Two();
var three=new Three();
console.log(three);
console.log(three.__proto__===Three.prototype) //true
console.log(three.__proto__.__proto__===Two.prototype) //true
console.log(three.__proto__.__proto__.__proto__===One.prototype) //true
console.log(three.__proto__.__proto__.__proto__.__proto__===Object.prototype) //true

在對(duì)象實(shí)例中，訪問(wèn)對(duì)象原型的方法

• 1、使用proto屬性

此屬性是瀏覽器支持的一個(gè)屬性，并不是ECMAScript里的屬性

• 2.Object.getPrototypeOf
• 3.使用constructor.prototype的方法

對(duì)于不支持proto的瀏覽器，可以使用constructor，訪問(wèn)到對(duì)象的構(gòu)造函數(shù)，在用prototype訪問(wèn)到原型

使用原型鏈解釋ANUGLAR作用域

在開(kāi)發(fā)過(guò)程中，我們可能會(huì)出現(xiàn)控制器的嵌套，看下面這段代碼：

  <div ng-controller="OuterCtrl">
    <span>{{a}}</span>
     <div ng-controller="InnerCtrl">
      <span>{{a}}</span>
     </div>
   </div>
  <script>
  function OuterCtrl($scope) {
  $scope.a = 1;
  }
  function InnerCtrl($scope) {
  }
  </script>

我們可以看到界面顯示了兩個(gè)1，而我們只在OuterCtrl的作用域里定義了a變量，但界面給我們的結(jié)果是，兩個(gè)a都有值,現(xiàn)在自控制器里的a是從父控制器里繼承過(guò)來(lái)的

我們可以父子級(jí)的作用域看成兩個(gè)原型對(duì)象，其中一個(gè)原型對(duì)象繼承另一個(gè)原型對(duì)象的實(shí)例

function Outer() {
  this.a = 1;
}
function Inner() {
}
var outer = new Outer();
Inner.prototype=new Outer();
var inner = new Inner();
console.log(outer.a)
console.log(inner.a)

Angular的實(shí)現(xiàn)機(jī)制其實(shí)也就是把這兩個(gè)控制器中的$scope作了關(guān)聯(lián)，外層的作用域?qū)嵗蔀榱藘?nèi)層作用域的原型。

既然作用域是通過(guò)原型來(lái)繼承的，自然也就可以推論出一些特征來(lái)。比如說(shuō)這段代碼，點(diǎn)擊按鈕的結(jié)果是什么？

<div ng-controller="OuterCtrl">
  <span>{{a}}</span>
  <div ng-controller="InnerCtrl">
    <span>{{a}}</span>
    <button ng-click="a=a+1">a++</button>
  </div>
</div>
<script>
function OuterCtrl($scope) {
  $scope.a = 1;
}
 
function InnerCtrl($scope) {
}
</script>

點(diǎn)了按鈕之后，兩個(gè)a不一致了，里面的變了，外面的沒(méi)變，這是為什么？

function Outer() {
  this.a = 1;
}
function Inner() {
}
var outer = new Outer();
Inner.prototype=new Outer();
var inner = new Inner();
inner.a = inner.a + 1;
console.log(outer.a)
console.log(inner.a)

因?yàn)樵谠玩溨?，訪問(wèn)一個(gè)實(shí)例屬性時(shí)，會(huì)在實(shí)例本身查找，如果找不到，則搜索實(shí)例的原型，如果再搜索不到，則繼續(xù)沿著原型鏈往上查找。找到之后則會(huì)賦給該實(shí)例，所以inner上面就被賦值了一個(gè)新的a，outer里面的仍然保持原樣，這也就導(dǎo)致了剛才看到的結(jié)果。

上下級(jí)共享變量

比如說(shuō)，我們就是想上下級(jí)共享變量，不創(chuàng)建新的，該怎么辦呢？

function Outer() {
  this.data = {
    a: 1
  };
}
function Inner() {
}
var outer = new Outer();
Inner.prototype = outer;
var inner = new Inner();
console.log(outer.data.a);
console.log(inner.data.a);
inner.data.a += 1;
console.log(outer.data.a);
console.log(inner.data.a);

我們可以把a(bǔ)寫(xiě)在一個(gè)對(duì)象里，當(dāng)inner找到對(duì)象data并賦值到自己身上時(shí)，其實(shí)是復(fù)制了對(duì)象的指針（參考高程第4章復(fù)制引用類(lèi)型和基本類(lèi)型的區(qū)別），我們對(duì)對(duì)象里的屬性的改動(dòng)都會(huì)反映到所有引用該對(duì)象的元素上。
反映到AngularJs,我們可以這么寫(xiě)

<div ng-controller="OuterCtrl">
  <span>{{data.a}}</span>
  <div ng-controller="InnerCtrl">
    <span>{{data.a}}</span>
    <button ng-click="data.a=data.a+1">increase a</button>
  </div>
</div>
<script>
function OuterCtrl($scope) {
  $scope.data = {
    a: 1
  };
}
function InnerCtrl($scope) {
}
</script>

這樣點(diǎn)擊按鈕兩個(gè)控制器的a都會(huì)+1

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論