JavaScript的this相關(guān)問題

問題1: apply、call 、bind有什么作用,什么區(qū)別?

  • 作用:
    都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的上下文(context),改變函數(shù)體內(nèi)部 this 的指向。
  • 區(qū)別:
    apply() 方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組
    call() 方法接受的是若干個(gè)參數(shù)的列表
var func = function(arg1, arg2) {
...
};
func.apply(this, [arg1, arg2]);
func.call(this, arg1, arg2);

bind() bind 是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用;apply 、call 則是立即調(diào)用 。

document.addEventListener('click', function(e){
    console.log(this);  // this 輸出 #document 指向當(dāng)前事件對(duì)象
    setTimeout(function(){
        console.log(this); //  bind(this) 得到新的函數(shù) 里面的this就是傳遞當(dāng)前對(duì)象
    }.bind(this), 200);
}, false);

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

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
// john.sayHi() = func(),函數(shù)里的 this 指向 join對(duì)象,this.firstName = "John" , 輸出結(jié)果:John: hi!

問題3: 下面代碼輸出什么?

func() 
function func() { 
  alert(this)
}
// func() 里面的  this 不帶表函數(shù)本身,this帶表全局, 輸出 [object Window]

問題4:下面代碼輸出什么?

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
// 第一個(gè) this 輸出 #document 指向當(dāng)前事件對(duì)象,第二個(gè) this 輸出 Window setTimeout方法執(zhí)行的函數(shù)this就是全局對(duì)象

問題5:下面代碼輸出什么?

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
func.call(john) 
// call() 第一個(gè)參數(shù)代表傳入的當(dāng)前this指向,所以 func() 里面的this就是傳入的參數(shù)John。

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

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

方法一:

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

方法二:

var $btn = $('#btn');
var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么 module對(duì)象
      this.showMsg(); // 饑人谷
    }.bind(this))
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}
module.bind();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容