this

問答

1.apply、call 有什么作用,什么區(qū)別

call和apply都可以調(diào)用一個函數(shù),傳入函數(shù)執(zhí)行上下文及參數(shù)
寫法:

fn.call(context, param1, param2...)
fn.apply(context, paramArray)

語法很簡單,第一個參數(shù)都是希望設(shè)置的this對象,不同之處在于call方法接收參數(shù)列表,而apply接收參數(shù)數(shù)組。

代碼

1.以下代碼輸出什么?

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

輸出: John:hi!
如下圖所示:


2.下面代碼輸出什么,為什么

func() 

function func() { 
  alert(this)
}

輸出: window
如下圖示:

Paste_Image.png

原因:
在函數(shù)func被直接調(diào)用時this綁定到全局對象。在瀏覽器中,window就是該全局對象

3.下面代碼輸出什么

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}

fn0();


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

輸出:
window
點擊頁面時輸出:
document
window
如下圖所示:


4.下面代碼輸出什么,why

var john = { 
  firstName: "John" 
}

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

輸出:John
結(jié)果如下圖所示:


原因:
func.call(john),.call()設(shè)置了this對象是john,john.firstName就是John。

5.代碼輸出?

var john = { 
  firstName: "John",
  surname: "Smith"
}

function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') 

輸出:
John Smith
結(jié)果如下圖所示:


原因:
func.call(john, 'firstName', 'surname')中.call()的第一個參數(shù)是john,代表設(shè)置this對象是john,后面的幾個參數(shù)是this對象的參數(shù),即john的幾個屬性,所以this[a]是John,this[b]是Smith。

6.以下代碼有什么問題,如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

問題:
控制臺不會輸出饑人谷這三個字,因為console.log(this)中的this指的是$btn,不是module對象,所以調(diào)用不到showMsg方法。
修改:

var module= {
  bind: function(){
    var  cur=this;//this對象指向module時,存儲在一個變量里
    $btn.on('click', function(){
      console.log(this) //this指什么
      cur.showMsg();
    })
  },
  showMsg: function(){
    console.log('饑人谷');
  }
}

7.下面代碼輸出什么

var length = 3;
function fa() {
  console.log(this.length);
}
var obj = {
  length: 2,
  doSome: function (fn) {
    fn();
    arguments[0]();
  }
}
obj.doSome(fa)

輸出:
3
1
結(jié)果如圖所示:


原因:
obj.doSome(fa)調(diào)用obj對象的doSome方法,把fa作為參數(shù)傳進函數(shù),下一步運行fa(),是window調(diào)用了函數(shù)fa(),輸出的this.length是window.length,length變量默認是window.length,結(jié)果是3;
arguments是doSome的參數(shù)的集合,doSome有一個參數(shù)fn,即arguments[0]()表示fa(),此時arguments[0]的this對象是doSome,doSome的長度是1,輸出1。

本文版權(quán)歸本人和饑人谷所有,轉(zhuǎn)載請注明出處

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 簡答題 1.apply、call 有什么作用,什么區(qū)別 call apply,調(diào)用一個函數(shù),傳入函數(shù)執(zhí)行上下文及參...
    GarenWang閱讀 580評論 1 4
  • 1.apply、call 有什么作用,什么區(qū)別 函數(shù)調(diào)用有三種形式:func(p1,p2)obj.children...
    泰格_R閱讀 365評論 0 0
  • 問答 apply、call 有什么作用,什么區(qū)別? 在介紹apply和call之前,我們先來看看this,this...
    小木子2016閱讀 309評論 0 0
  • 1. this之謎 在JavaScript中,this是當(dāng)前執(zhí)行函數(shù)的上下文。因為JavaScript有4種不同的...
    百里少龍閱讀 1,094評論 0 3
  • 一、this 相關(guān)問題 知乎上關(guān)于this的解答 this 的值到底是什么?一次說清楚 this 的工作原理在js...
    66dong66閱讀 646評論 0 0

友情鏈接更多精彩內(nèi)容