JavaScript のこれは一体何ですか (1)_JavaScript スキル

WBOY
リリース: 2016-05-16 15:26:57
オリジナル
1438 人が閲覧しました

C、C#、Java、その他のオブジェクト指向言語を一年中使用するプログラマーは、ほぼ毎日この問題に取り組んでいます。これらの言語では、 this の意味は非常に明確です。つまり、現在のオブジェクト インスタンスを指すため、安心して使用できます。ただし、動的言語である JavaScript では、その書き方は変わっていませんが、その意味は大きく異なります。 以下は、ブラウザ Firefox14.0.1.

を使用した例です。

まずは、Hello World o(^▽^)o

柔軟なプログラミング言語である JavaScript を初めて独学で学び始めてから 1 年以上が経ちました。

1 年以上にわたり、この言語は私に高い仕事の利益をもたらすだけでなく、多くの予期せぬ驚きをもたらし、美大生の私にプログラミングの魅力を理解させてくれました。

今日から、共有するだけでなく自分自身を励ますために、毎週月曜日にブログを更新することにします。

それでは、今日のトピックに入りましょう。今日は JavaScript の特別なオブジェクトについて話します。

他のオブジェクト指向プログラミング言語 (java、C、C など) を使用したことのある友人は、これによく精通しているかもしれません。

しかし、JavaScript ではなぜ多くの問題が起こるのでしょうか?

まず他のプログラミング言語との違いについて話しましょう

JavaScript では、これは他のプログラミング言語とは異なり、インスタンスに格納される値であり、このインスタンスを直接指します。

しかし、別のポインタとして、異なる状況下で異なる場所を指すため、混乱するのです。

さまざまな状況でどのような形になるかを見てみましょう

1. グローバル スコープ内の場合:

これは最もよく理解されています。つまり、グローバル スコープでは、this は window を指します。つまり、グローバル スコープでは、this と window は同等です。

console.log(this === window); //true
ログイン後にコピー

さらに、これは現時点では window に相当するため、グローバル スコープで宣言した変数もこれを指します。

var x = 1;
console.log(this.x);//1
console.log(window.x);//1
ログイン後にコピー

もちろん、変数を宣言する別の方法もあります:

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1
ログイン後にコピー

varやletを使わずに変数を宣言した場合、global thisの属性値を追加または変更するのと同等

非常に単純そうですが、単なるウィンドウに相当するオブジェクトではないでしょうか?

もちろん、それだけであれば、これは存在する必要さえないかもしれません。

これの最も厄介な部分は、スコープが異なると形状がまったく異なることです

2. 関数内の場合:

ここに来るまでに、この罠は徐々に明らかになってきました

ここでローカル スコープではなく関数内であると言われているのはなぜですか? これについて話すには、まず関数とは何なのかを理解する必要があります。

JavaScript では、関数は js: function の特別なオブジェクトであり、さまざまな形式があります

私たちが普段見ているもの:

function set(){
  var x = 0;
};
ログイン後にコピー

この形式では、内部の this はグローバル スコープと同じで、ウィンドウを直接指しているため、その形式は依然として window と同等です。

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1
ログイン後にコピー

ここで間違いやすいのは、これが既に関数内にある場合、その現在の場所は現在のローカル スコープであるため、この関数を指すはずだと考える人が多いです。

ただし、この関数 (新規) をインスタンス化すると、この関数はまったく新しい環境を生成し、このインスタンスのこれもそれに応じて変更され、それが配置されているインスタンスを指すようになります。

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1


ログイン後にコピー

これは、インスタンス化後、この関数がインスタンス オブジェクトになり、その内部の this が自然にこのインスタンス オブジェクトを指すためです。最初の this が wi​​ndow オブジェクトを指すのと同じように、この関数はその場所を指します。

さらに、JavaScript を記述するときは、通常、fn で必要に応じて button.addEventListener('click', fn, false) などの要素にイベントをバインドする関数を呼び出す方法があります。これが使用される場合、これはイベント処理要素 (button
) を指します。

注: これはキーワードであるため、上書きすることはできません。

実際には、HTML や DOM イベント ハンドラーなど、より多くのフォームを作成できました。長くなるので、ここでは続きません。これについてはプロトタイプで説明します

私の理解では、これはポインタであるため、プロトタイプチェーン内でより重要な位置を占めることになりますが、今日の範囲外であるため、今はあまり説明しません

これからは基本的に毎週月曜日に更新する予定ですが、JavaScript の初心者として、私が書いたものをより多くの人に共有して、皆さんの考えからより多くの経験をまとめていきたいと思っています。

JavaScript とは一体何なのか (1) については、JavaScript 初心者として、自分の書いた内容を周りの友達と共有したり、学習体験を交換したりできればと思い、毎週月曜日に更新します。他の。ありがとう!

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