ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でこの謎を探ってみましょう

JavaScript でこの謎を探ってみましょう

黄舟
リリース: 2017-02-20 14:30:11
オリジナル
880 人が閲覧しました

前書き: これは JavaScript の比較的特殊なキーワードであり、幅広い用途と柔軟なメソッドにより強力ですが、同時に使いにくいという欠点もあります 。初めてそれを学び始めたとき、それを完全に理解するために多くの情報を調べました。そこで学んだことを整理して分かりやすく表現しました。学習ノートとして、また困っている子どもたちの参考として使えます^_^

これは何ですか?

このキーワードの意味は明確かつ具体的です。つまり、現在のオブジェクトを指します。これは、これが特定の相対的な状況下でのみ当てはまることを意味します。

これは、グローバル オブジェクト、現在のオブジェクト、または任意のオブジェクトの 3 つの状況に分けられます。どの状況にあるかは、関数の呼び出し方法に完全に依存します。

通常の関数として。 call

オブジェクトメソッドとして呼び出します

コンストラクターとして呼び出します

apply または call を使用して呼び出します

1. 通常の関数として呼び出します

-----これは最も一般的に使用されるメソッドです。 this 呼び出しメソッドはグローバル呼び出しです。これは、上に示したように、グローバル オブジェクト

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]
ログイン後にコピー



を指します。グローバルに定義された関数の場合、関数の所有者は現在のページ、つまりウィンドウ オブジェクトです。 example() 呼び出しオブジェクトは Window なので、これは Window を表します

別の書き方:

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5
ログイン後にコピー



上に示したように、変数 a は test() 関数内でも宣言されていますが、 test() の呼び出し 結果は 5 で、関数内の this がグローバル オブジェクト、つまり Window を表すことを示します。

別の方法で書いてみましょう: 上に示すように、test()関数はグローバル変数 a の値を変更します。これは、現時点でグローバル オブジェクトを表すことを意味します。

2. オブジェクト関数として呼び出す


------オブジェクトによって関数が呼び出される場合、この時点でオブジェクトを指します


var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10
ログイン後にコピー


上に示したように、人を実行します。 showName() の結果は Li Si です。これは、showName の this が person を指していることを意味します。

person.showName を other に代入した後、other はグローバル変数であるため、ウィンドウ オブジェクトの属性とみなすことができます。したがって、other() を呼び出すとき、これは window.other() を呼び出すことと同じなので、これはウィンドウを指し、出力結果は Zhang San になります

したがって、関数オブジェクトとして呼び出された場合、これは のオブジェクトを指します。電話。


3.

をコンストラクターとして呼び出します。-----コンストラクターは、この関数を通じて新しいオブジェクトを生成します。これは、新しいオブジェクト


var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三
ログイン後にコピー


を指します。 new キーワードを使用してオブジェクト型 object を生成し、それを Dog に割り当てます。このコンストラクターが実行されると、コンストラクターのスコープ内の this はこのオブジェクトを指します。ここでは、dog を指すため、この .name は Dog.name と同等になります。 , したがって、出力結果は Doudou です。


4. apply または call を使用して呼び出します

------apply() は、特定のオブジェクトのメソッドを適用し、現在のオブジェクトを別のオブジェクトに置き換えます。



function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆
ログイン後にコピー


上に示したように: b.n()----呼び出し元のオブジェクトは b を指すため、this.a == b.a となり、結果は Li Si になります

b.n.apply- --- apply() のパラメータが空の場合、現在のオブジェクトを置き換えるオブジェクトはなく、デフォルトでグローバル オブジェクトが使用されるため、これは window を指し、結果は Zhang San になります。 b)----電流を適用することを指します のこの点が b に置き換えられるので、this は b を指し、結果は Li Si です
(この記事はネット情報といくつかの書籍を参照しています。間違いがあればご容赦ください) 、指摘してください。すぐに修正されます。O(∩_ ∩)O)



概要:
この記事では、JavaScript の this キーワードの意味をさまざまな状況で紹介します。例は非常に簡単です。理解を深めるのに役立ちます。これは JavaScript の小さな概念にすぎませんが、これを使用して JavaScript の関数の実行環境を理解することができ、これを完全にマスターすると、オブジェクト指向の JavaScript プログラムを簡単に作成できるようになります。最後に、ご覧いただきありがとうございます。



上記は Javascript でその謎を探る内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


-->

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