JavaScript での this のソフト バインディングについて説明する記事

そもそもソフトバインディングとは何でしょうか？

いわゆるソフトバインディングは、ハードバインディングに対応する言葉です。ソフトバインディングを詳しく説明する前に、まずハードバインディングについて見てみましょう。 JavaScript では、this のバインディングは動的であり、関数が呼び出される場所によって完全にバインドされます。バインディング ルールだけでも、デフォルト バインディングと暗黙的バインディングが含まれます。 、明示的バインディング、新しいバインディングなど。ハード バインディングは明示的バインディングの一種で、通常は関数 apply()、call() を呼び出すか、ES5 で提供される bind() メソッドを呼び出してハード バインディングを実装します。 。

ハードバインディングにはどのような問題があるのでしょうか? なぜソフトバインディングが必要なのでしょうか?

上記の 3 つの方法が良いかどうかに関係なく、(使用する以外にも) 独自のアイデアに従って、この関数を指定したオブジェクトに強制することができます。新しいバインディングを使用してハード バインディングを変更します) (バインディングの外側) ですが、ハード バインディングには問題があり、関数の柔軟性が低下し、ハード バインディングの後は、暗黙的バインディングまたは明示的バインディングを使用できなくなります。この点を修正します。

この場合、ソフト バインディングと呼ばれる実装が表示されます。つまり、ソフト バインディングを通じて、これがデフォルト (非厳密モード) または 未定義 (厳密モード) でグローバル オブジェクトを指さなくなることが期待されますが、 2 つの外側のオブジェクトを指します (これはハード バインディングと同じ効果があります) が、同時に、後で this ポインターを変更するための暗黙的バインディングと明示的バインディングの機能を保持します。

ソフト バインディングの具体的な実装

ここでは、「知らない JavaScript」のソフト バインディングのコード実装を使用します。実装。

if(!Function.prototype.softBind){ 
    Function.prototype.softBind=function(obj){ 
        var fn=this;
        var args=Array.prototype.slice.call(arguments,1);
        var bound=function(){ 
            return fn.apply( (!this||this===(window||global))?obj:this,
            args.concat.apply(args,arguments));
            };
        bound.prototype=Object.create(fn.prototype);
        return bound;
        };
}

ソフトバインディングが有効になっていることがわかります。

softBind()

の実装を詳しく見てみましょう。

1行目では、まず関数のプロトタイプに

softBind()

メソッドが無い場合はそれを追加し、Array.prototype.slice.call(arguments)を通して外部からの情報を取得します。 ,1) パラメーター。これは実際には関数のカリー化の目的で行われます。つまり、ソフト バインディング中に事前にいくつかのパラメーターを設定し、関数の呼び出し時に他のパラメーターを渡すことができます (検索に移動できます)詳細な説明についてはオンラインで) 最後に、クロージャを形成するために

bound

関数が返されます。この時点で、関数が softBind() を呼び出した後、得られるのは、上記の var などの bound 関数です。 fooOBJ=foo.softBind (obj1)。 bound 関数では、ソフト バインディングを呼び出した後の関数 (fooOBJ など) の呼び出し位置、または !this (this が未定義を指す) または this=== の場合は this のポイントを最初に決定します。 (window ||global) (これはグローバル オブジェクトを指します)、次に、関数の this を、softBind で渡されたパラメーター obj にバインドします。この時点で undefind またはグローバル オブジェクトを指していない場合は、これを現在指している関数にバインドします (つまり、暗黙的バインディングまたは明示的バインディング)。 fn.apply の 2 番目のパラメータは、foo を実行するために必要なパラメータで、上記の args (外部パラメータ) と内部引数 (内部パラメータ) によって接続されます。これが、前述のカリー化です。 実際、この関数を初めて読んだとき、var fn=this という文など、foo が foo.softBind() を介して SoftBind を呼び出すとき、誰が fn を指すのか、少し混乱しました。に？ foo または SoftBind を指しているのでしょうか?デモ テストを作成すると、fn が何を指しているのかが明確にわかります:

function foo(){
    console.log("name: "+this.name);
    }
var obj1={name:"obj1"},
obj2={name:"obj2"},
obj3={name:"obj3"};
var fooOBJ=foo.softBind(obj1);
fooOBJ();//"name: obj1" 在这里软绑定生效了，成功修改了this的指向，将this绑定到了obj1上1
obj2.foo=foo.softBind(obj1);
obj2.foo();//"name: obj2" 在这里软绑定的this指向成功被隐式绑定修改了，绑定到了obj2上
fooOBJ.call(obj3);//"name: obj3" 在这里软绑定的this指向成功被硬绑定修改了，绑定到了obj3上
setTimeout(obj2.foo,1000);//"name: obj1"18 
/*
*回调函数相当于一个隐式的传参，如果没有软绑定的话，这里将会应用默认绑定将this绑定到全局环
*境上，但有软绑定，这里this还是指向obj1
*/

fn (または this) のポインティングが、依然として this のバインド ルールに従っていることがわかります。

softBind

関数は次のとおりです。で定義されている関数

Function.prototype

のプロトタイプはありますが、JavaScriptの関数は(Javaなど他の言語のクラスで定義されたメソッドとは異なり)オブジェクトに「属する」ことはなく、単に関数がオブジェクトに「属する」というだけです。オブジェクト内で内部参照されているので渡されます。 以下の 2 つの方法で呼び出すと、fn (または this) がそれぞれ

foo

と Function.prototype に暗黙的にバインドされるため、それぞれ 3 と 4 が出力されます。次の fn.apply() は foo.apply() と同等です。

以上がJavaScript での this のソフト バインディングについて説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。