JavaScriptで詳しく解説

これは JavaScript では常に混乱を招くものであり、JS のよく知られた落とし穴の 1 つであるはずです。 個人的には、これの遅延バインディングの特性により、これは良い設計ではないとも思います。グローバル オブジェクト、現在のオブジェクト、または...大きな理由でこれを使用しない人さえいます。落とし穴。

実際、この動作原理を完全に理解すれば、当然、これらの落とし穴に陥ることはなくなります。以下の状況でこれが何を指すのかを見てみましょう:

1. グローバル コード内の this
1 alter(x);
// グローバル変数 x の値は 2

グローバル コード内の thisスコープは、ブラウザのウィンドウであるグローバル オブジェクトを指します。

2. 単純な関数として呼び出します
function fooCoder(x) {
this.x = x;
}
fooCoder(2);
alert(x);
// グローバル変数 x の値は 2

ここでは、これはグローバル オブジェクト、つまり window を指します。厳密モードでは未定義です。

3. オブジェクトのメソッドとして呼び出します
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
console.log(this.name + " Says " + sth);
}
}
person.hello("hello world");

出力 foocoder は hello world と表示します。これは、現在のオブジェクトである person オブジェクトを指します。

4. コンストラクターとして

1 new FooCoder();

関数内の this は新しく作成されたオブジェクトを指します。

5. 内部関数
var name = "賢いコーダー";

var person = {
name : "foocoder",
hello : function(sth){
var Sayhello = function(sth) {
console.log (this.name + " Says " + sth);
};
sayhello(
}

person.hello("hello world");
//賢いプログラマーは hello world と言います

内部関数では、これは予想どおり外部関数オブジェクトにバインドされず、グローバル オブジェクトにバインドされます。これは、内部関数でグローバル オブジェクトを指すことを誰も望んでいないため、一般に JavaScript 言語の設計エラーと考えられます。これを変数として保存します。一般に that または self として同意されます:
var name = "clever coder";
var person = {
name : "foocoder",
hello : function(sth){
var that = this ;
var Sayhello = function(sth) {
console.log(that.name + "says" + sth);
};
sayhello(sth);
}
}
person.hello("hello world"); foocoder は hello world と言います

6. call と apply を使用してこれを設定します

1 person.hello.call(person, "world");

apply は次のパラメータが渡される点を除いて call と似ています。 a 配列は個別に渡されるのではなく、次のとおりです:

call(thisArg [, arg1, arg2,...]);

//パラメータ リスト, arg1, arg2,...

apply(thisArg [, argArray] );
// パラメーター配列、argArray

両方とも関数を特定のオブジェクトにバインドするために使用されます。当然、これは最初のパラメーターに明示的に設定されます。まとめ

上記の点を簡単にまとめると、6番目の点だけがわかりにくいです

実際には、以下の点にまとめることができます:

関数がオブジェクトメソッドとして使用される場合、 this はオブジェクトを指します

関数がフェードアウト関数として呼び出された場合、this はグローバル オブジェクトを指します (厳密モードでは未定義です)

コンストラクター内の This は新しく作成されたオブジェクトを指します

ネストされた関数内の This はそうではありません継承 必要に応じて、上位関数の this を変数に保存するために使用できます。


簡単にまとめると、これが関数で使用される場合、関数がオブジェクトによって直接呼び出された場合にのみ、これはオブジェクトを指します。

obj.foocoder();

foocoder.call(obj, ...);
foocoder.apply(obj, ...);

さらに詳しく

よく次のようなコードを書くことがあります:

1 $ ("#some-ele").click = obj.handler;

これをhandlerで使うとobjにバインドされるのでしょうか？明らかにそうではありません。代入後、関数はコールバックで実行され、これは $("#some-div") 要素にバインドされます。これには、関数の実行環境を理解する必要があります。この記事では、関数の実行環境について詳しく説明するつもりはありません。「JavaScript 高度なプログラミング」の実行環境とスコープ チェーンの関連する概要を参照してください。ここで注意したいのは、js関数の実行環境を理解することで理解が深まるということです。

それでは、コールバック関数のバインディングの問題をどのように解決できるでしょうか?新しいメソッドが ES5 に導入されました。bind():

fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg

バインディング関数が呼び出されるとき、パラメータnew 演算子を使用してバインドされた関数を呼び出す場合、

1 arg1, arg2, ...

バインドされた関数が呼び出されるとき、これらのパラメータが追加されます。バインドされた関数自体のパラメータは、実行時に元の関数のパラメータとして順番に使用されます。

このメソッドは、バインディング関数と呼ばれる新しい関数を作成します。バインディング関数は、バインド メソッドを作成するときにバインド メソッドに渡される最初のパラメーターと、関数の作成時にバインド メソッドに渡される 2 番目以降のパラメーターを使用します。が実行されている場合、元の関数を呼び出すために関数自体のパラメーターが元の関数のパラメーターとして使用されます

明らかに、bind メソッドは上記の問題をうまく解決できます。
1
2 $("#some-ele").click(person.hello.bind(person));
//対応する要素がクリックされると、出力 foocoder は hello world と言います

実際には、このメソッドも非常にシンプルです。シミュレーションが簡単です。Prototype.js のバインド メソッドのソース コードを見てみましょう:
Function.prototype.bind = function(){
var fn = this, args = Array.prototype.スライス.call(引数)、オブジェクト = args.shift ();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};