ホームページ > 記事 > ウェブフロントエンド > 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 を使用してこれを設定します
//パラメータ リスト, arg1, arg2,...
apply(thisArg [, argArray] );
// パラメーター配列、argArray
両方とも関数を特定のオブジェクトにバインドするために使用されます。当然、これは最初のパラメーターに明示的に設定されます。まとめ
関数がフェードアウト関数として呼び出された場合、this はグローバル オブジェクトを指します (厳密モードでは未定義です)
コンストラクター内の This は新しく作成されたオブジェクトを指しますネストされた関数内の This はそうではありません継承 必要に応じて、上位関数の this を変数に保存するために使用できます。
簡単にまとめると、これが関数で使用される場合、関数がオブジェクトによって直接呼び出された場合にのみ、これはオブジェクトを指します。
foocoder.call(obj, ...);
foocoder.apply(obj, ...);
それでは、コールバック関数のバインディングの問題をどのように解決できるでしょうか?新しいメソッドが ES5 に導入されました。bind():
fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
このメソッドは、バインディング関数と呼ばれる新しい関数を作成します。バインディング関数は、バインド メソッドを作成するときにバインド メソッドに渡される最初のパラメーターと、関数の作成時にバインド メソッドに渡される 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)));
};
};