歡迎來到我的JS從入門到不放棄專題系列文章，更多精彩內容持續更新中，歡迎關注 ：)

上一章節我大概分析了一下面向對象的基本特點以及高級用法。比如jQuery的插件擴展原理其實就是在類的原型上擴展方法。

本章目標

1. ECMAScript內置類的擴展
2. 從ES5面向對象向ES6過渡

ECMAScript內置類的擴展

1、數組類的擴展

在JS中，數組類Array 作為一個比較重要的數據結構。我們來看下它的原型下都有些什麼？

我們在瀏覽器控制檯打印Array.prototype 可以列出來它的所有的方法。

其實有一些方法可能很實用，但是它沒有提供，這時候就是需要我們自己去做一下擴展了。

比如，數組的去重。我們給Array的原型上擴展一個unrepeat方法。

一般來說，為了避免我們自定義的方法與Array的內置方法衝突。我們應該這樣做。

這裡需要注意的是在擴展的自定義方法unrepeat裡面的this指向的就是數組對象本身。其實就是我們在類的原型下訪問this ,這個this就是指向的類的實例對象，即 [1,2,3,4,1,2,3,4]

再來舉個例子：清空數組

2、函數類的擴展

我們在JS中定義函數通常以function fn(){}這樣來定義一個函數，其實我們也可以通過new Function來創建，只是不建議，所以我們知道，函數也有對應的類應該就是Function。

接下來我們通過擴展Fucntion原型方法去更改this的指向。

更改this的指向？

沒錯！在JS中，我們不是已經可以用call和apply來改變this的指向嗎？接下來要實現的和call、apply不太一樣。

call和apply在改變this指向的時候，會立即調用該函數。而我要實現的是在調用的時候才會去改this指向。

其實這一功能在我們的ES5中已經現成的方法 bind

我們先來看下在Es5中bind的用法，然後我們去實現一個和bind一樣的功能的方法。

當我們直接調用test的時候，這時候，其實我們是調用的window.test 那麼方法裡面的this應該就是指向的window對象。

而當我們在調用test之前使用了bind去將this指向改成了json對象，這時候test方法裡面的this就指向了json對象，那麼再去訪問this.a 就是相當於json.a 結果返回123

接下來我們手動擼一個這樣的自定義函數bind1.

 Function.prototype.bind1 = Function.prototype.bind1 || function(_this){}

內部原理其實就是通過原生的apply來改變this指向，但是不立即調用，所以我們需要返回一個新的函數。

這裡面涉及到了部分的ES6語法，這裡就不展開了。

這裡面有一個問題：我們返回的function 是一個匿名函數，我們需要將他的原型指向外層函數的原型，同時還需要指定匿名函數的constructor

接下來我們來改造一下它

到這裡，我們自定義的bind1函數就完美實現啦。

從ES5面向對象向ES6過渡

在ES6之前，雖然說沒有給我們提供類的直接定義，但是卻將class關鍵字保留出來了，而在新的ES6標準中，已經為我們實現的用class來定義一個類

語法：

這種定義方法和java、php很相似了。render方法為我們自定義的方法，在ES5中相當於是掛載到原型上的方法了。

注意：這裡我們在實例化類的時候，是直接調用的constructor構造方法。思考一個問題：

當我們typeof Ball的時候，會返回什麼？

ES6類的繼承

相比於ES5的繼承，在ES6就簡單多了，我們只需要在類的後面加上 extends 關鍵字然後再跟上要繼承的父類即可。我們可以這樣寫

這繼承和php，java一個樣兒

注意：我們在繼承父類的時候，子類中的構造方法中必須調用super()方法

總結：

1、基於面向對象特點擴展原生的JS類的方法

2、手寫出了自定義的bind函數，（這也是面試過程中的高頻面試題）

這裡是【暢哥聊技術】JS從入門到不放棄相關技術文章，本章節是最後一章，更多精彩專題持續更新中。

（全章完）