1.1 概述

在典型的 OOP 的語言中（如 Java），都存在類的概念，類就是對象的模板，對象就是類的實(shí)例，但在 ES6之前， JS 中并沒用引入類的概念。
ES6， 全稱 ECMAScript 6.0 ，2015.06 發(fā)版。但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數(shù)高版本的瀏覽器也支持 ES6，不過只實(shí)現(xiàn)了 ES6 的部分特性和功能。
在 ES6之前 ，對象不是基于類創(chuàng)建的，而是用一種稱為構(gòu)建函數(shù)的特殊函數(shù)來定義對象和它們的特征。

創(chuàng)建對象可以通過以下三種方式：

對象字面量

new Object()

自定義構(gòu)造函數(shù)

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

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

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

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

構(gòu)造函數(shù)用于創(chuàng)建某一類對象，其首字母要大寫

構(gòu)造函數(shù)要和 new 一起使用才有意義

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

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ù)本身來訪問
實(shí)例成員：在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對象成員稱為實(shí)例成員，只能由實(shí)例化的對象來訪問

靜態(tài)成員和實(shí)例成員：

// 構(gòu)造函數(shù)中的屬性和方法我們稱為成員, 成員可以添加function Star(uname, age) {this.uname = uname;this.age = age;this.sing = function() {console.log('我會唱歌');}}var ldh = new Star('劉德華', 18);// 1.實(shí)例成員就是構(gòu)造函數(shù)內(nèi)部通過this添加的成員 uname age sing 就是實(shí)例成員// 實(shí)例成員只能通過實(shí)例化的對象來訪問console.log(ldh.uname);ldh.sing();// console.log(Star.uname); // 不可以通過構(gòu)造函數(shù)來訪問實(shí)例成員// 2. 靜態(tài)成員 在構(gòu)造函數(shù)本身上添加的成員 sex 就是靜態(tài)成員Star.sex = '男';// 靜態(tài)成員只能通過構(gòu)造函數(shù)來訪問console.log(Star.sex);console.log(ldh.sex); // 不能通過對象來訪問

1.3 構(gòu)造函數(shù)的問題

構(gòu)造函數(shù)方法很好用，但是存在浪費(fèi)內(nèi)存的問題。

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

構(gòu)造函數(shù)通過原型分配的函數(shù)是所有對象所共享的。
JavaScript 規(guī)定，每一個構(gòu)造函數(shù)都有一個 prototype 屬性，指向另一個對象。注意這個 prototype 就是一個對象，這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)所擁有。

我們可以把那些不變的方法，直接定義在 prototype 對象上，這樣所有對象的實(shí)例就可以共享這些方法。

問答？

原型是什么 ？
一個對象，我們也稱為 prototype 為原型對象。

原型的作用是什么 ？
共享方法。

1.5 對象原型 __proto__

對象都會有一個屬性 __proto__ 指向構(gòu)造函數(shù)的 prototype 原型對象，之所以我們對象可以使用構(gòu)造函數(shù) prototype 原型對象的屬性和方法，就是因?yàn)閷ο笥?__proto__ 原型的存在。
__proto__對象原型和原型對象 prototype 是等價的
__proto__對象原型的意義就在于為對象的查找機(jī)制提供一個方向，或者說一條路線，但是它是一個非標(biāo)準(zhǔn)屬性，因此實(shí)際開發(fā)中，不可以使用這個屬性，它只是內(nèi)部指向原型對象 prototype

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

對象原型（ __proto__）和構(gòu)造函數(shù)（prototype）原型對象里面都有一個屬性 constructor 屬性 ，constructor 我們稱為構(gòu)造函數(shù)，因?yàn)樗富貥?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ù)。

1.7 構(gòu)造函數(shù)、實(shí)例、原型對象三者之間的關(guān)系

1.8 原型鏈

1.9 JavaScript 的成員查找機(jī)制(規(guī)則)

當(dāng)訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性。

如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對象）。

如果還沒有就查找原型對象的原型（Object的原型對象）。

依此類推一直找到 Object 為止（null）。

__proto__對象原型的意義就在于為對象成員查找機(jī)制提供一個方向，或者說一條路線。

1.10 原型對象this指向

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

1.11 擴(kuò)展內(nèi)置對象

可以通過原型對象，對原來的內(nèi)置對象進(jìn)行擴(kuò)展自定義的方法。比如給數(shù)組增加自定義求偶數(shù)和的功能。

注意：數(shù)組和字符串內(nèi)置對象不能給原型對象覆蓋操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。

總結(jié)

以上是生活随笔為你收集整理的JavaScript高级之构造函数和原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。