この変数はJavaScriptでどのように使用されるのでしょうか?

伊谢尔伦
リリース: 2017-07-18 09:43:46
オリジナル
1258 人が閲覧しました

この変数は JavaScript ではわかりにくいキーワードですが、これに関する知識を十分に理解すると、オブジェクト指向の JavaScript プログラムを簡単に作成できるようになります。

この変数について最も重要なことは、これがどのオブジェクトを参照しているのかを明確にできることです。おそらく多くの情報には独自の説明がありますが、一部の概念は少し複雑です。私の理解は次のとおりです。まず、this が配置されている関数がメソッドとして呼び出されるオブジェクトを分析し、次にそのオブジェクトが this によって参照されるオブジェクトです。
例 1、

var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100
ログイン後にコピー

このコードは非常に理解しやすいです。 obj.y() が実行されると、関数はオブジェクト obj のメソッドとして呼び出されるので、関数本体の this は obj オブジェクトを指すので、100 はポップアップ。

例 2、

var checkThis = function(){ 
alert( this.x); 
}; 
var x = 'this is a property of window'; 
var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100 
checkThis(); //弹出 'this is a property of window'
ログイン後にコピー

なぜここで「これはウィンドウのプロパティです」が表示されるのか、少しわかりにくいかもしれません。 JavaScriptの変数スコープには「グローバル変数はウィンドウオブジェクトのプロパティである」というルールがあります。 checkThis()を実行すると、window.checkThis()と等価になります。 したがって、このときcheckThis関数のthisキーワードの箇所がwindowオブジェクトとなり、windowオブジェクトが別のx属性('thisis)を持っていることになります。 「ウィンドウのプロパティ」)、「これはウィンドウのプロパティです」がポップアップ表示されます。
上記の 2 つの例は比較的理解しやすいものです。現在の関数がどのオブジェクトをメソッドとして呼び出すか (どのオブジェクトによって呼び出されるか) さえわかれば、現在の this 変数のポイントを簡単に決定できるからです。

this.x と apply()、call()
call と apply を通じて、関数の実行環境、つまり、一部のアプリケーションで非常に一般的に使用される this のポイントを再定義できます。
例 3: call()

function changeStyle( type , value ){ 
this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.call( one , 'fontSize' , '100px' ); 
changeStyle('fontSize' , '300px'); //出现错误,因为此时changeStyle中this引用的是window对象,而window并无style属性。
ログイン後にコピー

changeStyle.call() には 3 つのパラメーターがあることに注意してください。最初のパラメーターは、関数が呼び出されるオブジェクトを指定するために使用されます。ここでは 1 つが指定されています。これは、changeStyle 関数が 1 つによって呼び出されることを意味するため、関数本体のこの点が 1 つのオブジェクトになります。 2 番目と 3 番目のパラメーターは、changeStyle 関数の 2 つの仮パラメーターの型と値に対応します。最も一般的な影響は、Dom 要素 1 のフォントが 20 ピクセルになることです。

例 4: apply()

function changeStyle( type , value ){ 
this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.apply( one , ['fontSize' , '100px' ]); 
changeStyle('fontSize' , '300px'); //出现错误,原因同示例三
ログイン後にコピー

apply の使用法は call とほぼ同じですが、唯一の違いは apply が受け入れるパラメータは 2 つだけであり、2 番目のパラメータは call である必要があります。配列内の要素は関数の仮パラメータに対応します。

これはイベントリスニング関数内です

var one = document.getElementByIdx( 'one' ); 
one.onclick = function(){ 
alert( this.innerHTML ); //this指向的是one元素,这点十分简单.. 
};
ログイン後にコピー

注: js のグローバル変数は、属性として Window のインスタンスに動的に追加されます。

以上がこの変数はJavaScriptでどのように使用されるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート