1. this
2.原型鏈-instanceof實(shí)現(xiàn)
3.繼承的實(shí)現(xiàn)

• ** this 相關(guān)問題 **

** 1、 apply、call 和bind有什么作用，什么區(qū)別？**####

  var name = 'global';
  var person = {
      name: 'zero'
  };
   // 輸出姓名、年齡和職業(yè)
   function printInfo(age, job) {
       console.log(this.name, age, job);
   }
   // 直接調(diào)用
   printInfo(20, '前端工程師');
  // 打?。篻lobal 20 前端工程師
  // 因?yàn)槟J(rèn)的上下文是window，所以this.name是全局定義的global，   如果我們想打印出來(lái)zero的話，就需要改變函數(shù)執(zhí)行的上下文
   printInfo.call(person, 20, '前端工程師');
   printInfo.apply(person, [20, '前端工程師']);
   // 這兩種方式是一樣的，第一個(gè)參數(shù)都是傳進(jìn)去的上下文，this.name取的是person.name，所以打印出來(lái)的名字就是zero了，后面的為age和job，只是參數(shù)傳遞的方式不一樣，apply比較特殊，把要傳的參數(shù)放在數(shù)組里面
  // 而bind和以上兩種有區(qū)別，bind是es5定義的新方法，用來(lái)返回一個(gè)有自己上下文的函數(shù)，用法也比較類似：
  printInfo.bind(person)(20, '前端工程師');
  // printInfo.bind(person)這一塊是返回的以peron為上下文的函數(shù)，后面的(20, '前端工程師')是函數(shù)調(diào)用

• 他們的常用用法：
  1.數(shù)組之間的追加；
  2.獲取數(shù)組中的最大值和最小值，利用他們擴(kuò)充作用域擁有Math的min和max方法；
  由于沒有什么對(duì)象調(diào)用這個(gè)方法，所以第一個(gè)參數(shù)可以寫作null或者本身；

  var  numbers = [5, 458 , 120 , -215 ]; 
  var  maxInNumbers = Math.max.apply(Math, numbers),   //458
  maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458
  

3.驗(yàn)證是否是數(shù)組（前提是toString（）方法沒有被重寫過）

  function   isArray(obj){ 
       return Object.prototype.toString.call(obj) === '[object Array]' ;
    }

4.讓類數(shù)組擁有數(shù)組的方法

比如arguments對(duì)象，獲取到的文檔節(jié)點(diǎn)等，并沒有數(shù)組的那些方法：

   Array.prototype.slice.apply（argument）; //理論上來(lái)說(shuō)這個(gè)比較快，直接在原型上查找slice方法
                                                             //但實(shí)際上比較慢

或者

    [].slice.apply(arguments); //理論上來(lái)說(shuō)這個(gè)比較慢，因?yàn)橐狝rray做一個(gè)實(shí)例化再查找slice方法
                                    //實(shí)際上比較快，因?yàn)楝F(xiàn)在的各種自動(dòng)化工具會(huì)把上一種方法轉(zhuǎn)換為這種，而第二種代碼比較簡(jiǎn)潔，所以會(huì)比較快；

bind（）--也是改變函數(shù)體內(nèi)this的指向;
bind會(huì)創(chuàng)建一個(gè)新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個(gè)函數(shù)的時(shí)候，綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind（）方法的第一個(gè)參數(shù)作為this，傳入bind（）方法的第二個(gè)及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來(lái)調(diào)用原函數(shù)；

bind與apply、call最大的區(qū)別就是：bind不會(huì)立即調(diào)用，其他兩個(gè)會(huì)立即調(diào)用
例子：

• 三個(gè)的使用區(qū)別：
  • 都是用來(lái)改變函數(shù)的this對(duì)象的指向的；
  • 第一個(gè)參數(shù)都是this要指向的對(duì)象；
  • 都可以利用后續(xù)參數(shù)傳參；
  • call方法接收參數(shù)列表，而apply方法接收參數(shù)數(shù)組；bind是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用，apply、call是立即調(diào)用；

** 2、以下代碼輸出什么? **####

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//John:hi!

調(diào)用了對(duì)象john的函數(shù)，this指向john對(duì)象，輸出John:hi!

** 3、下面代碼輸出什么，為什么？ **####

