this 相關問題

apply、call 、bind有什么作用，什么區別

• apply:call() 方法調用一個函數，將函數的this值指定為第一個參數，第二個參數為一個數組，代表向函數內的傳參。
• call:call() 方法調用一個函數，將函數的this值指定為第一個參數，后面的參數為函數的傳參。
• bind:bind()返回一個新函數，并且使函數內部的this為傳入的第一個參數。
• 區別：apply和call的區別是call是像函數內一個一個傳遞參數而apply是將參數整合成一個數組傳入。bind和前兩者的區別是前兩者改變函數執行上下文，并不會根據原函數拷貝一個新的函數，而bind()會根據原函數拷貝一個新函數返回，將this值指地位其第一個參數。

以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//彈出John:hi!對話框
//在對象內部作為一個方法調用，this值為該對象。

下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
}//彈出object:window對話。
//直接調用函數，this值代表window對象。

下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);//第一個this是document,第二個this是window。
//綁定事件執行之時，這里的this指向document,定時器執行時，this指向window,嚴格模式下undefined.

下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)//彈出John對話框，call將func中的this替換成了john

以下代碼有什么問題，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //這里的this指的是$btn,這里面并沒有showMsg對象
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

修改后

var module= {
  bind: function(){
    var _this = this //這里的this指的是module，將this保存到_this變量中
    $btn.on('click', function(){
      console.log(this) 
      _this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

原型鏈相關問題

有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關聯。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
Person.prototype === p.__proto__  //Person為構造函數，有prototype屬性，p是Person的一個實例，所以p.__proto__指向Person的prototype屬性。
Person === Person.prototype.constructor//protype屬性中有constructor屬性，他指向函數本身
Person.prototype.__proto__  === Object.prototype //Person.prototype是由Object創造的一個實例，所以同理Person.prototype.__proto__指向Object.prototype

上例中，對對象 p可以這樣調用 p.toString()。toString是哪里來的? 畫出原型圖?并解釋什么是原型鏈。

• toString是來自于Object.prototype的方法，p是一個Object實例，他的原型最終都會指向Object.prototype,所以能使用Object的方法。原型圖：

  
  
  Y_KH}@XJ(QH}~X@Q1D@FI`O.png
• 原型鏈：每個對象都有一個指向它的原型（prototype）對象的內部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環。這種一級一級的鏈結構就稱為原型鏈（prototype chain）。

對String做擴展，實現如下方式獲取字符串中頻率最高的字符

String.prototype.getMostOften = function(){
    var index = {};
    var maxNum=0,
        maxValue;
    for(var i = 0;i < this.length;i++){
        if(index[this[i]]){
            index[this[i]]++;
        }else{
            index[this[i]]=1;
        }
    }
    for(k in index){
        if(index[k]>maxNum){
            maxNum = index[k];
            maxValue = k;
        }
    }
    return maxValue;
}  
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因為d 出現了5次

instanceOf有什么作用？內部邏輯是如何實現的？

• instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。
• 語法：a instanceof b
• 內部邏輯：at對象可以通過他自己的proto屬性，指向他父類的prototype屬性，通過層層向上尋找，判斷b對象的prototype屬性是否存在于這條原型鏈上，是則代表a是b的實例，返回true,反之則返回false.

繼承相關問題

繼承有什么作用?

• 繼承是指一個對象直接使用另一對象的屬性和方法。
• 作用：可以讓代碼的復用性提高以及減少內存的使用。

下面兩種寫法有什么區別?

//方法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方法是直接寫在函數內部，每次重新創造一個實例的時候便會重新寫一次printName，此方法較為占據內存。方法二則是寫在函數的原形對象中，每次創造一個實例的時候都會從原形中找尋，不需要重新寫一次，較為節省內存和性能，推薦方法二。

Object.create 有什么作用？兼容性如何？

• Object.create() 方法會使用指定的原型對象及其屬性去創建一個新的對象。IE9以上的版本可以兼容。

hasOwnProperty有什么作用？ 如何使用？

• hasOwnPerperty是Object.prototype的一個方法，可以判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性，hasOwnProperty是JavaScript中唯一一個處理屬性但是不查找原型鏈的函數

如下代碼中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;
}

• call將Person內部的this值更改成了他的第一個參數，在Male里的this值指向Male本身，使得Male可以使用Person的方法。

補全代碼，實現繼承

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.getName = function(){
    console.log("我叫" + this.name + "性別" + this.sex);
};    

function Male(name, sex, age){
   Person.call(this,name,sex);
   this.age = age;
}

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

Male.prototype.getAge = function(){
    console.log(this.age + "歲")
};
Male.prototype.printName = function(){
    this.getName();
    this.getAge();
}
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();