javascript中的this、apply、call

1、js的this總是指向對象,具體指向哪個對象是在運行時給予函數的執行環境動態綁定的。

this指向大體分爲4種:

  • 作爲對象的方法調用
  • 作爲普通函數調用
  • 構造器調用
  • call、appy調用

首先看一下下面的例子:

window.name="nikon";
          
          var myObject={
              name:'stven',
              getName:function(){
                  return this.name;
              }
          }
          
          var getName=myObject.getName;
          var getThisName=myObject.getName();
          
          alert(getName()); //nikon
          alert(getThisName); //stven

兩者的返回結果不同,而這樣的不同也是平時容易混淆的地方。‘var getName=myObject.getName;’是作爲普通函數調用,返回的this指向的全局的window.name;‘var getThisName=myObject.getName();’是作爲對象的方法調用,this指向該對象。

有時我們會困擾,比如div節點的事件函數內部,有一個局部的callback方法,callback被作爲普通函數調用,this指向全局,這樣我們無法獲取到該div節點,如果想要get到該節點,可以用一個變量保存這個div節點的引用:

document.getElementById("div1").onclick = function(){
           var that = this;
           var callback = function(){
               alert(that.id);
           }
           callback();
       }

2、apply和call的區別

二者作用是一模一樣的,區別在於傳入參數形式不用

apply接受兩個參數,第一個參數是函數體內this對象的指向,第二個參數爲一個帶下標的集合,這個集合可以是數組也可以是類數組,apply把這個集合中的元素作爲參數傳遞給被調用的函數:

var func=function(a,b,c){

    alert([a,b,c]);

}

func.apply(null,[1,2,3]);

call傳入的參數不固定,和apply一樣的是第一個參數是函數體內this對象的指向,第二個參數開始,每個參數依次傳入函數體內

var func=function(a,b,c){

    alert([a,b,c]);

}

func.apply(null,1,2,3);

當調用一個函數時,js的解釋器並不會計較形參和實參在數量、類型以及順序上的區別,js的參數在內部就是用一個數組來表示的,從這個意義上講,apply比call使用率更高。我們不用關心多少參數傳入,只要用apply一股腦的傳進去就行了。

3、call和apply的用途

3.1、改變this指向

var obj1={

  name:'sevn'

}

var obj2={

  name:'frank'

}

window.name='window';

var genName=function(){

  alert(this.name);

}

getName(); //window

getName.call(obj1); //sevn

getName.call(obj2);  //frank

3.2 Function.prototype.bind,用於指定函數內部的this指向

var obj={

name:'sven'

}

var func=function(){

   alert(this.name);

}.bind(obj);

func();  //sven














發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章