我們知道在javascript中call和apply以及bind都可以改變this指向，那么它們是怎么實(shí)現(xiàn)的呢箫章？彼此之間有什么區(qū)別呢？首先我們先來分別解析一下它們,這篇文章簡單的介紹了實(shí)現(xiàn)call() , apply() , bind()的思路
JavaScript中的Call镜会、Apply檬寂、Bind的實(shí)現(xiàn)
call的解讀與實(shí)現(xiàn)
var leo = {
name: 'Leo',
sayHai: function(){
return "Hi I'm " + this.name;
},
add: function(a, b){
console.log(this)
return a + b;
}
}
var neil = {
name:'Neil'
}
console.log(leo.sayHai.call(neil)) //Neil
console.log(leo.sayHai.call(null)) //undefine
如上面輸出結(jié)果可以看出：
1.call方法的第一個參數(shù)用于改變this指向，但是如果傳入null/undefined值戳表，this會指向window
2.call方法需要把實(shí)參按照形參的個數(shù)傳進(jìn)去
現(xiàn)在我們已經(jīng)知道如何使用call以及它的規(guī)則桶至，那么我們來封裝一個自己的call方法
//ES3實(shí)現(xiàn)方法利用了eval()函數(shù)，將字符串當(dāng)做JavaScript表達(dá)是執(zhí)行
Function.prototype.es3call = function(ctx) {
var ctx = ctx || global || window;
ctx.fn = this;
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('ctx.fn(' + args.join(',') + ')');
delete ctx.fn;
return result;
}
//ES6實(shí)現(xiàn)方法利用了擴(kuò)展運(yùn)算符rest運(yùn)算符
Function.prototype.es6call = function(ctx){
var ctx = ctx || window || global;
ctx.fn = this;
var args = [];
for(var i = 1; i < arguments.length; i++){
args.push('arguments[' + i +']');
}
const result = ctx.fn(...args);
return result;
}
console.log(leo.sayHai.es3call(neil)) //Neil
console.log(leo.sayHai.es3call(null)) //undefine
console.log(leo.sayHai.es6call(neil)) //Neil
console.log(leo.sayHai.es6call(null)) //undefine
apply的解讀與實(shí)現(xiàn)
console.log(leo.add.apply(neil, [2, 3])) //neil 5
console.log(leo.add.apply(null, [2, 3])) //window or global 5
1.apply方法的第一個參數(shù)用于改變this指向匾旭，但是如果傳入null/undefined值镣屹，this會指向window
2.apply方法的第二個參數(shù)需要傳入一個實(shí)參列表，也就是arguments
//ES3實(shí)現(xiàn)方法利用了eval()函數(shù)价涝，將字符串當(dāng)做JavaScript表達(dá)是執(zhí)行
Function.prototype.es3apply = function(ctx, arr){
var ctx = ctx || global || window;
ctx.fn = this;
var result = null;
if(!arr){
result = ctx.fn();
}else{
if(!(arr instanceof Array)) throw new Error('params must Array');
var args = [];
for(var i = 0; i < arr.length; i++){
args.push('arr[' + i +']');
}
result = eval('ctx.fn('+ args.join(',') + ')');
}
delete ctx.fn;
return result;
}
//ES6實(shí)現(xiàn)方法利用了擴(kuò)展運(yùn)算符rest運(yùn)算符
Function.prototype.es6apply = function(ctx, arr){
var ctx = ctx || global || window;
ctx.fn = this;
var result = null;
if(!arr){
result = ctx.fn();
}else{
if(!(arr instanceof Array)) throw new Error('params must Array');
var args = [];
for(var i = 0; i < arr.length; i++){
args.push('arr[' + i +']');
}
result = ctx.fn(...args);
}
delete ctx.fn;
return result;
}
console.log(leo.add.es3apply(neil, [2, 3])) //neil 5
console.log(leo.add.es3apply(null, [2, 3])) //window or global 5
console.log(leo.add.es6apply(neil, [2, 3])) //neil 5
console.log(leo.add.es6apply(null, [2, 3])) //window or global 5
bind的解讀與實(shí)現(xiàn)
var value = 'window';
var obj = {
value: 'obj'
};
Parent.prototype.value = 'parent';
function Parent(){};
Child.prototype = new Parent();
function Child(){};
function show(name){
console.log(this.value, name)
}
show(); //window undefined
var newShow1 = show.bind(obj);
newShow1();//obj undefined
var newShow2 = show.bind(null);
newShow2();//window undefined
var newShow3 = show.bind(obj, 'test'); //函數(shù)擁有預(yù)設(shè)的初始參數(shù)
newShow3();//obj test
new newShow3();//undefined test
var oS = Child.bind(obj);
var fn = new oS();
console.log(fn, fn.value); //Child{} "parent" 當(dāng)使用new 操作符調(diào)用綁定函數(shù)時(shí)女蜈，參數(shù)obj無效。
根據(jù)上面的運(yùn)行結(jié)果，我們可以總結(jié)一下bind的用法規(guī)則：
1.bind() 函數(shù)會創(chuàng)建一個新函數(shù)（稱為綁定函數(shù)）伪窖，新函數(shù)與被調(diào)函數(shù)（綁定函數(shù)的目標(biāo)函數(shù)）具有相同的函數(shù)體
2.bind方法的第一個參數(shù)也是用于改變this指向逸寓，如果傳入null/undefined，this會指向window
3.一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器覆山。提供的 this 值被忽略
4.bind方法可以使函數(shù)擁有預(yù)設(shè)的初始參數(shù)竹伸。這些參數(shù)（如果有的話）作為bind()的第二個參數(shù)跟在this（或其他對象）后面，之后它們會被插入到目標(biāo)函數(shù)的參數(shù)列表的開始位置簇宽，傳遞給綁定函數(shù)的參數(shù)會跟在它們的后面勋篓。
//ES3實(shí)現(xiàn)方法
Function.prototype.es3bind = function(ctx){
var ctx = ctx || global || window;
var self = this;
var args = Array.prototype.slice.call(arguments, 1);
if(typeof this !== "function") throw new Error('what is trying to be bind is not callback');
var temp = function(){};
var fn = function(){
var fnArgs = Array.prototype.slice.call(arguments, 0);
return self.apply(this instanceof fn ? this : ctx, args.concat(fnArgs));
}
// 先讓 temp 的原型方法指向 _this 即原函數(shù)的原型方法，繼承 _this 的屬性
temp.prototype = this.prototype;
// 再將 fn 即要返回的新函數(shù)的原型方法指向 temp 的實(shí)例化對象
// 這樣魏割，既能讓 fn 繼承 _this 的屬性譬嚣，在修改其原型鏈時(shí)，又不會影響到 _this 的原型鏈
fn.prototype = new temp(); //原型繼承
return fn;
}
//ES6實(shí)現(xiàn)方法
Function.prototype.es6bind = function(ctx, ...rest){
if(typeof this !== "function") throw new Error('what is trying to be bind is not callback');
var self = this;
return function F(...args){
if(this instanceof F){
return new self(...rest, ...args);
}
return self.apply(ctx, rest.concat(args));
}
}
show(); //window undefined
var newShow1 = show.es3bind(obj);
newShow1();//obj undefined
var newShow2 = show.es3bind(null);
newShow2();//window undefined
var newShow3 = show.es3bind(obj, 'test'); //函數(shù)擁有預(yù)設(shè)的初始參數(shù)
newShow3();//obj test
new newShow3();//undefined test
var oS = Child.es3bind(obj);
var fn = new oS();
console.log(fn, fn.value); //Child{} "parent" 當(dāng)使用new 操作符調(diào)用綁定函數(shù)時(shí)见妒，參數(shù)obj無效孤荣。
show(); //window undefined
var newShow1 = show.es6bind(obj);
newShow1();//obj undefined
var newShow2 = show.es6bind(null);
newShow2();//window undefined
var newShow3 = show.es6bind(obj, 'test'); //函數(shù)擁有預(yù)設(shè)的初始參數(shù)
newShow3();//obj test
new newShow3();//undefined test
var oS = Child.es6bind(obj);
var fn = new oS();
console.log(fn, fn.value); //Child{} "parent" 當(dāng)使用new 操作符調(diào)用綁定函數(shù)時(shí)，參數(shù)obj無效须揣。
