原型是JavaScript中一個(gè)比較難理解的概念，原型相關(guān)的屬性也比較多，對(duì)象有”prototype”屬性，函數(shù)對(duì)象有”prototype”屬性，原型對(duì)象有”constructor”屬性。

一、初識(shí)原型
在JavaScript中，原型也是一個(gè)對(duì)象，通過(guò)原型可以實(shí)現(xiàn)對(duì)象的屬性繼承，JavaScript的對(duì)象中都包含了一個(gè)”[[Prototype]]”內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型。
“[[Prototype]]”作為對(duì)象的內(nèi)部屬性，是不能被直接訪問(wèn)的。所以為了方便查看一個(gè)對(duì)象的原型，F(xiàn)irefox和Chrome中提供了__proto__這個(gè)非標(biāo)準(zhǔn)（不是所有瀏覽器都支持）的訪問(wèn)器（ECMA引入了標(biāo)準(zhǔn)對(duì)象原型訪問(wèn)器”O(jiān)bject.getPrototype(object)”）。在JavaScript的原型對(duì)象中，還包含一個(gè)”constructor”屬性，這個(gè)屬性對(duì)應(yīng)創(chuàng)建所有指向該原型的實(shí)例的構(gòu)造函數(shù)

二、規(guī)則
在JavaScript中，每個(gè)函數(shù) 都有一個(gè)prototype屬性，當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)來(lái)創(chuàng)建實(shí)例時(shí)，這個(gè)函數(shù)的prototype屬性值會(huì)被作為原型賦值給所有對(duì)象實(shí)例（也就是設(shè)置 實(shí)例的`__proto__`屬性），也就是說(shuō)，所有實(shí)例的原型引用的是函數(shù)的prototype屬性。(****`只有函數(shù)對(duì)象才會(huì)有這個(gè)屬性!`****)

new 的過(guò)程分為三步 

var p = new Person('張三',20);

1. var p={}; 初始化一個(gè)對(duì)象p。
2. p._proto_=Person.prototype;，將對(duì)象p的 __proto__ 屬性設(shè)置為 Person.prototype
3. Person.call(p,”張三”,20);調(diào)用構(gòu)造函數(shù)Person來(lái)初始化p。關(guān)于call/apply使用

三、初識(shí)Object
Object對(duì)象本身是一個(gè)函數(shù)對(duì)象。(CODE TEST) 既然是Object函數(shù)，就肯定會(huì)有prototype屬性，所以可以看到”O(jiān)bject.prototype”的值就是”O(jiān)bject {}”這個(gè)原型對(duì)象。反過(guò)來(lái)，當(dāng)訪問(wèn)”O(jiān)bject.prototype”對(duì)象的”constructor”這個(gè)屬性的時(shí)候，就得到了Obejct函數(shù)。
另外，當(dāng)通過(guò)”O(jiān)bject.prototype._proto_”獲取Object原型的原型的時(shí)候，將會(huì)得到”null”，也就是說(shuō)”O(jiān)bject {}”原型對(duì)象就是原型鏈的終點(diǎn)了。
四、初識(shí)Function
如上面例子中的構(gòu)造函數(shù)，JavaScript中函數(shù)也是對(duì)象，所以就可以通過(guò)_proto_查找到構(gòu)造函數(shù)對(duì)象的原型。
Function對(duì)象作為一個(gè)函數(shù)，就會(huì)有prototype屬性，該屬性將對(duì)應(yīng)”function () {}”對(duì)象。
Function對(duì)象作為一個(gè)對(duì)象，就有__proto__屬性，該屬性對(duì)應(yīng)”Function.prototype”，也就是說(shuō)，”Function._proto_ === Function.prototype”。

在這里對(duì)“prototype”和“proto”進(jìn)行簡(jiǎn)單的介紹：
對(duì)于所有的對(duì)象，都有__proto__屬性，這個(gè)屬性對(duì)應(yīng)該對(duì)象的原型.
對(duì)于函數(shù)對(duì)象，除了__proto__屬性之外，還有prototype屬性，當(dāng)一個(gè)函數(shù)被用作構(gòu)造函數(shù)來(lái)創(chuàng)建實(shí)例時(shí)，該函數(shù)的prototype屬性值將被作為原型賦值給所有對(duì)象實(shí)例（也就是設(shè)置實(shí)例的__proto__屬性）

原型鏈結(jié)構(gòu)圖

原型鏈
因?yàn)槊總€(gè)對(duì)象和原型都有原型，對(duì)象的原型指向原型對(duì)象，
而父的原型又指向父的父，這種原型層層連接起來(lái)的就構(gòu)成了原型鏈。

一、屬性查找
當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止，到查找到達(dá)原型鏈的頂部（也就是 Object.prototype），如果仍然沒(méi)有找到指定的屬性，就會(huì)返回 undefined。

function Person(name, age){ 
    this.name = name; 
    this.age = age; 
  } 
Person.prototype.MaxNumber = 9999;
Person.__proto__.MinNumber = -9999;
var will = new Person("Will", 28); 
console.log(will.MaxNumber); // 9999 
console.log(will.MinNumber); // undefined 

在這個(gè)例子中分別給”P(pán)erson.prototype “和” Person.proto”這兩個(gè)原型對(duì)象添加了”MaxNumber “和”MinNumber”屬性，這里就需要弄清”prototype”和”proto”的區(qū)別了。

“Person.prototype “對(duì)應(yīng)的就是Person構(gòu)造出來(lái)所有實(shí)例的原型，也就是說(shuō)”P(pán)erson.prototype “屬于這些實(shí)例原型鏈的一部分，所以當(dāng)這些實(shí)例進(jìn)行屬性查找時(shí)候，就會(huì)引用到”P(pán)erson.prototype “中的屬性。

對(duì)象創(chuàng)建方式影響原型鏈

  var July = { 
    name: "張三", 
    age: 28, 
    getInfo: function(){ 
      console.log(this.name + " is " + this.age + " years old"); 
    }
  } 
 console.log(July.getInfo()); 

當(dāng)使用這種方式創(chuàng)建一個(gè)對(duì)象的時(shí)候，原型鏈就變成下圖了. July對(duì)象的原型是”O(jiān)bject.prototype”也就是說(shuō)對(duì)象的構(gòu)建方式會(huì)影響原型鏈的形式。

{}對(duì)象原型鏈結(jié)構(gòu)圖

綜圖所述
1. 所有的對(duì)象都有__proto__屬性，該屬性對(duì)應(yīng)該對(duì)象的原型.
2. 所有的函數(shù)對(duì)象都有prototype屬性，該屬性的值會(huì)被賦值給該函數(shù)創(chuàng)建的對(duì)3. 象的_proto_屬性.
4. 所有的原型對(duì)象都有constructor屬性，該屬性對(duì)應(yīng)創(chuàng)建所有指向該原型的實(shí)例的構(gòu)造函數(shù).
5. 函數(shù)對(duì)象和原型對(duì)象通過(guò)prototype和constructor屬性進(jìn)行相互關(guān)聯(lián).

以上就會(huì)關(guān)于JS原型、原型鏈的詳細(xì)內(nèi)容介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論