一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈

1概述

ES6， 全稱 ECMAScript 6.0 ，2015.06 發(fā)版。在ES6之前，對(duì)象不是基于類創(chuàng)建的，而是用一種稱為構(gòu)造函數(shù)的特殊函數(shù)來定義對(duì)象和它們的特征。

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

構(gòu)造函數(shù)是一種特殊的函數(shù)，主要用來初始化對(duì)象，即為對(duì)象成員變量賦初始值，它總與 new 一起使用。我們可以把對(duì)象中一些公共的屬性和方法抽取出來，然后封裝到這個(gè)函數(shù)里面。

 // 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象
  function Person(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
      console.log('我會(huì)唱歌');
    }
  }
  var ldh = new Person('劉德華', 18);
  var zxy = new Person('張學(xué)友', 19);
  console.log(ldh);
  ldh.sing();
  zxy.sing();

在 JS 中，使用構(gòu)造函數(shù)時(shí)要注意以下兩點(diǎn)：

構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象，其首字母要大寫構(gòu)造函數(shù)要和 new 一起使用才有意義

（1）構(gòu)造函數(shù)執(zhí)行過程

new 在執(zhí)行時(shí)會(huì)做四件事情：
① 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
② 讓 this 指向這個(gè)新的對(duì)象。
③ 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)新對(duì)象添加屬性和方法。
④ 返回這個(gè)新對(duì)象（所以構(gòu)造函數(shù)里面不需要 return ）。

（2）構(gòu)造函數(shù)的成員

JavaScript 的構(gòu)造函數(shù)中可以添加一些成員，可以在構(gòu)造函數(shù)本身上添加，也可以在構(gòu)造函數(shù)內(nèi)部的 this 上添加。通過這兩種方式添加的成員，就分別稱為靜態(tài)成員和實(shí)例成員。

• 靜態(tài)成員：在構(gòu)造函數(shù)本上添加的成員稱為靜態(tài)成員，只能由構(gòu)造函數(shù)本身來訪問

//靜態(tài)成員 在構(gòu)造函數(shù)本身上添加的成員 sex 就是靜態(tài)成員
// 靜態(tài)成員只能通過構(gòu)造函數(shù)來訪問
Person.sex = '男';
 console.log(Person.sex);

• 實(shí)例成員：在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象成員稱為實(shí)例成員，只能由實(shí)例化的對(duì)象來訪問

function Person(uname) {
      this.uname = uname;
      }

3構(gòu)造函數(shù)原型prototype

構(gòu)造函數(shù)通過原型分配的函數(shù)是所有對(duì)象所共享的。
JavaScript 規(guī)定，每一個(gè)構(gòu)造函數(shù)都有一個(gè) prototype 屬性，指向另一個(gè)對(duì)象。注意這個(gè) prototype 就是一個(gè)對(duì)象，這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)所擁有。
我們可以把那些不變的方法，直接定義在 prototype 對(duì)象上，這樣所有對(duì)象的實(shí)例就可以共享這些方法。

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
    // this.sing = function() {
    //   console.log('我會(huì)唱歌');
    // }
  }
  // 一般情況下,我們的公共屬性定義到構(gòu)造函數(shù)里面, 公共的方法我們放到原型對(duì)象身上
  Person.prototype.sing = function() {
    console.log('我會(huì)唱歌');
  }
  var ldh = new Person('劉德華', 18);
  var zxy = new Person('張學(xué)友', 19);
  console.log(ldh.sing === zxy.sing); //true
  ldh.sing();
  zxy.sing();

• 原型是什么 ？
• 一個(gè)對(duì)象，我們也稱為 prototype 為原型對(duì)象。
• 原型的作用是什么 ？
• 共享方法。

4 對(duì)象原型 __proto__

對(duì)象都會(huì)有一個(gè)屬性 __proto__ 指向構(gòu)造函數(shù)的 prototype 原型對(duì)象，之所以我們對(duì)象可以使用構(gòu)造函數(shù) prototype 原型對(duì)象的屬性和方法，就是因?yàn)閷?duì)象有__proto__原型的存在。

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  Person.prototype.sing = function() {
    console.log('我會(huì)唱歌');
  }
  var mingo = new Person('小明', 18);
  var zxy = new Person('張學(xué)友', 19);
  mingo.sing();
  console.log(mingo); // 對(duì)象身上系統(tǒng)自己添加一個(gè) __proto__ 指向我們構(gòu)造函數(shù)的原型對(duì)象 prototype
  console.log(mingo.__proto__ === Person.prototype); //true

• __proto__對(duì)象原型和原型對(duì)象prototype是等價(jià)的
• (如圖箭頭指向，mingo是Person構(gòu)造函數(shù)創(chuàng)建出來的一個(gè)對(duì)象實(shí)例，這個(gè)對(duì)象實(shí)例的原型（__proto__），就是Person構(gòu)造函數(shù)的原型對(duì)象prototype。)
• __proto__對(duì)象原型的意義就在于為對(duì)象的查找機(jī)制提供一個(gè)方向，或者說一條路線，但是它是一個(gè)非標(biāo)準(zhǔn)屬性， 因此實(shí)際開發(fā)中，不可以使用這個(gè)屬性，它只是內(nèi)部指向原型對(duì)象 prototype

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