func() 
function func() { 
  alert(this)
}
//Object window

因?yàn)樵诤瘮?shù)func()被直接調(diào)用時(shí)，this綁定到全局對(duì)象。在瀏覽器中，window 就是該全局對(duì)象。

** 4、下面代碼輸出什么？ **####

 document.addEventListener('click', function(e){
     console.log(this);    //  輸出document對(duì)象,點(diǎn)擊頁(yè)面，控制臺(tái)輸出document。綁定事件函數(shù)時(shí)，this表示觸發(fā)此事件的DOM對(duì)象。
setTimeout(function(){
    console.log(this);     //  輸出window對(duì)象,setTimeout、setInterval這兩個(gè)方法執(zhí)行的函數(shù)this也是全局對(duì)象
   }, 200);
}, false);

** 5、下面代碼輸出什么，why **####

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
//John

func()函數(shù)通過call()函數(shù)調(diào)用，此時(shí)this代表John對(duì)象，john.firstName存在，輸出"John"

** 6、以下代碼有什么問題，如何修改 **####

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指什么  //這里的this指的是觸發(fā)此事件的DOM對(duì)象，不是module。
      this.showMsg();  ////由于this是$btn，所以在執(zhí)行這句是會(huì)報(bào)錯(cuò)。
    })
 },

  showMsg: function(){
   console.log('饑人谷');
  }
}

修改如下：

var module= {
   bind: function(){
    var _this = this;  //先將this賦給變量_this保存起來(lái)。在調(diào)用函數(shù)bind時(shí)，這里的this就是對(duì)象module。
$btn.on('click', function(){
  console.log(this) 
  _this.showMsg();  //此時(shí)相當(dāng)于執(zhí)行module.showMsg().輸出：饑人谷。
})
},

showMsg: function(){
      console.log('饑人谷');
  }
}

• 原型鏈相關(guān)問題

** 7、有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關(guān)聯(lián)。**####

  function Person(name){
       this.name = name;
   }
  Person.prototype.sayName = function(){
      console.log('My name is :' + this.name);
  }
  var p = new Person("若愚")
  p.sayName();

  function Person(name){
      this.name = name;
   }
  Person.prototype.sayName = function(){
      console.log('My name is :' + this.name);
  }
  var p = new Person("若愚")
  p.sayName();

• Preson是構(gòu)造函數(shù)，也是一個(gè)對(duì)象.
• p為Person的實(shí)例，擁有Person原型鏈上的屬性和方法.
• prototype是構(gòu)造函數(shù)內(nèi)部的原型對(duì)象，該對(duì)象內(nèi)部的屬性和方法能夠被實(shí)例所繼承；
• constructor是定義在構(gòu)造函數(shù)原型對(duì)象prototype上的屬性;
• proto為實(shí)例對(duì)象的屬性，其指向構(gòu)造函數(shù)的原型對(duì)象prototype；

8、上例中，對(duì)對(duì)象 p可以這樣調(diào)用 p.toString()。toString是哪里來(lái)的? 畫出原型圖?并解釋什么是原型鏈。####

• toString是對(duì)象p繼承的Object對(duì)象的方法。

• 什么是原型鏈?

  JS在創(chuàng)建對(duì)象（不論是普通對(duì)象還是函數(shù)對(duì)象）的時(shí)候，都有一個(gè)叫做proto的內(nèi)置屬性，用于指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象prototype。在訪問一個(gè)對(duì)象屬性的時(shí)候，如果對(duì)象本身沒有找到這個(gè)屬性，就會(huì)沿著原型鏈一層一層的尋找。

prototype.png

** 9、對(duì)String做擴(kuò)展，實(shí)現(xiàn)如下方式獲取字符串中頻率最高的字符 **####

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因?yàn)閐 出現(xiàn)了5次

代碼擴(kuò)展如下：

//獲取字符串中頻率最高的字符
        String.prototype.getMostOften = function(){
        var obj = {};
        var str = this;
        for(var i=0;i<str.length;i++){
            var key = str[i];
            if(!obj[key]){
                obj[key] =1;
            }else{
                obj[key]++;
            }
        }
        
        var max = 0;
        var max_key = '';
        for(key in obj){
        if(obj[key]>max){
            max = obj[key];
            max_key = key;
            }
        }
        
        return max_key;
        }
        var str = 'ahbbccdeddddfg';
        var ch = str.getMostOften();
        console.log(ch);  //d 因?yàn)閐出現(xiàn)了5次

