this 相關問題

問題1： apply、call 、bind有什么作用，什么區(qū)別？

apply,call,bind 都是Function.prototype的方法，都可以改變函數(shù)的執(zhí)行上下文。
不同點：

• function.apply( 第一個參數(shù)，[a,b,c,d]),第一個參數(shù)代表期望函數(shù)執(zhí)行的上下文,后面的參數(shù)以數(shù)組形式傳遞。。。
  利用第二點，即后面的參數(shù)，我們可以實現(xiàn)一個簡單的用法，用Math對象的一些方法來直接處理數(shù)組，Math.max.apply(null,[1,2,3,4,5])

• call，用法基本與apply相同，只是傳遞參數(shù)的方式不一樣。傳遞的參數(shù)要以列表形式。

• bind ，首先會創(chuàng)建一個新的函數(shù)，然后第一個參數(shù)也是改變 函數(shù)的執(zhí)行上下文，傳遞的參數(shù)也是以列表形式，但是，傳遞的參數(shù)，會優(yōu)先實參傳遞。

function a(a,b,c){
  console.log(a,b,c)
}
var b=a.bind(this,4,5)
b(1,2)// 結(jié)果打印 4，5，1

問題2： 以下代碼輸出什么?

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

輸出：John：hi!
john.sayHi() 相當于 john.sayHi.call(john)
即在john的上下文中 執(zhí)行 函數(shù)，this，代表就是john這個對象。

問題3： 下面代碼輸出什么，為什么

func() 
function func() { 
  alert(this)
}

[object,window]，因為func.call(undefined),所以，undefined在執(zhí)行環(huán)境中代表window.

4.下面代碼輸出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
#document
window對象

因為，事件監(jiān)聽的時候，this，指的綁定時間的元素節(jié)點。所以是document
setTimeout 這個this，代表的是window

問題5：下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)// 輸出 John，因為 func的執(zhí)行上下文變成了 john，this總是返回執(zhí)行函數(shù)的對象。

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

var module= {
  bind: function(){
  // var that=this
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
     //that.showMsg()
    })//.bind(this)
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}
兩個this，都表示這個$btn對象。。
可以用一個變量來固定this。
也可以在函數(shù)后.bind(this)

原型鏈相關問題

問題7：有如下代碼，解釋Person、 prototype、proto、p、constructor之間的關聯(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();

不擅長畫畫

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

不擅長啊

在 javaScript 中，每個對象都有一個指向它的原型（prototype）對象的內(nèi)部鏈接，proto。這個原型對象又有自己的原型，直到找到最頂層的原型，Object.prototype。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）。

9.問題9：對String做擴展，實現(xiàn)如下方式獲取字符串中頻率最高的字符

String.prototype.getMostOften = function(){
    var obj = {};
    for(var i=0,k;i<this.length;i++){
        k = this[i];
        if(obj[k]){
            obj[k]++
        }else{
            obj[k] = 1
        }
    }

    var max = 0,key;
    for(var k in obj){
        if(obj[k]>max){
           max = obj[k];
           key = k;
        }
     }

    return key;
}
console.log(str.getMostOften())
//第二種
var str='ahbbccdeddddfg'
String.prototype.getMostOften=function(){
    var str=this
    var arr=[]
    for(var i=0;i<this.length;i++){
      var times=0
      for(var j=0;j<str.length;j++){
        if(this[i]===str[j]){
          times++
        }
      }
      arr.push(times)
    }
   return str[arr.indexOf(Math.max.apply(null,arr))]
}
console.log(str.getMostOften())

問題10： instanceOf有什么作用？內(nèi)部邏輯是如何實現(xiàn)的？

a instanceof b,判斷a是不是b的實例。
判斷的邏輯是沿著 原型鏈走的，即，判斷a 的proto屬性有沒有鏈接到b。

function instance(L,R){
  var a=L.__proto__
  var b=R.prototype
  while(a){
    if(a===b){
      return true;
    }else{
      a=a.__proto__
    }
  }
  return false
}//大致的代碼實現(xiàn)，應該不是很嚴格，意思就是當 instanceof 左邊的__proto__ 如果等于右邊表達式的 prototype 時返回true ,如果不等于，就沿著 instanceof的原形鏈一直走，直到 與右邊的prototype相等返回true，或者直到 遍歷整個原形鏈都沒有找到（最頂端的Object.prototype.__proto__為null)

繼承相關問題

問題11：繼承有什么作用?

最大的作用就是提高代碼的復用性。

JavaScript 對象有一個指向一個原型對象的鏈。當試圖訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依此層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。這就意味著，JS對象可以使用所有其原型的所有方法，如果我們在原型上添加新的方法，那么實例也會擁有該方法，能夠大大減少冗余代碼。

問題12： 下面兩種寫法有什么區(qū)別?

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);

方法一:每次聲明一個新的實例，實例都會再創(chuàng)建一個printName的方法，比較占用內(nèi)存，方法二：printName作為公共的方法，每次創(chuàng)建實例，只需要沿著原型鏈去這找就可以了。

問題13： Object.create 有什么作用？兼容性如何？

Object.create() 方法使用指定的原型對象和其屬性創(chuàng)建了一個新的對象。
Object.create(proto, [ propertiesObject ])
proto：一個對象，作為新創(chuàng)建對象的原型?；蛘邽閚ull。

propertiesObject：可選。該參數(shù)對象是一組屬性與值，該對象的屬性名稱將是新創(chuàng)建的對象的屬性名稱，值是屬性描述符（這些屬性描述符的結(jié)構(gòu)與Object.defineProperties()的第二個參數(shù)一樣）。注意：該參數(shù)對象不能是 undefined，另外只有該對象中自身擁有的可枚舉的屬性才有效，也就是說該對象的原型鏈上屬性是無效的。

相當于

Object.create = function(prop){
  function F(){}
  F.prototype = prop
  return new F;
}

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

判斷一個屬性或者方法是不是自身的。它是js中唯一，不會去遍歷原型鏈的方法。

var a={nihao:'haha'}
a.hasOwnProperty('nihao')//true
a.hasOwnProperty('toString')//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;
}

call的作用 讓Person的執(zhí)行上下文變?yōu)?Male，并將參數(shù)name, sex傳遞到 原函數(shù)的第一個參數(shù)及第二個參數(shù)上。所以，Male中有了this.name=name this.age

16 .補全代碼，實現(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){
   this.age=age
   Person.call(this,name,age)
}

/*function copy(parent,son){
  son.prototype=Object.create(parent.prototype)
  son.prototype.constructor=son
}
copy(Person,Male)*/

function fn(){}
fn.prototype=Person.prototype
Male.prototype=new fn()
Male.prototype.constructor=Male

Male.prototype.getAge = function(){
    console.log(this.age)
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName()