Javascript千面之構造函數的多方法繼承的額外拓展

背景：

在現實生活中，筆者常常面試不少不少前來應聘的前端工程師們，可是能把JS的繼承講明白的，倒是寥寥無幾，能把new操做符講明白的就更少了。因此今天筆者就帶小夥伴們，深度的多姿式的去了解繼承的使用。javascript

其實在網上，小夥伴們也能夠搜索到不少關於講解構造函數繼承的博文，講的也特別詳細透徹。可是筆者仍是依葫蘆畫瓢再寫一次。前端

目的：1.再次加深小夥伴們對JS繼承的使用和理解java

2.在使用繼承的方法中，有不少額外的拓展的JS概念好比new的做用，instanceof的使用等等是不少基礎不紮實的小夥伴們所欠缺的知識啊！！！git

先預告一下，在構造函數的繼承實例DEMO中，會有不少new操做符和instanceof的使用，因此筆者先簡單介紹一下這兩個概念!github

new操做符

在本博文的不少實例中，不少都是基於new出來的函數方法的實例，因此小夥伴們首先須要清楚的就是new操做符的做用：面試

function fn() {
    this.name = 'Daivs';
    this.age= 28;
    // ...綁定其餘須要綁定的屬性
}

var Fn = new fn()
console.log(FN)  ---> FN{name: 'Davis', age: 28}
/*
  * new的做用
  *
  * 1. 調用fn這個函數方法
  * 2. 自動建立一個object對象
  * 3. 把建立出來的對象與this進行綁定
  * 4. 若是構造函數沒有返回值，隱式返回this對象
  * */

new操做符的做用：既然須要new一個fn的函數，那麼首先就是先調用這個方法；而後自行建立出一個Object對象；將Object對象與函數方法中的this進行綁定，將裏面的值所有合併到這個Object對象中，並取名這個函數方法名；前端工程師

這樣小夥伴們對這個new操做符瞭解了嗎？其實筆者在Javascript千面之變幻莫測的this指向第4小節中講到過這個new的做用，小夥伴們能夠參照那篇博文去了解一下當時的實例環境。函數

instanceof運算符

我相信不少小夥伴們對instanceof運算符瞭解很少吧，或許見過，可是印象不是很深。測試

確實，instanceof的使用場景不是特別多，它常見於咱們寫插件時用來對構造方法繼承的判斷方法。在講繼承的時候會用到這個運算符讓你們看到繼承的實現與否。this

那麼instanceof運算符是個什麼東東呢？官方定義是這樣的： instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

1. 一般來說，使用 instanceof 就是判斷一個實例是否屬於某種類型，好比：

// 判斷 Fn 是不是 fn 類的實例
function fn() {}
var Fn = new fn()
console.log(Fn instanceof fn)  // ----> ture

2. 另外，更重要的一點是 instanceof 能夠在繼承關係中用來判斷一個實例是否屬於它的父類型。例如

// 判斷 foo 是不是 Foo 類的實例 , 而且是不是其父類型的實例
function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型繼承
 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true 
console.log(foo instanceof Aoo)//true

對繼承的理解

小夥伴們網上搜的話，會出先繼承的6種方法，8種方法，甚至10種方法的，目不暇接。筆者不懂這麼多，也用不到這麼多。提供出網上最全的一篇對於繼承的講解博文： https://github.com/mqyqingfeng/Blog/issues/16