** 10、instanceOf有什么作用？?jī)?nèi)部邏輯是如何實(shí)現(xiàn)的？**####

• instanceOf：判斷一個(gè)對(duì)象是否為另一個(gè)對(duì)象的實(shí)例。繼承中判斷實(shí)例是否屬于它的父類。

• 內(nèi)部邏輯：順著對(duì)象的原型連一直往上找,若原型鏈上的某一個(gè)proto指向了構(gòu)造函數(shù)的prototype則返回true，找完了原型鏈也找不到則返回false。
  function instanceOf(obj,fn){
  var oldpro = obj.proto;
  while(oldpro){
  if(oldpro === fn.prototype){
  return true;
  }else{
  oldpro = oldpro.proto;
  }
  }
  return false;
  }

• 繼承相關(guān)問題

** 11、繼承有什么作用? **####

繼承是指：一個(gè)對(duì)象直接使用另一個(gè)對(duì)象的屬性和方法。提高重用性，同時(shí)也是面向?qū)ο缶幊汤锏囊粋€(gè)概念，可以簡(jiǎn)化對(duì)事物的描述。

** 12、下面兩種寫法有什么區(qū)別? **####

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饑人谷', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

 Person.prototype.printName = function(){
     console.log(this.name);
}
var p1 = new Person('若愚', 27);

• 方法一printName這個(gè)方法作為構(gòu)造函數(shù)方法,在創(chuàng)建P1實(shí)例的時(shí)候相當(dāng)于又重新拷貝了一個(gè)printName方法.
• 方法二printName這個(gè)方法作為原型鏈方法,創(chuàng)建P1實(shí)例的時(shí)候相當(dāng)于借用原型的printName方法.
  • 推薦使用第二種。方法2把通用的方法寫在原型對(duì)象中，每一個(gè)實(shí)例都能去引用該方法，節(jié)約了空間。

** 13、 Object.create 有什么作用？兼容性如何？ **####

• Object.create() 方法它會(huì)把一個(gè)對(duì)象作為另一個(gè)對(duì)象的原型.可以通過Object.create方法實(shí)現(xiàn)繼承屬性。
  如：

  Male.prototype = Object.create(Person.prototype);
  

語(yǔ)法：Object.create(proto, [ propertiesObject ])
這是ES5的語(yǔ)法，支持ES5的瀏覽器才支持這么用。

** 14、hasOwnProperty有什么作用？ 如何使用？ **####

• hasOwnPerperty是Object.prototype的一個(gè)方法，可以判斷一個(gè)對(duì)象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一 一個(gè)處理屬性但是不查找原型鏈的函數(shù)。
  • 用法：obj.hasOwnProperty(prop) // prop為要檢測(cè)的屬性
    function Person(name,age) {
    this.name = name;
    this.age = age;
    }
    Person.prototype.printName = function() {
    console.log(this.name);
    }
    function Man(name) {
    this.name = name;
    }
    Man.prototype = Object.create(Person.prototype);
    var p = new people('lulu');
    console.log(p.hasOwnProperty('printName'));//false

** 15、如下代碼中call的作用是什么? **####

 function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //這里的 call 有什么作用
   this.age = age;
}

使得Male的實(shí)例擁有Person的屬性，實(shí)現(xiàn)了繼承.

** 16、補(bǔ)全代碼，實(shí)現(xiàn)繼承 **####

              //實(shí)現(xiàn)繼承
                function Person(name, sex){
                    this.name = name;
                    this.sex = sex;
                }
                
                Person.prototype.getName = function(){
                    console.log(this.name);
                };    
                
                function Male(name, sex, age){
                    Person.call(this,name,sex);
                    this.age = age;
                }
                
                Male.prototype = Object.create(Person.prototype);  //方法一
                Male.prototype.__proto__=Person.prototype; //方法二
                Male.prototype = new Person();  //方法三

                Male.prototype.getAge = function(){
                    console.log(this.age);
                };
                
                var ruoyu = new Male('leslie', '男', 27);
                ruoyu.getName();

學(xué)習(xí)提示
this 的值到底是什么？
JS 的 new 到底是干什么的？