1概述

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

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

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

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

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

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

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

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

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

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

• 靜態(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);

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

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

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

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

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

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

4 對象原型 __proto__

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

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

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

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

對象原型 __proto__和構(gòu)造函數(shù)prototype原型對象(其實指的就是同一個)里面有一個屬性 constructor 屬性 ，constructor 我們稱 為構(gòu)造函數(shù)，因為它指回構(gòu)造函數(shù)本身。

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

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  // 很多情況下,我們需要手動的利用constructor 這個屬性指回 原來的構(gòu)造函數(shù)
  Person.prototype = {
    // 如果我們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構(gòu)造函數(shù)
    constructor: Person,
    sing: function() {
      console.log('我會唱歌');
    },
    movie: function() {
      console.log('我會演電影');
    }
  }
  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òu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針，而實例都包含一個指向原型對象的內(nèi)部指針。那么假如我們讓原型對象等于另一個類型的實例，結(jié)果會怎樣？顯然，此時的原型對象將包含一個指向另一個原型的指針，相應(yīng)地，另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)的指針。假如另一個原型又是另一個類型的實例，那么上述關(guān)系依然成立。如此層層遞進(jìn)，就構(gòu)成了實例與原型的鏈條。這就是所謂的原型鏈的基本概念。——摘自《javascript高級程序設(shè)計》

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

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

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

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

8 原型對象this指向

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

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

總結(jié)

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

最新評論