首先寫一個bind的簡單示例: 'use strict' function fn() { console.log('this::', this) console.log('arguments::', arguments) } // fn() // 這裡調用時this 在嚴格模式下是undefined ...
首先寫一個bind的簡單示例:
'use strict'
function fn() {
console.log('this::', this)
console.log('arguments::', arguments)
}
// fn() // 這裡調用時this 在嚴格模式下是undefined,非嚴格模式下是Window
var fn1 = fn.bind('str', 1, 2, 3); // 這裡把this改為了'str'
fn1(4, 5, 6);
fn1的調用結果如下:
根據以上示例總結幾個bind的特征:
① 可以提前綁定this及參數
② 不會立刻調用,返回一個新函數
③ 新的函數調用時也可以傳參
1. 初步雛形( 最後有完整代碼 )
Function.prototype.mybind = function (asThis) {
console.log('mybind.....')
}
function fn() {
}
fn.mybind();
2.提前緩存參數和this
// 提前緩存參數和this
var slice = Array.prototype.slice;
Function.prototype.mybind = function (asThis) {
// 1、第一個參數是this, 後邊的參數才是額外的參數,所以要對參數進行一個截取
// 2、因為arguments是一個偽數組,所以沒有數組的方法,
// 所以可以提前獲取下數組的的方法slice
var cachedArgs = slice.call(arguments, 1);
console.log('mybind.....', cachedArgs) // [1, 2]
// 3、最後它是要返回一個新的函數,所以這裡先定義一個要返回的函數
var innerFn = function () {
///4、這裡要先彙總一下新函數傳過來的參數和提前緩存的參數
var args = slice.call(arguments);
cachedArgs = cachedArgs.concat(args);
console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
console.log('asThis::', asThis) // '我是this'
};
return innerFn;
}
function fn() {
}
var newFn = fn.mybind('我是this', 1, 2);
newFn(3, 4);
這裡對slice.call(arguments, 1)這行做一個說明:以為這裡的slice是一個純凈的方法,是沒有數據的。所以他要slice就要根據this去slice,所以這裡就要把要截取的數組arguments當成它的this,這樣就截取到了除第一個參數的外的額外參數如1和2.
3.下邊就是隨著newFn方法的調用,要這個方法可以執行起來,其實就是要改變this的這個方法fn要執行起來,這就要思考怎麼在innerFn的裡邊拿到fn這個方法。
var slice = Array.prototype.slice;
Function.prototype.mybind = function (asThis) {
// 1、第一個參數是this, 後邊的參數才是額外的參數,所以要對參數進行一個截取
///2、因為arguments是一個偽數組,所以沒有數組的方法,
// 所以可以提前獲取下數組的的方法slice
var cachedArgs = slice.call(arguments, 1);
console.log('mybind.....', cachedArgs) // [1, 2]
// 3、最後它是要返回一個新的函數,所以這裡先定義一個要返回的函數
// 5、① 這裡保存fn的值
var callFn = this;
var innerFn = function () {
///4、這裡要先彙總一下新函數傳過來的參數和提前緩存的參數
var args = slice.call(arguments);
cachedArgs = cachedArgs.concat(args);
console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
console.log('asThis::', asThis) // '我是this'
// 5、② 用fn 改變this,傳遞參數
// 原函數 改變this 參數
// 這裡return 是因為要可以拿到newFn 的返回值
return callFn.apply(asThis, cachedArgs);
};
return innerFn;
}
function fn() {
console.log('this::', this)
console.log('arguments::', arguments)
return 'fn的返回值'
}
var newFn = fn.mybind('我是this', 1, 2);
console.log(newFn(3, 4)); // ''fn的返回值''
4.要求返回的函數可以被new(第6、7步)
var slice = Array.prototype.slice;
Function.prototype.mybind = function (asThis) {
// 1、第一個參數是this, 後邊的參數才是額外的參數,所以要對參數進行一個截取
///2、因為arguments是一個偽數組,所以沒有數組的方法,
// 所以可以提前獲取下數組的的方法slice
var cachedArgs = slice.call(arguments, 1);
console.log('mybind.....', cachedArgs) // [1, 2]
// 3、最後它是要返回一個新的函數,所以這裡先定義一個要返回的函數
// 5、① 這裡保存fn的值
var callFn = this;
var innerFn = function () {
///4、這裡要先彙總一下新函數傳過來的參數和提前緩存的參數
var args = slice.call(arguments);
cachedArgs = cachedArgs.concat(args);
console.log('cachedArgs::', cachedArgs) // [1, 2, 3, 4]
console.log('asThis::', asThis) // '我是this'
console.log('查看調用的this:', this); //這裡可以看到被調用時是Window 被new時是innerFn {}
// 所以我們就可以通過this instanceof innerFn來判斷是否是被new的
// 6、這裡區分是new的還是調用?
if (this instanceof innerFn) {
// 7、這裡模擬創建對象的4步曲
var target = {}; //創建一個空對象
// 原型掛載
target.__proto__ = callFn.prototype;
// 執行構造函數
callFn.apply(target, cachedArgs);
return target;
} else {
// 5、② 用fn 改變this,傳遞參數
// 原函數 改變this 參數
// 這裡return 是因為要可以拿到newFn 的返回值
return callFn.apply(asThis, cachedArgs);
}
};
return innerFn;
}
function fn() {
this.tag = 'Green';
console.log('this::', this)
console.log('arguments::', arguments)
return 'fn的返回值'
}
var newFn = fn.mybind('我是this', 1, 2);
console.log('被調用::', newFn(3, 4)); // 'fn的返回值'
// 通過上邊的列印可以看出fn() this是window new Xx 就是Xx的實例
// 要求返回的函數可以被new
var fnObj = fn.mybind('new的this', 5, 6);
var instance = new fnObj(7, 8);
console.log('被new::', instance); // fn {tag: 'Green'}
5. 以上就完成了整個功能,下邊就展示下完成代碼:
這裡再加個補充;我們在調用mybind時前邊對象會被改變的,所以要確保它是個函數,否則告知要傳一個函數
var slice = Array.prototype.slice;
Function.prototype.mybind = function (asThis) {
var cachedArgs = slice.call(arguments, 1);
var callFn = this;
if(typeof callFn !== 'function') throw new Error('當前實例非函數')
var innerFn = function () {
var args = slice.call(arguments);
cachedArgs = cachedArgs.concat(args);
// 區分是否被new
// 這裡可以分別列印下被調用和被new時this的區別
if (this instanceof innerFn) {
var target = {};
target.__proto__ = callFn.prototype;
callFn.apply(target, cachedArgs);
return target;
} else {
return callFn.apply(asThis, cachedArgs);
}
};
return innerFn;
}
function fn() {
this.tag = 'ABC';
return 'fn的返回值'
}
// 被調用時
var newFn = fn.mybind('我是this', 1, 2);
console.log('被調用::', newFn(3, 4)); // 'fn的返回值'
// 被new時
var fnObj = fn.mybind('new的this', 5, 6);
var instance = new fnObj(7, 8);
console.log('被new::', instance); // fn {tag: 'ABC'}