對(duì)象原型 __proto__和構(gòu)造函數(shù)prototype原型對(duì)象(其實(shí)指的就是同一個(gè))里面有一個(gè)屬性 constructor 屬性 ，constructor 我們稱 為構(gòu)造函數(shù)，因?yàn)樗富貥?gòu)造函數(shù)本身。

constructor 主要用于記錄該對(duì)象引用于哪個(gè)構(gòu)造函數(shù)，它可以讓原型對(duì)象重新指向原來的構(gòu)造函數(shù)。
一般情況下，對(duì)象的方法都在構(gòu)造函數(shù)的原型對(duì)象中設(shè)置。如果有多個(gè)對(duì)象的方法，我們可以給原型對(duì)象采取對(duì)象形式賦值，但是這樣就會(huì)覆蓋構(gòu)造函數(shù)原型對(duì)象原來的內(nèi)容，這樣修改后的原型對(duì)象 constructor 就不再指向當(dāng)前構(gòu)造函數(shù)了。
此時(shí)，我們可以在修改后的原型對(duì)象中，添加一個(gè) constructor 指向原來的構(gòu)造函數(shù)。

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  // 很多情況下,我們需要手動(dòng)的利用constructor 這個(gè)屬性指回 原來的構(gòu)造函數(shù)
  Person.prototype = {
    // 如果我們修改了原來的原型對(duì)象,給原型對(duì)象賦值的是一個(gè)對(duì)象,則必須手動(dòng)的利用constructor指回原來的構(gòu)造函數(shù)
    constructor: Person,
    sing: function() {
      console.log('我會(huì)唱歌');
    },
    movie: function() {
      console.log('我會(huì)演電影');
    }
  }
  var mingo = new Person('小明', 18);
  var zxy = new Person('張學(xué)友', 19);
  console.log(Person.prototype);
  console.log(mingo.__proto__);
  console.log(Person.prototype.constructor);
  console.log(mingo.__proto__.constructor);

6原型鏈

每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。那么假如我們讓原型對(duì)象等于另一個(gè)類型的實(shí)例，結(jié)果會(huì)怎樣？顯然，此時(shí)的原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針，相應(yīng)地，另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另一個(gè)原型又是另一個(gè)類型的實(shí)例，那么上述關(guān)系依然成立。如此層層遞進(jìn)，就構(gòu)成了實(shí)例與原型的鏈條。這就是所謂的原型鏈的基本概念?！浴秊avascript高級(jí)程序設(shè)計(jì)》

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  Person.prototype.sing = function() {
    console.log('我會(huì)唱歌');
  }
  var mingo = new Person('小明', 18);
  // 1. 只要是對(duì)象就有__proto__ 原型, 指向原型對(duì)象
  console.log(Person.prototype);
  console.log(Person.prototype.__proto__ === Object.prototype);//true
  // 2.我們Person原型對(duì)象里面的__proto__原型指向的是 Object.prototype
  console.log(Object.prototype.__proto__);
  // 3. 我們Object.prototype原型對(duì)象里面的__proto__原型 指向?yàn)?null
  console.log(Object);

Object 是 JavaScript 中最頂級(jí)的對(duì)象，其它所有對(duì)象都是基于它的，包括你創(chuàng)建的函數(shù)

7JavaScript 的成員查找機(jī)制(基于原型鏈規(guī)則)

① 當(dāng)訪問一個(gè)對(duì)象的屬性（包括方法）時(shí)，首先查找這個(gè)對(duì)象自身有沒有該屬性。
② 如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對(duì)象）。
③ 如果還沒有就查找原型對(duì)象的原型（Object的原型對(duì)象）。
④ 依此類推一直找到 Object 為止（null）。
⑤ __proto__對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向，或者說一條路線。

8 原型對(duì)象this指向

1構(gòu)造函數(shù)中的this 指向我們實(shí)例對(duì)象
2原型對(duì)象里面放的是方法, 這個(gè)方法里面的this 指向的是 這個(gè)方法的調(diào)用者, 也就是這個(gè)實(shí)例對(duì)象

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  var that;
  Person.prototype.sing = function() {
    console.log('我會(huì)唱歌');
    that = this;
    console.log(this);
    
  }
  var mingo = new Person('小明', 18);
  // 1. 在構(gòu)造函數(shù)中,里面this指向的是對(duì)象實(shí)例 mingo
  // 2.原型對(duì)象函數(shù)里面的this 指向的也是 實(shí)例對(duì)象 mingo
  mingo.sing();
  console.log(that === mingo); //true

總結(jié)

到此這篇關(guān)于一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈的文章就介紹到這了,更多相關(guān)JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象及原型鏈內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！