【JS腳丫系列】重溫bind

MASAILA 發布于2019-08-26 10:17 / 1679人閱讀

摘要：和構造函數構造函數可以使用，然后再次創建實例。提供的值被忽略，提供的那些參數仍然會被前置到構造函數調用的前面。在這種情況下，指向全局作用域。現在將作為的方法來調用，傳入這些實參用于構造函數。

概念

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

說白了，bind()就是創建一個有著新this和實參的函數。

語法：

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

thisArg

綁定函數中this的指向。可以是null，undefined，{}，或其他任意對象。可以是另外一個函數。

該參數不能被重寫。

arg1, arg2, ...

可選。

傳給綁定函數的參數。

作為默認實參傳遞給綁定函數。

假設參數是一個列表，現在有2種參數，一個是bind的實參參數，一個新的綁定函數中傳遞的實參參數。bind()的參數在綁定函數的參數的前面。

用法：可以使綁定函數有初始的默認參數。

例子：

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新增方法，不會執行對應的函數（call或apply會自動執行對應的函數），而是返回對綁定函數的引用。

call、apply的區別：接受參數的方式不一樣。

bind：不立即執行。而apply、call 立即執行。

bind和構造函數

構造函數可以使用bind()，然后再次創建實例。

bind()提供的 this值被忽略，提供的那些參數仍然會被前置到構造函數調用的前面。

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()應用 改變對象的方法的this

目的：使對象的方法在不是這個對象使用時，this的指向依然是這個對象。

原因：創建一個變量，指向為對象的方法，得到一個新函數。這個新函數中的this值已經不再指向原對象了。

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

設置默認實參

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

用法：

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

在默認情況下，使用setTimeout(function,time); 時，函數的this關鍵字會指向window。

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

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個this都是指向LateBloomer.
    //如果不加bind，setTimeout調用的函數的this為window。declare中的this變為window了。
};


var flower = new LateBloomer();

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

ES3版本的bind()方法

zyx456思路：將bind(）和函數的參數合并。然后運行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];
            // 現在將self作為o的方法來調用，傳入這些實參
            return self.apply(o, arr);
        };
        fbind.prototype = this.prototype;//用于bind構造函數。
        return fbind;
    };
}

云服務器 GPU云服務器 js.bind JS中bind、call和apply的作腳丫 bind()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105906.html

【JS腳丫系列】重溫閉包

摘要：內部的稱為內部函數或閉包函數。過度使用閉包會導致性能下降。，閉包函數分為定義時，和運行時。循環會先運行完畢，此時，閉包函數并沒有運行。閉包只能取得外部函數中的最后一個值。事件綁定種的匿名函數也是閉包函數。而對象中的閉包函數，指向。閉包概念解釋：閉包（也叫詞法閉包或者函數閉包）。在一個函數parent內聲明另一個函數child，形成了嵌套。函數child使用了函數parent的參數...

MartinDai 2019-08-26 10:21 評論0 收藏0
【ES6腳丫系列】箭頭函數

摘要：箭頭函數本文字符數，閱讀時間約分鐘左右。箭頭函數等于說，只保留了函數的參數和返回。箭頭函數體內的，繼承的是外層代碼塊的。所以，不用用箭頭函數聲明對象的方法。不可以使用命令因此箭頭函數不能用作函數。【01】ES6箭頭函數本文字符數4300+，閱讀時間約8分鐘左右。【01】箭頭函數等于說，只保留了函數的參數和返回。省略function和return。寫法： (形參) => {st...

tinyq 2019-08-26 10:21 評論0 收藏0
【重溫基礎】14.元編程

摘要：本文是重溫基礎系列文章的第十四篇。元，是指程序本身。有理解不到位，還請指點，具體詳細的介紹，可以查看維基百科元編程。攔截，返回一個布爾值。本文是重溫基礎系列文章的第十四篇。這是第一個基礎系列的最后一篇，后面會開始復習一些中級的知識了，歡迎持續關注呀！接下來會統一整理到我的【Cute-JavaScript】的JavaScript基礎系列中。今日感受：獨樂樂不如眾樂樂...

cc17 2019-08-23 14:34 評論0 收藏0
【ES6腳丫系列】遍歷器iterator

摘要：就稱為部署了遍歷器接口。是一個函數，調用它會生成一個遍歷器對象。它的屬性，也是一個遍歷器對象生成函數，執行后返回它自己。返回遍歷器對象。下面是一個無限運行的遍歷器對象的例子。『ES6知識點總結』遍歷器iterator本文內容如下： 1 具有iterator接口的數據結構 2 遍歷器過程 3 遍歷器作用： 4 模擬next()方法 5 使用while循環 6 TypeScript的寫法...

keke 2019-08-23 18:37 評論0 收藏0
【ES6腳丫系列】模塊Module

摘要：命令用于規定本模塊的對外接口。空格模塊名字符串。其他模塊加載該模塊時，命令可以為該匿名函數指定任意名字。寫法函數聲明命令用在非匿名函數前，也是可以的。加載的時候，視同匿名函數加載。本文字符數8200+，閱讀時間約16分鐘。『ES6知識點總結』模塊Module 第一節：Module基本概念【01】過去使用CommonJS和AMD，前者用于服務器，后者用于瀏覽器。 Module可以取...

gotham 2019-08-26 10:20 評論0 收藏0