萬字長文深度剖析面向物件的javascript
阿新 • • 發佈：2020-12-02
[toc]
# 簡介
本將會深入講解面向物件在javascript中的應用，並詳細介紹三種物件的生成方式：建構函式，原型鏈，類。
# 什麼是物件
雖然說程式設計師不缺物件，隨時隨地都可以new一個出來，但是在程式的世界中，物件到底是什麼呢？
物件是單個實物的抽象。
物件是一個容器，封裝了屬性（property）和方法（method）。
而面向物件是相對於面向過程來講的，面向物件方法，把相關的資料和方法組織為一個整體來看待，從更高的層次來進行系統建模，更貼近事物的自然執行模式。
面向物件的好處就是可抽象，封裝和可重用性，同時提供了繼承和多型等非常有用的特性。
而隨著JS的發展，已經超越了最開始的指令碼語言，尤其是nodejs的出現之後，更是極大的豐富了js的工作能力。
所以JS也需要進行物件化。
一般來說，在JS中構建物件有三種方式：
* 建構函式（constructor）
* 原型鏈（prototype）
* 類(class) ---ES6提供
接下來，我們一一來講解。
# 建構函式
建構函式是專門用來生成物件的函式。它提供模板，描述物件的基本結構。
一個建構函式，可以生成多個物件，這些物件都有相同的結構。建構函式的寫法就是一個普通的函式，但是有自己的特徵和用法.
~~~js
var Book = function () {
this.name = 'www.flydean.com';
}
~~~
Book就是建構函式，它提供模板，用來生成例項物件。為了與普通函式區別，建構函式名字的第一個字母通常大寫。
## 建構函式的特點
建構函式首先是一個函式，也就是說是function開頭的函式。其次函式體內部使用了this關鍵字，代表了所要生成的物件例項。
在使用建構函式的時候，必需用new命令，呼叫Book函式。
new命令的作用，就是執行建構函式，返回一個例項物件。
~~~js
var Book = function () {
this.name = 'www.flydean.com';
}
var b1 = new Book();
console.log(b1.name);
~~~
上面的例子輸出結果：
~~~js
www.flydean.com
~~~
如果我們忘了使用new，會發生什麼情況呢？
~~~js
var Book = function () {
this.name = 'www.flydean.com';
}
var b2 = Book();
console.log(name);
console.log(b2.name);
~~~
第一個輸出會輸出www.flydean.com
而第二個則會報一個錯誤：
~~~js
TypeError: Cannot read property 'name' of undefined
~~~
因為這樣呼叫的this指向的是global,所以this.name變成了全域性變數。
為了避免這種忘記寫new的問題，可以在第一行加上use strict，在嚴格模式中，函式內部的this不能指向全域性物件，預設等於undefined，導致不加new呼叫會報錯。
如果不想使用use strict,則可以在建構函式內部判斷是否使用new命令，如果發現沒有使用，則直接返回一個例項物件。
~~~js
function Person(firstname,lastname){
if(!(this instanceof Person)){
return new Person(firstname,lastname);
}
this.firstname= firstname;
this.firstname = lastname;
}
console.log(Person("jack","ma").firstname);
console.log((new Person("jack","ma")).firstname);
~~~
## new命令的原理
使用new命令時，它後面的函式呼叫就不是正常的呼叫，而是依次執行下面的步驟:
1. 建立一個空物件，作為將要返回的物件例項
2. 將這個空物件的原型，指向建構函式的prototype屬性
3. 將這個空物件賦值給函式內部的this關鍵字
4. 開始執行建構函式內部的程式碼
如果建構函式內部有return語句，而且return後面跟著一個物件，new命令會返回return語句指定的物件；否則，就會不管return語句，返回this物件。
~~~js
var Book = function () {
this.name = 'www.flydean.com';
return {author:'flydean'};
}
console.log((new Book()).author);
~~~
函式內部可以使用new.target屬性。如果當前函式是new命令呼叫，new.target指向當前函式，否則為undefined。
通過new.target我們也可以用來判斷物件是否通過new來建立：
~~~js
function f(){
if(! new.target){
throw new Error('請使用new命令！');
}
}
f();
~~~
建構函式作為模板，可以生成例項物件。但是，有時只能拿到例項物件，而該物件根本就不是由建構函式生成的，這時可以使用Object.create()方法，直接以某個例項物件作為模板，生成一個新的例項物件。
~~~js
var book2 = {
name : '三毛流浪記',
author : '三毛',
getName : function () {
console.log('book name is:' + this.name);
}
}
var book3 = Object.create(book2);
console.log(book3.name);
book3.getName();
~~~
# prototype物件
建構函式有什麼缺點呢？建構函式的缺點就是會將建構函式內部的物件都複製一份：
~~~js
function Book(){
this.name ='www.flydean.com';
this.getName =function (){
console.log('flydean');
}
}
var book1 = new Book();
var book2 = new Book();
console.log(book1.getName === book2.getName);
~~~
輸出結果是 false。說明每次new一個物件，物件中的方法也被拷貝了一份。而這並不是必須的。
JavaScript 的每個物件都繼承另一個物件，後者稱為“原型”（prototype）物件。只有null除外，它沒有自己的原型物件。
原型物件上的所有屬性和方法，都能被派生物件共享。這就是 JavaScript 繼承機制的基本設計。
通過建構函式生成例項物件時，會自動為例項物件分配原型物件。每一個建構函式都有一個prototype屬性，這個屬性就是例項物件的原型物件。
~~~js
function Book(name){
this.name = name;
}
Book.prototype.author ='flydean';
var book1 = new Book();
var book2 = new Book();
console.log(book1.author);
console.log(book2.author);
~~~
上面例子中的author屬性會被Book的所有例項所繼承，Book的prototype物件，就是book1和book2的原型物件。
原型物件的屬性不是例項物件自身的屬性。只要修改原型物件，變動就立刻會體現在所有例項物件上。
由於原型本身也是物件，又有自己的原型，所以形成了一條原型鏈（prototype chain）。
如果一層層地上溯，所有物件的原型最終都可以上溯到Object.prototype，即Object建構函式的prototype屬性指向的那個物件。
Object.prototype物件有沒有它的原型呢？回答可以是有的，就是沒有任何屬性和方法的null物件，而null物件沒有自己的原型。
~~~js
console.log(Object.getPrototypeOf(Object.prototype));
//null
~~~
prototype物件有一個constructor屬性，預設指向prototype物件所在的建構函式.
~~~js
function Book(name){
this.name = name;
}
var book3 =new Book();
console.log(book3.constructor);
console.log(book3.constructor === Book.prototype.constructor);
console.log(book3.hasOwnProperty(constructor));
~~~
還是剛剛的book，book3.constructor就是function Book本身。它也等於Book.prototype.constructor。
constructor屬性的作用，是分辨原型物件到底屬於哪個建構函式。
因為prototype是一個物件，所以物件可以被賦值，也就是說prototype可以被改變：
~~~js
function A(){}
var a = new A();
console.log(a instanceof A);
function B(){}
A.prototype = B.prototype;
console.log(a instanceof A);
~~~
上面的例子中，我們修改了A.prototype,最後a instanceof A值是false。
為了保證不會出現這樣錯誤匹配的問題，我們再構建prototype的時候，一定不要直接重寫整個的prototype，只需要修改其中的某個屬性就好：
~~~js
//不要這樣寫
A.prototype ={
method1:function (){}
}
//比較好的寫法
A.prototype ={
constructor:A,
method1:function (){}
}
//更好的寫法
A.prototype.method1 = function (){}
~~~
# Object的prototype操作
## Object.getPrototypeOf
Object.getPrototypeOf方法返回一個物件的原型。這是獲取原型物件的標準方法.
~~~js
//空物件的prototype是Object.prototype
console.log(Object.getPrototypeOf({}) === Object.prototype);
//function的prototype是Function.prototype
function f(){}
console.log(Object.getPrototypeOf(f) === Function.prototype);
function F(){this.name ='flydean'}
var f1 =new F();
console.log(Object.getPrototypeOf(f1) === F.prototype);
var f2 = new f();
console.log(Object.getPrototypeOf(f2) === f.prototype);
~~~
上面4個的輸出結果都是true。
## Object.setPrototypeOf
Object.setPrototypeOf方法可以為現有物件設定原型，返回一個新物件。
Object.setPrototypeOf方法接受兩個引數，第一個是現有物件，第二個是原型物件。
~~~js
var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(b.name);
~~~
## Object.prototype.isPrototypeOf()
物件例項的isPrototypeOf方法，用來判斷一個物件是否是另一個物件的原型.
~~~js
var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(a.isPrototypeOf(b));
~~~
## Object.prototype.__proto__
__proto__屬性（前後各兩個下劃線）可以改寫某個物件的原型物件。
還是剛才的例子，這次我們使用__proto__來改寫物件的原型。
~~~js
var a = {name: 'flydean'};
var c ={};
c.__proto__ = a;
console.log(Object.getPrototypeOf(c));
~~~
__proto__屬性只有瀏覽器才需要部署，其他環境可以沒有這個屬性，而且前後的兩根下劃線，表示它本質是一個內部屬性，不應該對使用者暴露。
因此，應該儘量少用這個屬性，而是用Object.getPrototypeof()（讀取）和Object.setPrototypeOf()（設定），進行原型物件的讀寫操作。
## 三種獲取原型物件的方法
綜上，我們有三種獲取原型物件的方法：
* obj.__proto__
* obj.constructor.prototype
* Object.getPrototypeOf(obj)
# this物件
this總是返回一個物件，簡單說，就是返回屬性或方法“當前”所在的物件。
~~~js
var book = {
name :'flydean',
getName : function (){
return '書名：'+ this.name;
}
}
console.log(book.getName());
//書名：flydean
~~~
這裡this的指向是可變的，我們看一個例子 ：
~~~js
var book = {
name :'flydean',
getName : function (){
return '書名：'+ this.name;
}
}
var car ={
name :'car'
}
car.getName = book.getName;
console.log(car.getName());
//書名：car
~~~
當 A 物件的方法被賦予 B 物件，該方法中的this就從指向 A 物件變成了指向 B 物件
上面的例子中，我們把book中的getName方法賦值給了car物件，this物件現在就指向了car。
如果某個方法位於多層物件的內部，這時this只是指向當前一層的物件，而不會繼承更上面的層。
~~~js
var book1 = {
name :'flydean',
book2: {
getName : function (){
return '書名：'+ this.name;
}
}
}
console.log(book1.book2.getName());
//書名：undefined
~~~
上面的例子中，this是定義在物件中的函式中，如果是在函式中的函式中定義的this，代表什麼呢？
~~~js
var book3 = {
name :'flydean',
book4: function(){
console.log('book4');
var getName = function (){
console.log(this); //Window
}();
}
}
book3.book4();
~~~
如果在函式中的函式中使用了this，那麼內層的this指向的是全域性的window物件。
所以我們在使用的過程中要避免多層 this。由於this的指向是不確定的，所以切勿在函式中包含多層的this。
如果在全域性環境使用this，它指的就是頂層物件window。
陣列的map和foreach方法，允許提供一個函式作為引數。這個函式內部不應該使用this。
~~~js
var book5 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
this.author.forEach(function (item) {
console.log(this.name+' '+item);
})
}
}
book5.f();
//undefined max
//undefined jacken
~~~
foreach方法的回撥函式中的this，其實是指向window物件，因此取不到o.v的值。原因跟上一段的多層this是一樣的，就是內層的this不指向外部，而指向頂層物件。
怎麼解決呢？我們使用一箇中間變數：
~~~js
var book6 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
var that = this;
this.author.forEach(function (item) {
console.log(that.name+' '+item);
})
}
}
book6.f();
//flydean max
//flydean jacken
~~~
或者將this當作foreach方法的第二個引數，固定它的執行環境：
~~~js
var book7 ={
name : 'flydean',
author : ['max','jacken'],
f: function (){
this.author.forEach(function (item) {
console.log(this.name+' '+item);
},this)
}
}
book7.f();
//flydean max
//flydean jacken
~~~
# 繫結this的方法
JavaScript提供了call、apply、bind這三個方法，來切換/固定this的指向.
## call
函式例項的call方法，可以指定函式內部this的指向（即函式執行時所在的作用域），然後在所指定的作用域中，呼叫該函式.
~~~js
var book = {};
var f = function () {
return this;
}
f() === this ; //true
f.call(book) === book; //true
~~~
上面例子中，如果直接呼叫f(),那麼返回的就是全域性的window物件。如果傳入book物件，那麼返回的就是book物件。
call方法的引數，應該是一個物件。如果引數為空、null和undefined，則預設傳入全域性物件。
如果call方法的引數是一個原始值，那麼這個原始值會自動轉成對應的包裝物件，然後傳入call方法。
~~~js
var f = function () {
return this;
}
console.log(f.call(100));
//[Number: 100]
~~~
call方法還可以接受多個引數.
~~~js
func.call(thisValue,arg1,arg2, ...);
~~~
call的第一個引數就是this所要指向的那個物件，後面的引數則是函式呼叫時所需的引數。
call一般用在呼叫物件的原始方法：
~~~js
var person = {};
person.hasOwnProperty('getName');//false
//覆蓋person的getName方法
person.getName = function(){
return true;
}
person.hasOwnProperty('getName');//true
Object.prototype.hasOwnProperty.call(person,'getName');//false
~~~
## apply
apply方法的作用與call方法類似，也是改變this指向，然後再呼叫該函式。唯一的區別就是，它接收一個數組作為函式執行時的引數.
~~~js
func.apply(thisValue,[arg1,arg2,...])
~~~
## bind
call和apply是改變this的指向，然後呼叫該函式，而bind方法用於將函式體內的this繫結到某個物件，然後返回一個新函式.
~~~js
var d = new Date();
console.log(d.getTime()); //1600755862787
var getTime= d.getTime;
console.log(getTime());//TypeError: this is not a Date object.
~~~
上面的例子中，getTime方法裡面呼叫了this，如果直接把d.getTime賦值給getTime變數，那麼this將會指向全域性的window物件，導致執行錯誤。
我們可以這樣修改：
~~~js
var d = new Date();
console.log(d.getTime()); //1600755862787
var getTime2= d.getTime.bind(d);
console.log(getTime2());
~~~
bind比call方法和apply方法更進一步的是，除了繫結this以外，還可以繫結原函式的引數。
~~~js
var add = function(x,y){
return x +this.m + y + this.n;
}
var addObj ={
m: 10,
n: 10
}
var newAdd = add.bind(addObj,2);
console.log(newAdd(3));//25
~~~
上面的例子中，bind將兩個引數的add方法，替換成了1個引數的add方法。
> 注意，bind每次呼叫都會返回一個新的函式，從而導致無法取消之前的繫結。
# 繼承
## 建構函式的繼承
建構函式的繼承第一步是在子類的建構函式中，呼叫父類的建構函式,讓子類例項具有父類例項的屬性。
然後讓子類的原型指向父類的原型，這樣子類就可以繼承父類原型。
~~~js
function Person (){
this.name = 'person';
}
function Boy(){
Person.call(this);
this.title = 'boy';
}
Boy.prototype= Object.create(Person.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};
var b =new Boy();
b.getTitle();
console.log(b);
~~
呼叫父類的建構函式是初始化例項物件的屬性。子類的原型指向父類的原型是為了基礎父類的原型物件的屬性。
另外一種寫法是Boy.prototype等於一個父類例項：
~~~js
Boy.prototype = new Person();
~~~
上面這種寫法也有繼承的效果，但是子類會具有父類例項的方法。有時，這可能不是我們需要的，所以不推薦使用這種寫法.
JavaScript 不提供多重繼承功能，即不允許一個物件同時繼承多個物件。但是，可以通過變通方法，實現這個功能:
~~~js
function Person1 (){
this.name = 'person';
}
function Person2 (){
this.sex = '男';
}
function Boy(){
Person1.call(this);
Person2.call(this);
this.title = 'boy';
}
//繼承Person1
Boy.prototype= Object.create(Person1.prototype);
//繼承鏈加上Person2
Object.assign(Boy.prototype,Person2.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};
var b =new Boy();
b.getTitle();
console.log(b);
//Boy { name: 'person', sex: '男', title: 'boy' }
~~~
# class
ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已.
~~~js
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
}
~~~
建構函式的prototype屬性，在ES6 的“類”上面繼續存在。事實上，類的所有方法都定義在類的prototype屬性上面。
上面的類等同於：
~~~js
Person.prototype = {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
}
~~~
## 表示式屬性名
class還支援動態的表示式屬性名：
~~~js
let methodName = 'getName';
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
toString(){
return this.name + ' '+ this.sex;
}
[methodName](){
return this.name;
}
}
~~~
## 靜態方法
類相當於例項的原型，所有在類中定義的方法，都會被例項繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被例項繼承，而是直接通過類來呼叫，這就稱為“靜態方法”。
~~~js
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
static getSex(){
return '男';
}
}
console.log(Person.getSex()); //男
let p = new Person();
console.log(p.getSex());//TypeError: p.getSex is not a function
~~~
## 靜態屬性
靜態屬性指的是 Class 本身的屬性，即Class.propName，而不是定義在例項物件（this）上的屬性.
~~~js
class Person {
constructor(name,sex) {
this.name=name;
this.sex =sex;
}
}
Person.address ='address';
console.log(Person.address);
~~~
目前，只有這種寫法可行，因為 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性.
## class的繼承
class的繼承一般使用extends關鍵字：
~~~js
class Boy extends Person{
constructor(name,sex,address) {
super(name,sex); //呼叫父類的建構函式
this.address =address;
}
toString() {
return super.toString();//呼叫父類的方法
}
}
~~~
在子類的建構函式中，只有呼叫super之後，才可以使用this關鍵字，否則會報錯。這是因為子類例項的構建，是基於對父類例項加工，只有super方法才能返回父類例項。
super作為函式呼叫時，代表父類的建構函式。ES6 要求，子類的建構函式必須執行一次super函式。
super作為物件時，在普通方法中，指向父類的原型物件；在靜態方法中，指向父類。
上面的例子，我們在子類Boy中的toString普通方法中，呼叫了super.toString(),之前我們也講了，類的所有方法都定義在類的prototype屬性上面。所以super.toString就是Person中定義的toString方法。
由於super指向父類的原型物件，所以定義在父類例項上的方法或屬性，是無法通過super呼叫的。
定義在父類例項上的方法或屬性就是指在constructor中定義的方法或者屬性。
Person類，在constructor中定義了name屬性。我們看一下在Boy中的普通方法中訪問會有什麼問題：
~~~js
class Boy extends Person{
constructor(name,sex,address) {
super(name,sex); //呼叫父類的建構函式
console.log(super.name); //undefined
console.log(this.name); //hanmeimei
this.address =address;
}
toString() {
return super.toString();//呼叫父類的方法
}
getName(){
console.log(super.name); //undefined
console.log(this.name); //hanmeimei
}
}
var b =new Boy('hanmeimei','女','北京');
b.getName();
~~~
# 總結
JS中的面向物件主要有建構函式，原型鏈，類三種方式，希望大家能夠喜歡。
> 本文作者：flydean程式那些事
>
> 本文連結：[http://www.flydean.com/object-oriented-js/](http://www.flydean.com/object-oriented-js/)
>
> 本文來源：flydean的部落格
>
> 歡迎關注我的公眾號:「程式那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！