JavaScript專題之模擬實現bind

本文共 1100 字，讀完只需 4 分鐘

首先觀察 bind 函式有什麼特點：

var person = 

function say(age, ***) 
var foo = say.bind(person, '男', 39);
foo();  // jaychou 男 39

函式引數以逗號的形式傳入

改變了 this 的指向

一、call 簡單實現

既然 bind 內部也要用改變 this 指向，我們可以用現成的 call 函式來實現這一功能。

function.prototype.newbind = function(context) 

var self = this;
return function () 
}

if 判斷是為了校驗，只能讓函式來呼叫此方法，並丟擲錯誤。

第二個return是為了讓返回的函式有返回值的功能。

測試一下：

var person = ;

var say = function() 
var foo = say.newbind(person);
foo();  // jaychou

二、傳遞引數

剛才的函式是沒有傳遞引數，當然不行，所以我們想辦法把函式的引數也傳遞進去。

bind 函式有個特點，就是在繫結的時候可以傳參，返回的函式還可以繼續傳參。

var person = ;

var say = function(p1, p2) 
var foo = say.bind(person, 18);
foo(20);  // jaychou 18 20

say.bind(person, 18)(20); // jaychou 18 20

function.prototype.newbind = function(context) 

var self = this;
var args = array.prototype.slice.call(arguments, 1);  // 間接呼叫陣列方法，獲取第一次傳的引數
return function () 
}var person = ;
var say = function(p1, p2) 
var foo = say.newbind(person, 18);  // 第一次傳參
foo(20);  // 第二次傳參

jaychou 18 20

但是！三、作為建構函式時？

bind 函式其實還有乙個非常重要的特點：

bind返回的函式如果作為建構函式，搭配new關鍵字出現的話，我們的繫結this就需要「被忽略」。

針對這個特點，需要再做一些修改：

function.prototype.newbind = function(context) 

var self = this;
var args = array.prototype.slice.call(arguments, 1);  // 間接呼叫陣列方法，獲取第一次傳的引數
let tempfn = function {};  // 利用乙個空函式作為中轉
tempfn.prototype = this.prototype;  // 修改返回函式的 prototype 為繫結函式的 prototype，例項就可以繼承繫結函式的原型中的值
var resultfn = function ()  else 
}resultfn = new tempfn();
return resultfn;
}

JavaScript專題之陣列去重

一 雙層迴圈 var array 1,1,1 1 function unique array console.log j 如果array i 是唯一的，那麼執行完迴圈，j等於reslen if j reslen return res console.log 雙層迴圈 unique array 1,1...

javascript之模擬滾動條

demo 如下 孩兒勵志出湘關，學不成名終不還。埋骨何須桑梓地，人生無處不青山。孩兒勵志出湘關，學不成名終不還。埋骨何須桑梓地，人生無處不青山。孩兒勵志出湘關，學不成名終不還。埋骨何須桑梓地，人生無處不青山。孩兒勵志出湘關，學不成名終不還。埋骨何須桑梓地，人生無處不青山。孩兒勵志出湘關，學不成名終不...

JavaScript之模擬事件（事件）

第一步 通過document.createevent 方法建立event物件。可以在document物件上使用createevent 方法建立event事件物件。該方法接收乙個引數，表示事件型別的字串。dom2中字串是以複數表示的，在dom3中字串是以單數表示。表示事件型別的字串有 dom2中表示事...