bind

bind 能夠改變方法中的this指向

/****
 *
 * 語法：fun.bind(thisArg[, arg1[, arg2[, ...]]])
 * 能夠利用 bind() 把 fun() 方法中的 this 綁定到 thisArg 對象上， 
 * 而且還能夠傳進去額外的參數，當返回的綁定函數被調用時，
 * 這些額外的參數會自動傳入綁定函數。
 */

var module = {
    a : 2,
    getA : function () {
        return this.a;
    }
}
//getA方法中的this指向的是module，因此打印的是2
console.log(module.getA()); //2

//將方法單獨拿出來
var getA1 = module.getA;
//方法中的this，這時指向的是全局對象，全局對象沒有a,因此打印undefined
console.log(getA1()); // undefined

//bind返回的是個方法，只是方法的this,指向發生改變了，始終指向的是bind的對象
var getA2 = module.getA.bind(module);
console.log(getA2());

 

var a = {
    b: function() {
        var func = function() {
            console.log(this.c);
        }
        func();
    },
    c: 'hello'
}
a.b(); // undefined 這裏的this指向的是全局做用域
console.log(a.c); // hello

console.log("***********************")

var a = {
    b: function() {
        var _this = this; // 經過賦值的方式將this賦值給that
        var func = function() {
            console.log(_this.c);
        }
        func();
    },
    c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello


console.log("***********************")

// 使用bind方法一
var a = {
    b: function() {
        var func = function() {
            console.log(this.c);
        }.bind(this);
        func();
    },
    c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello

// 使用bind方法二
var a = {
    b: function() {
        var func = function() {
            console.log(this.c);
        }
        func.bind(this)();
    },
    c: 'hello'
}
a.b(); // hello
console.log(a.c); // hello

console.log("***********************")

// 分析：這裏的bind方法會把它的第一個實參綁定給f函數體內的this，因此裏的this即指向{x:1}對象；
// 從第二個參數起，會依次傳遞給原始函數，這裏的第二個參數2便是f函數的y參數；
// 最後調用m(3)的時候，這裏的3即是最後一個參數z了，因此執行結果爲1+2+3=6
// 分步處理參數的過程實際上是一個典型的函數柯里化的過程（Curry）
function f(y,z){
    return this.x+y+z;
}
var m = f.bind({x:1},2);
console.log(m(3)); // 6