マニュアルでSE 5のbind方法を実現します.
3379 ワード
前言
thisの指向はjavascriptの中でずっと謎の存在ですが、多くのところでthisを使っています.だから、thisを理解して使うことが大切です.thisの理解についてはこの文章を紹介しません.この目的はthisの方向を変えることです.
thisの指向を変えるには、3つの方法があります.call、apply、bind.この3つの方法を紹介します.
thisの方向を変える
コール
appy
ビッド
bindもthisの指向を変えることができますが、callとapplyの違いは、bindがthisだけを変えて、関数を指すことができないことです.
ビッドを実現
面接問題
S 5の中のbind方法を実現して、下のコードにsuccessを出力させます.
thisの指向はjavascriptの中でずっと謎の存在ですが、多くのところでthisを使っています.だから、thisを理解して使うことが大切です.thisの理解についてはこの文章を紹介しません.この目的はthisの方向を変えることです.
thisの指向を変えるには、3つの方法があります.call、apply、bind.この3つの方法を紹介します.
thisの方向を変える
コール
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を指しています.appy
var a = {
name:"aaa",
say(type){
console.log(type,this.name);
}
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])
appy、say法によるthisはtnを指しています.参照の方式は配列です.ビッド
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
ビッドが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です.ビッドを実現
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
でも、二行目と原生のビッドはちょっと違っています.ここでは前のビッドの対象を覚えています.原生のはなぜundefinedなのか分かりません.面接問題
S 5の中の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")
}
上のビッドを加えて実現します.あれ?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完璧~~撒花~~