js 改變this指向的幾種方法(個人學習筆記)


  1.call()和apply()

    兩中方法都能改變this指向,很類似,區別主要是第二個以后參數,

      call():第一個參數表示要把this指向的新目標,第二個之后的參數其實相當於傳參,參數以,隔開    (性能較apply略好)

        用法:a.call(b,1,2);   表示要把a函數的this指向修改為b的this指向,並且運行a函數,傳進去的參數是(1,2)

      apply(): 第一個參數同上,第二個參數接受一個數組,里面也是傳參,只是以數組的方式,相當於arguments

        用法:a.apply(b,[1,2]);  表示要把a函數的this指向修改為b的this指向,並且運行a函數,傳進去的參數是(1,2)注意  :即使只有一個參數的話,也要是數組的形式

//call 的傳參和apply的傳參
function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.call(obj,'one','two');//tom one two
say.spply(obj,['one','two']);//tom one two  效果一樣

  2.bind()

    作用:bind()方法會創建一個新函數,稱為綁定函數,當調用這個綁定函數時,綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this,傳入 bind() 方法的第二個以及以后的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

     用法

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));//這里的this是eventBind的this,即指向的是foo
    }
}

   注意:多次bind無效,按第一次算

   總結一下

      apply 、 call 、bind 三者都是用來改變函數的this對象的指向的; 
      apply 、 call 、bind 三者第一個參數都是this要指向的對象,也就是想指定的上下文; 
      apply 、 call 兩者都可以利用后續參數傳參; 但是傳參的方式不一樣,apply是數組,call是正常傳參形式
      bind 是返回對應函數,便於稍后調用;apply 、call 則是立即調用

  3.new    

     new運行原理是:

new Animal('cat') = {//類似這樣
    var obj = {};//先定義一個空對象
    obj.__proto__ = Animal.prototype;//把 obj 的__proto__ 指向構造函數 Animal 的原型對象 prototype,此時便建立了 obj 對象的原型鏈:obj->Animal.prototype->Object.prototype->null
    var result = Animal.call(obj,"cat");//改變this指向,從Animal改變到obj上
return typeof result === 'object'? result : obj; //返回
}

    用法

function Fn(){
    this.user = "追夢子";
}
var a = new Fn();//this指向a
console.log(a.user); //追夢子

  4.return

    在構造函數的時候,使用return進行返回一個Object的時候,當去new一個實例對象的時候,會將this指向改變為return的Object;

     用法:

function fn()  
{  
    this.user = '追夢子';  
    return {
        "user" : "111"
    };  
}
var a = new fn;  
console.log(a.user); //111


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM