JS中改變this指向的方法(call和apply、bind)

字號:


    this是javascript的一個(gè)關(guān)鍵字,隨著函數(shù)使用場合不同,this的值會(huì)發(fā)生變化。但是總有一個(gè)原則,那就是this指的是調(diào)用函數(shù)的那個(gè)對象。
    this一般指向的是當(dāng)前被調(diào)用者,但也可以通過其它方式來改變它的指向,下面將介紹三種方式:
    1.call用作繼承時(shí):
    function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
    }
    function Child(age){
    Parent.call(this,age);//把this指向Parent,同時(shí)還可以傳遞參數(shù)
    }
    var test=new Child(21);
    console.log(test.age);//21
    console.log(test.name);
    test.name.push('bill');
    console.log(test.name);//mike,jack,smith,bill
    2.call和apply都可以改變this指向,不過apply的第二個(gè)參數(shù)是散列分布,call則可以是一個(gè)數(shù)組
    console.log(Math.max.apply(null,[1,2,3,4]));//4
    apply() 方法接收兩個(gè)參數(shù):一個(gè)是在其中運(yùn)行函數(shù)的作用域,另一個(gè)是參數(shù)數(shù)組。其中,第二個(gè)參數(shù)可以是 Array 的實(shí)例,也可以是arguments 對象。call() 方法與 apply() 方法的作用相同,它們的區(qū)別僅在于接收參數(shù)的方式不同。對于 call()
    方法而言,第一個(gè)參數(shù)是 this 值沒有變化,變化的是其余參數(shù)都直接傳遞給函數(shù)。換句話說,在使用call() 方法時(shí),傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來。
    3.ES5還定義了一個(gè)方法:bind(),它會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例,其this值會(huì)被綁定到傳給bind()函數(shù)的值。如
    window.color='red';
    var o={color:'blue'};
    function sayColor(){
    console.log(this.color);
    }
    var objectSaycolor=sayColor.bind(o);
    //var objectSaycolor=sayColor.bind();
    objectSaycolor();//blue
    在這里sayColor()調(diào)用bind()并傳入對象o,創(chuàng)建了objectSayColor()函數(shù)。objectSayColor()函數(shù)的this值等于o,因此即使是在全局作用域中調(diào)用這個(gè)函數(shù),也會(huì)看到blue。
    以上所述是小編給大家介紹的JS中改變this指向的方法(call和apply、bind),希望對大家以上幫助!
    下面還有點(diǎn)時(shí)間給大家補(bǔ)充點(diǎn)基礎(chǔ)知識有關(guān):call()與apply()區(qū)別
    一、方法的定義
    call方法:
    語法:call(thisObj,Object)
    定義:調(diào)用一個(gè)對象的一個(gè)方法,以另一個(gè)對象替換當(dāng)前對象。
    說明:
    call 方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。 
    如果沒有提供 thisObj 參數(shù),那么 Global 對象被用作 thisObj。
    apply方法:
    語法:apply(thisObj,[argArray])
    定義:應(yīng)用某一對象的一個(gè)方法,用另一個(gè)對象替換當(dāng)前對象。
    說明:
    如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對象,那么將導(dǎo)致一個(gè) TypeError。 
    如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù),那么 Global 對象將被用作 thisObj, 并且無法被傳遞任何參數(shù)。
    代碼示例:
    function Animal(name) {
       this.name = name;
       this.showName = function() {
         console.log(this.name);
       };
     }
     function Cat(name) {
       Animal.call(this, name);
     }
     Cat.prototype = new Animal();
     function Dog(name) {
       Animal.apply(this, name);
     }
     Dog.prototype = new Animal();
     var cat = new Cat("Black Cat"); //call必須是object
     var dog = new Dog(["Black Dog"]); //apply必須是array
     cat.showName();
     dog.showName();
     console.log(cat instanceof Animal);
     console.log(dog instanceof Animal);
    模擬call, apply的this替換
    function Animal(name) {
      this.name = name;
      this.showName = function() {
        alert(this.name);
      };
    };
    function Cat(name) {
      this.superClass = Animal;
      this.superClass(name);
      delete superClass;
    }
    var cat = new Cat("Black Cat");
    cat.showName();