萬字長文深度剖析面向對象的javascript

時間 2021-02-14

標籤 javascript java node 程序員編程數組瀏覽器 app 函數 this 欄目軟件設計简体版

原文原文鏈接

簡介

本將會深刻講解面向對象在javascript中的應用，並詳細介紹三種對象的生成方式：構造函數，原型鏈，類。javascript

什麼是對象

雖說程序員不缺對象，隨時隨地均可以new一個出來，可是在程序的世界中，對象究竟是什麼呢？java

對象是單個實物的抽象。node

對象是一個容器，封裝了屬性（property）和方法（method）。程序員

而面向對象是相對於面向過程來說的，面向對象方法，把相關的數據和方法組織爲一個總體來看待，從更高的層次來進行系統建模，更貼近事物的天然運行模式。編程

面向對象的好處就是可抽象，封裝和可重用性，同時提供了繼承和多態等很是有用的特性。數組

而隨着JS的發展，已經超越了最開始的腳本語言，尤爲是nodejs的出現以後，更是極大的豐富了js的工做能力。瀏覽器

因此JS也須要進行對象化。app

通常來講，在JS中構建對象有三種方式：函數

構造函數（constructor）
原型鏈（prototype）
類(class) ---ES6提供

接下來，咱們一一來說解。this

構造函數

構造函數是專門用來生成對象的函數。它提供模板，描述對象的基本結構。

一個構造函數，能夠生成多個對象，這些對象都有相同的結構。構造函數的寫法就是一個普通的函數，可是有本身的特徵和用法.

var Book  = function () {
    this.name = 'www.flydean.com';
}

Book就是構造函數，它提供模板，用來生成實例對象。爲了與普通函數區別，構造函數名字的第一個字母一般大寫。

構造函數的特色

構造函數首先是一個函數，也就是說是function開頭的函數。其次函數體內部使用了this關鍵字，表明了所要生成的對象實例。

在使用構造函數的時候，必需用new命令，調用Book函數。

new命令的做用，就是執行構造函數，返回一個實例對象。

var Book  = function () {
    this.name = 'www.flydean.com';
}

var b1 = new Book();
console.log(b1.name);

上面的例子輸出結果：

www.flydean.com

若是咱們忘了使用new，會發生什麼狀況呢？

var Book  = function () {
    this.name = 'www.flydean.com';
}

var b2 = Book();
console.log(name);
console.log(b2.name);

第一個輸出會輸出www.flydean.com

而第二個則會報一個錯誤：

TypeError: Cannot read property 'name' of undefined

由於這樣調用的this指向的是global,因此this.name變成了全局變量。

爲了不這種忘記寫new的問題，能夠在第一行加上use strict，在嚴格模式中，函數內部的this不能指向全局對象，默認等於undefined，致使不加new調用會報錯。

若是不想使用use strict,則能夠在構造函數內部判斷是否使用new命令，若是發現沒有使用，則直接返回一個實例對象。

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命令時，它後面的函數調用就不是正常的調用，而是依次執行下面的步驟:

建立一個空對象，做爲將要返回的對象實例
將這個空對象的原型，指向構造函數的prototype屬性
將這個空對象賦值給函數內部的this關鍵字
開始執行構造函數內部的代碼

若是構造函數內部有return語句，並且return後面跟着一個對象，new命令會返回return語句指定的對象；不然，就會無論return語句，返回this對象。

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來建立：

function f(){
    if(! new.target){
        throw new Error('請使用new命令！');
    }
}
f();

構造函數做爲模板，能夠生成實例對象。可是，有時只能拿到實例對象，而該對象根本就不是由構造函數生成的，這時可使用Object.create()方法，直接以某個實例對象做爲模板，生成一個新的實例對象。

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對象

構造函數有什麼缺點呢？構造函數的缺點就是會將構造函數內部的對象都複製一份：

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屬性，這個屬性就是實例對象的原型對象。

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對象沒有本身的原型。

console.log(Object.getPrototypeOf(Object.prototype));
//null

prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數.

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能夠被改變：

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，只須要修改其中的某個屬性就好：

//不要這樣寫
A.prototype  ={
    method1:function (){}
}

//比較好的寫法
A.prototype  ={
    constructor:A,
    method1:function (){}
}
//更好的寫法
A.prototype.method1 = function (){}

Object的prototype操做

Object.getPrototypeOf

Object.getPrototypeOf方法返回一個對象的原型。這是獲取原型對象的標準方法.

//空對象的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方法接受兩個參數，第一個是現有對象，第二個是原型對象。

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(b.name);

Object.prototype.isPrototypeOf()

對象實例的isPrototypeOf方法，用來判斷一個對象是不是另外一個對象的原型.

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(a.isPrototypeOf(b));

Object.prototype.proto

__proto__屬性（先後各兩個下劃線）能夠改寫某個對象的原型對象。

仍是剛纔的例子，此次咱們使用__proto__來改寫對象的原型。

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老是返回一個對象，簡單說，就是返回屬性或方法「當前」所在的對象。

var book = {
    name :'flydean',
    getName : function (){
        return '書名：'+ this.name;
    }
}

console.log(book.getName());
//書名：flydean

這裏this的指向是可變的，咱們看一個例子：

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只是指向當前一層的對象，而不會繼承更上面的層。

var book1 = {
    name :'flydean',
    book2: {
        getName : function (){
            return '書名：'+ this.name;
        }
    }
}
console.log(book1.book2.getName());
//書名：undefined

上面的例子中，this是定義在對象中的函數中，若是是在函數中的函數中定義的this，表明什麼呢？

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。

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不指向外部，而指向頂層對象。

怎麼解決呢？咱們使用一箇中間變量：

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方法的第二個參數，固定它的運行環境：

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的指向（即函數執行時所在的做用域），而後在所指定的做用域中，調用該函數.

var book = {};

var f = function () {
    return this;
}
f()  === this ; //true
f.call(book) === book; //true

上面例子中，若是直接調用f(),那麼返回的就是全局的window對象。若是傳入book對象，那麼返回的就是book對象。

call方法的參數，應該是一個對象。若是參數爲空、null和undefined，則默認傳入全局對象。

若是call方法的參數是一個原始值，那麼這個原始值會自動轉成對應的包裝對象，而後傳入call方法。

var f = function () {
    return this;
}

console.log(f.call(100));
//[Number: 100]

call方法還能夠接受多個參數.

func.call(thisValue,arg1,arg2, ...);

call的第一個參數就是this所要指向的那個對象，後面的參數則是函數調用時所需的參數。

call通常用在調用對象的原始方法：

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指向，而後再調用該函數。惟一的區別就是，它接收一個數組做爲函數執行時的參數.

func.apply(thisValue,[arg1,arg2,...])

bind

call和apply是改變this的指向，而後調用該函數，而bind方法用於將函數體內的this綁定到某個對象，而後返回一個新函數.

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對象，致使運行錯誤。

咱們能夠這樣修改：

var d = new Date();

console.log(d.getTime()); //1600755862787

var getTime2= d.getTime.bind(d);
console.log(getTime2());

bind比call方法和apply方法更進一步的是，除了綁定this之外，還能夠綁定原函數的參數。

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每次調用都會返回一個新的函數，從而致使沒法取消以前的綁定。

繼承

構造函數的繼承

構造函數的繼承第一步是在子類的構造函數中，調用父類的構造函數,讓子類實例具備父類實例的屬性。

而後讓子類的原型指向父類的原型，這樣子類就能夠繼承父類原型。

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等於一個父類實例：

Boy.prototype = new Person();

上面這種寫法也有繼承的效果，可是子類會具備父類實例的方法。有時，這可能不是咱們須要的，因此不推薦使用這種寫法.

JavaScript 不提供多重繼承功能，即不容許一個對象同時繼承多個對象。可是，能夠經過變通方法，實現這個功能:

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寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已.

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

toString(){
    return this.name + ' '+ this.sex;
}

}

構造函數的prototype屬性，在ES6 的「類」上面繼續存在。事實上，類的全部方法都定義在類的prototype屬性上面。

上面的類等同於：

Person.prototype = {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

toString(){
    return this.name + ' '+ this.sex;
}

}

## 表達式屬性名

class還支持動態的表達式屬性名：

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關鍵字，就表示該方法不會被實例繼承，而是直接經過類來調用，這就稱爲「靜態方法」。

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）上的屬性.

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

}
Person.address ='address';
console.log(Person.address);

目前，只有這種寫法可行，由於 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性.

## class的繼承

class的繼承通常使用extends關鍵字：

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中的普通方法中訪問會有什麼問題：

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的博客
> 
> 歡迎關注個人公衆號:「程序那些事」最通俗的解讀，最深入的乾貨，最簡潔的教程，衆多你不知道的小技巧等你來發現！