欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何手動實現(xiàn)es5中的bind方法詳解

 更新時間:2018年12月07日 11:09:17   作者:juan26  
這篇文章主要給大家介紹了關(guān)于如何手動實現(xiàn)es5中的bind方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

this的指向在javascript中一直是個謎一樣的存在,但是很多地方又會用到this,所以理解和使用this非常重要,關(guān)于this的理解這篇文章不做介紹,因為這篇的目的是改變this的指向。

改變this的指向有三種方法,call,apply,bind。下面先介紹下這三種方法,話不多說了,來一起看看詳細(xì)的介紹吧

改變this指向

call

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
a.say("at");//at aaa
var tn = {name:"ttt"};
a.say.call(tn,"tt")//tt ttt

可以看到通過call,say方法中的this指向了tn,傳參的方式的列舉

apply

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])

可以看到通過apply,say方法中的this指向了tn,傳參的方式是數(shù)組

bind

bind也能改變this的指向,不過和call,apply不同的地方在于,bind只改變this,不會指向函數(shù)

var a = {
 name:"aaa",
 say(type){
  console.log(type,this.name);
 }
}
var tn = {name:"ttt"};
var b = a.say.bind(tn);
b();//ttt

bind 改變this,也是能夠繼承原型鏈的,看下下面的代碼

var to = {name:"to",color:"red"};
function Animal(){
 console.log(`name:${this.name}...color:${this.color}`);
}
Animal.prototype.say = function(){
 console.log(`say..name:${this.name}...color:${this.color}`);
}
var Cat = Animal.bind(to);
Cat();//name:to...color:red
var cat = new Cat();// name:undefined...color:undefined
cat.say();//say..name:undefined...color:undefined

因為cat是Cat的實例,Cat是改變了this的Animal,所以cat也是Animal的實例,但是this是指向cat的,所以this.name是undefined

實現(xiàn)bind

Function.prototype.bind = function(obj){
 const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數(shù)
 const that = this;
 const bound = function(){
  const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時的參數(shù)
  const newArgs = args.concat(inArgs);//組裝參數(shù)
  that.apply(obj,newArgs);//執(zhí)行bind的函數(shù)
 }
 //繼承prototype--寄生組合式繼承
 function F(){};
 F.prototype = that.prototype;
 bound.prototype = new F();
 return bound;
}

然后執(zhí)行上面的代碼

Cat();//name:to...color:red
var cat = new Cat();//name:to...color:red
cat.say();//say..name:undefined...color:undefined

不過第二行和原生的bind還是有點區(qū)別的,這里還是記住了之前的bind的對象,原生的不知道為啥是undefined

面試題

實現(xiàn)es5中的bind方法,使得下面的代碼輸出success

function Animal(name,color){
 this.name = name;
 this.color = color;
}
Animal.prototype.say = function(){
 return `i am a ${this.color} ${this.name}`
}
const Cat = Animal.bind(null,"cat");
const cat = new Cat("white");
if(cat.say() === 'i am a white cat' && cat instanceof Cat && cat instanceof Animal){
 console.log("success")
}

加上上面的bind實現(xiàn),咦??沒有出現(xiàn)success??為什么?

分析一下代碼,bind的第一個參數(shù)是null??null的時候應(yīng)該默認(rèn)為this,修改代碼如下

Function.prototype.bind = function(obj){
 const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數(shù)
 const that = this;
 const bound = function(){
  const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時的參數(shù)
  const newArgs = args.concat(inArgs);//組裝參數(shù)
  const bo = obj || this;
  that.apply(bo,newArgs);//執(zhí)行bind的函數(shù)
 }
 //繼承prototype--寄生組合式繼承
 function F(){};
 F.prototype = that.prototype;
 bound.prototype = new F();
 return bound;
}

輸出success

完美~~~

撒花~~~

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論