前言
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 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,傳參的方式是數組
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();//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
實現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:red
var cat = new Cat();//name:to...color:red
cat.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
完美~~~
撒花~~~