【JS腳丫系列】重溫bind

MASAILA 發(fā)布于2019-08-26 10:17 / 1670人閱讀

摘要：和構(gòu)造函數(shù)構(gòu)造函數(shù)可以使用，然后再次創(chuàng)建實(shí)例。提供的值被忽略，提供的那些參數(shù)仍然會(huì)被前置到構(gòu)造函數(shù)調(diào)用的前面。在這種情況下，指向全局作用域。現(xiàn)在將作為的方法來(lái)調(diào)用，傳入這些實(shí)參用于構(gòu)造函數(shù)。

概念

bind() 方法會(huì)返回一個(gè)新函數(shù)（稱為綁定函數(shù)），綁定函數(shù)與原函數(shù)（使用bind()的函數(shù)）具有相同的函數(shù)體，但是綁定函數(shù)有新的this值和參數(shù)。

說(shuō)白了，bind()就是創(chuàng)建一個(gè)有著新this和實(shí)參的函數(shù)。

語(yǔ)法：

funName.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg

綁定函數(shù)中this的指向。可以是null，undefined，{}，或其他任意對(duì)象。可以是另外一個(gè)函數(shù)。該參數(shù)不能被重寫(xiě)。

arg1, arg2, ...

可選。傳給綁定函數(shù)的參數(shù)。
作為默認(rèn)實(shí)參傳遞給綁定函數(shù)。

假設(shè)參數(shù)是一個(gè)列表，現(xiàn)在有2種參數(shù)，一個(gè)是bind的實(shí)參參數(shù)，一個(gè)新的綁定函數(shù)中傳遞的實(shí)參參數(shù)。bind()的參數(shù)在綁定函數(shù)的參數(shù)的前面。

用法：可以使綁定函數(shù)有初始的默認(rèn)參數(shù)。

例子：

function funa(){
    "use strict";
    console.log(arguments[0]);//33
    console.log(arguments[1]);//11
    
}
var o = {
    x:1
}
var funb = funa.bind(o,33);
funb(11);//輸出33  
  11

兼容性：

支持bind()方法的瀏覽器有IE9+。

bind和call、apply的差別

bind是ES5新增方法，不會(huì)執(zhí)行對(duì)應(yīng)的函數(shù)（call或apply會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)的函數(shù)），而是返回對(duì)綁定函數(shù)的引用。

call、apply的區(qū)別：接受參數(shù)的方式不一樣。

bind：不立即執(zhí)行。而apply、call 立即執(zhí)行。

bind和構(gòu)造函數(shù)

構(gòu)造函數(shù)可以使用bind()，然后再次創(chuàng)建實(shí)例。

bind()提供的 this值被忽略，提供的那些參數(shù)仍然會(huì)被前置到構(gòu)造函數(shù)調(diào)用的前面。

function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
    return this.x + "," + this.y;
};

var p = new Point(1, 2);
p.toString(); // "1,2"

var YA = Point.bind(null, 0);

var axis = new YA(5);
axis.toString(); // "0,5"

axis instanceof Point; // true
axis instanceof YA; // true
new Point(17, 42) instanceof YA; // true

例子：

window.color = "red";
var o = { color: "blue" };

function sayColor() {
    console.log(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue

bind()應(yīng)用 改變對(duì)象的方法的this

目的：使對(duì)象的方法在不是這個(gè)對(duì)象使用時(shí)，this的指向依然是這個(gè)對(duì)象。

原因：創(chuàng)建一個(gè)變量，指向?yàn)閷?duì)象的方法，得到一個(gè)新函數(shù)。這個(gè)新函數(shù)中的this值已經(jīng)不再指向原對(duì)象了。

name = "hello";

var mo = {
    name:2010,
    getName:function(){
        console.log(this.moyu);
        
    }
};

mo.getName();//2010

var newMo = mo.getName;//在這種情況下，"this"指向全局作用域window。


newMo();//hello

var nextMo = mo.getName.bind(mo);
nextMo();//2010

設(shè)置默認(rèn)實(shí)參

bind()可以將undefined作為this指向，然后傳入默認(rèn)實(shí)參。

用法：

fun.bind(undefined,33);

function list(){
   let res = Array.prototype.slice.call(arguments);
    console.log(res);
    
}

list(1,2,3);//[1,2,3]

let newList = list.bind(null,3);
newList();//[3]
newList(1);//[2,1]

配合 setTimeout

在默認(rèn)情況下，使用setTimeout(function,time); 時(shí)，函數(shù)的this關(guān)鍵字會(huì)指向window。

在原型上的方法中，this是實(shí)例對(duì)象。使用setTimeout，必須顯式的把實(shí)例對(duì)象綁定到它的函數(shù)中，否則this為window對(duì)象。

function LateBloomer() {
    this.petalCount = Math.ceil(Math.random() * 12) + 1;
}


LateBloomer.prototype.declare = function() {
    console.log("I am a beautiful flower with " +  this.petalCount + " petals!");
};

LateBloomer.prototype.bloom = function() {
    console.log(this);//LateBloomer {patalCount:4};
    
    setTimeout(this.declare.bind(this), 1000);
    //zxy456:2個(gè)this都是指向LateBloomer.
    //如果不加bind，setTimeout調(diào)用的函數(shù)的this為window。declare中的this變?yōu)閣indow了。
};


var flower = new LateBloomer();

flower.bloom();  // 一秒鐘后, 調(diào)用"declare"方法

ES3版本的bind()方法

zyx456思路：將bind(）和函數(shù)的參數(shù)合并。然后運(yùn)行apply即可。

if (!Function.prototype.bind) {
    Function.prototype.bind = function (o) {
        var self = this, arg = Array.prototype.slice.call(arguments, 1);

        var fbind = function () {
            var arr = [...arg, ...arguments];
            // 現(xiàn)在將self作為o的方法來(lái)調(diào)用，傳入這些實(shí)參
            return self.apply(o, arr);
        };
        fbind.prototype = this.prototype;//用于bind構(gòu)造函數(shù)。
        return fbind;
    };
}