JavaScript でのこのキーワードの使用方法の詳細な説明

この記事では主に JavaScript でのこのキーワードの使用方法を紹介します。これは JavaScript を始めるための基本知識です。必要な方は参照してください。

他の多くのオブジェクト指向言語と同様、JavaScript も同様です。にこのキーワードがある場合、これはこのメソッドを呼び出すオブジェクトを指すために関数で使用されます。実際のプログラミングでは、これが誰を指すかを決定するには、一般に次の原則に従うことができます。

• 関数が Function.call または Function.apply によって呼び出される場合、this はcall/apply パラメータの最初の要素。パラメータが null または未定義の場合、これはグローバル オブジェクトを指します (ブラウザでは、グローバル オブジェクトはウィンドウ オブジェクトです)。

• 関数が Function.bind によって呼び出された場合、これは (メソッドの作成時) binding の最初のパラメーターを指します。

• 関数がオブジェクトによってメソッドとして呼び出される場合、this はこのオブジェクトを指します。

• 関数が関数として呼び出されるだけで、オブジェクトにアタッチされていない場合、これはグローバル変数ウィンドウを指します。

関数

まず、「関数」を見てみましょう:

function introduce() {
   alert("Hello, I am Laruence\r\n");
}

この関数、この誰キーワードはグローバルに定義された関数を指します。関数の所有者は現在のページ、つまりウィンドウ オブジェクトです。

このため、関数を引用符で囲みます。 . グローバルに定義された関数は実際には window オブジェクトのメソッドであるため、関数名を通じて直接呼び出すことも、この時点では window メソッド名を通じて呼び出すこともできます。メソッド内で、キーワードはその所有者である window オブジェクトを指します。

window の導入属性を見ると、次の結果が得られます。

上記のコードを読んだ後、次のようになります。グローバル関数はウィンドウ オブジェクトのメソッドであり、グローバル変数はウィンドウ オブジェクトの属性であるため (Javasript スコープですでに説明されています)、グローバル関数の this キーワードを通じてグローバル変数にアクセスできます。 ?

答えは「はい」です。紹介関数を呼び出すと、私が Laruence であることがわかります。

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);

/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

イベント処理関数

おそらく、あなたはこのキーワードについて混乱しています。その理由のほとんどは、イベント処理で関数 (メソッド) を使用することにあります。

たとえば、クリックしたときに名前入力ボックスの値を表示する必要があります。次に、次のコードを記述します。

<input id="name" type="text" name="name" value="Laruence" />

上記のコードは正常に実行されますが、関数の this ポインターが常にその関数を指すことになるのではありませんか?所有者は、グローバル変数の所有者がウィンドウ オブジェクトであるという意味ではありませんか?

はは、この質問を思い当たることができたということは、あなたは私の記事を真剣に読んでいることを意味します。最初から読んでおかないと、読んだ後も混乱するでしょう~

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;

そうですね、上記のコードでは、showValue がグローバル オブジェクトで定義されているため、この問題は次の場合にのみ発生する可能性があるようです。

Js のすべてがオブジェクトであり、関数とメソッドもオブジェクトの属性であることはわかっていますが、上記のコードでは、プロセッサを onclick にバインドします。 、実際には、入力ボックス Dom オブジェクトを name の ID にバインドします。onclick 属性に値を割り当てます。つまり、関数 showValue Copy を name 入力ボックス オブジェクトの onclick 属性に与えます。このときの onclick を見てみましょう:

したがって、イベントがトリガーされると、名前入力ボックスの onclick メソッドが呼び出されます。このとき、this キーワードは当然に を指します。

ただし、次のようなややこしいことが起こります。

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name').onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

は正常に実行できません。なぜですか?現時点では、これは割り当てではなく参照であるためです。

onclick の 2 つの記述方法に注意すると、前のメソッドでは

および前のメソッドの場合:

function showValue() {
   alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

これは、2 つの違いを反映して横向きに使用することもできます。前者では代入であり、後者では参照です。この時点で入力ボックスの onclick 属性を確認すると、次の結果が得られます。

違いがわかりますか?

dom.onclick = showvalue; //没有调用符

これについて言えば、非常に重要な点があります。興味深い例を IE で試すことができます:

onclick = "showvalue()" //有调用符

これのポインタを変更します

alert(dom.onclick);
/**
* output:
* function onclick() {
*  showValue();
* }
*/

さて、理由はすでにわかったので、これをどのように作成すればよいでしょうか。

上記のイベント処理関数の場合、次のような書き方ができます:

<img  src="/static/imghwm/default1.png"  data-src="xxx"  class="lazy"   onerror="alert(1);} function hi() { alert(2); " / alt="JavaScript でのこのキーワードの使用方法の詳細な説明" >

イベントではない場合関数を処理する場合、apply または call を使用して、このキーワードのポインタを変更できます。 例:

Function.call によって呼び出される関数の例:

dom.onclick = showValue();

dom.onclick = function() { alert(this.value) ;}

<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.

dom.addEventListener(dom, showValue, false); //ff only

Function.call で呼び出される関数の例:

オブジェクトで呼び出される関数の例:

var laruence = {
   name : 'laruence',
   age : 26,
   position : 'Senior PHP Engineer',
   company : 'Baidu.inc'
};
function introduce() {
   alert(this.name);
}
introduce.call(laruence);

深い名前空間で関数を呼び出す場合通常、コードの量を減らすために、呼び出される関数を指す変数をキャッシュします。しかし、そうすると関数内の this の値が変更され、最終的には間違った操作が実行されてしまいます。例:

var myObject = {
  sayHello : function() {
    console.log('Hi! My name is ' + this.myName);
  },
  myName : 'Rebecca'
};
var secondObject = {
  myName : 'Colin'
};
myObject.sayHello();         // logs 'Hi! My name is Rebecca'
myObject.sayHello.call(secondObject); // logs 'Hi! My name is Colin'

したがって、コードを保存するために変数をキャッシュしたい場合、正しい方法は、その関数を呼び出すオブジェクトのみを保存することです:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var obj = myNamespace.myObject;

obj.sayHello(); // logs 'Hi! My name is Rebecca'

总之，有一个大原则：谁调用了那个函数，this 就指向谁。

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！