前言
this的指向在javascript中一直是個謎一樣的存在，但是很多地方又會用到this，所以理解和使用this非常重要，關于this的理解這篇文章不做介紹，因為這篇的目的是改變this的指向。
改變this的指向有三種方法，call，apply，bind。下面先介紹下這三種方法，話不多說了，來一起看看詳細的介紹吧
改變this指向
call
var a = { name:"aaa", say(type){ console.log(type,this.name); }}a.say("at");//at aaavar 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，傳參的方式是數組
bind
bind也能改變this的指向，不過和call，apply不同的地方在于，bind只改變this，不會指向函數
var a = { name:"aaa", say(type){ console.log(type,this.name); }}var tn = {name:"ttt"};var b = a.say.bind(tn);b();//tttbind 改變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:redvar cat = new Cat();// name:undefined...color:undefinedcat.say();//say..name:undefined...color:undefined因為cat是Cat的實例，Cat是改變了this的Animal，所以cat也是Animal的實例，但是this是指向cat的，所以this.name是undefined
實現bind
Function.prototype.bind = function(obj){ const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數 const that = this; const bound = function(){ const inArgs = Array.prototype.slice.call(arguments);//執行bind的函數時的參數 const newArgs = args.concat(inArgs);//組裝參數 that.apply(obj,newArgs);//執行bind的函數 } //繼承prototype--寄生組合式繼承 function F(){}; F.prototype = that.prototype; bound.prototype = new F(); return bound;}然后執行上面的代碼
Cat();//name:to...color:redvar cat = new Cat();//name:to...color:redcat.say();//say..name:undefined...color:undefined
不過第二行和原生的bind還是有點區別的，這里還是記住了之前的bind的對象，原生的不知道為啥是undefined
面試題
實現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實現，咦？？沒有出現success？？為什么？
分析一下代碼，bind的第一個參數是null??null的時候應該默認為this，修改代碼如下
Function.prototype.bind = function(obj){ const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數 const that = this; const bound = function(){ const inArgs = Array.prototype.slice.call(arguments);//執行bind的函數時的參數 const newArgs = args.concat(inArgs);//組裝參數 const bo = obj || this; that.apply(bo,newArgs);//執行bind的函數 } //繼承prototype--寄生組合式繼承 function F(){}; F.prototype = that.prototype; bound.prototype = new F(); return bound;}輸出success
完美~~~
撒花~~~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
