JavaScript の this pointing 問題を徹底的に理解する

この記事では、JavaScript のこのポインターに関する関連知識を提供します。this キーワードは文法上非常に重要な点です。皆様のご協力をお待ちしております。

1. コンテキストと this の関係

パス コンテキストを理解すると、this

this のポインティングの問題をより明確に理解できるようになり、現在のコンテキストとして見ることができます

2. 一般関数

まず例を挙げて、関数内の this が何であるかを見てみましょう:

let colors = {
    green : "绿色",
    blue : "蓝色",
    showColors : function() {
        console.log("green: " + this.green  + " blue: " + this.blue);
    }}colors.showColors();let show = colors.showColors;show();

最初 最初の出力は緑と青です。このとき、関数のコンテキストは色なので、this は色
を指します。2 番目の出力は未定義であり、未定義です。このとき、関数はを括弧で直接呼び出し、コンテキスト It is window. このとき、this は window

を指しているので、関数のコンテキストは this であることがわかります。 は、関数の呼び出し方法によって決まります。

一般的な関数コンテキストの状況:

オブジェクトがマークされ、そのメソッド関数を呼び出すと、関数コンテキストはマークされたオブジェクト、

this
• このオブジェクトを指しますobj.fun();
  コンテキストは objですかっこを使用して関数を直接呼び出します。コンテキストはウィンドウ オブジェクトです。
this
• ウィンドウ オブジェクトを指します
例:

function fun() {
    return this.a + this.b;}var a = 1;var b = 2;let obj = {
    a : 5,
    b : fun(),
    fun : fun}let res = obj.fun();console.log(res);

obj の b の fun() は括弧を使用して直接呼び出されるため、この時点ではfun( ) コンテキストは window オブジェクトなので、 this
ここでは window を指します, b = 1 2 = 3; obj.fun() の fun() は obj によって呼び出されます。 context は obj なので、this
ここでは obj を指しているので、 res = 5 3 = 83. 配列/配列のようなオブジェクト

配列/配列のようなオブジェクト列挙関数 呼び出しを行う場合、コンテキストはこの配列/配列のようなオブジェクト

であり、次のように表示されます:

数组[下标](); 调用这个函数的上下文对象就是这个数组

例を通して理解しましょう:

let arr = [1, 2, 3, function() {
    console.log(this[0]);}];arr[3]();

ここで添え字 3 は、配列を通じてインデックス 3 のオブジェクトを列挙し、それを実行する関数です。そのため、そのコンテキストはこの配列 arr

配列のようなオブジェクトです。

配列のようなオブジェクトとは何ですか?

• キー名が自然数シーケンス (0 から始まる) であり、

length

属性を持つすべてのオブジェクト 例: arguments
オブジェクトは配列のようなオブジェクト 関数の実際のパラメータリストであるオブジェクト<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function fun() {     arguments[3]();}fun(1, 2, 3, function() {     console.log(this[0]);})</pre><div class="contentsignin">ログイン後にコピー</div></div>

ここでは関数 fun が呼び出されますが、呼び出されると同時に関数が渡されます。つまり、

arguments[3]()

というステートメントが出力されるので、 this[0] が出力されます 呼び出し用の関数を列挙した配列のようなオブジェクトですしたがって、そのコンテキストは arguments であり、this がそれを指します。

4. 関数を即時実行

---

関数 (IIFE) を即時実行、そのコンテキストは window オブジェクトであるため、その

this

は window# を指します。 ##例を通して理解してみましょう:

var a = 1;let obj = {
    a : 2,
    fun : (function() {
        let a = this.a;
        return function() {
            console.log(a + this.a);
        }
    })()};obj.fun();

obj.fun()前述したように、fun() は obj によって呼び出されるので、ここで
this は obj を指します。obj の fun はすぐに実行された関数の戻り値に等しく、 は

obj = function() {
    console.log(a + this.a);}

に相当します。ここで、
this は を指します。 is obj, so this.a = 2;

この即時実行関数では、コンテキスト オブジェクトが window であるため、その this は window を指しているので、 a = this.a
this# とします。 ## はウィンドウ オブジェクトを指すため、a = 1、その戻り値は a = 1 になります; したがって、最終出力は 1 2 = 35. タイミング タイマーと遅延器の呼び出し関数
タイマーおよび遅延呼び出し関数では、コンテキスト オブジェクトはウィンドウ オブジェクトであり、

this

内部はウィンドウ オブジェクトを指します

例を通して理解しましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let obj = {     a : 1,     b : 2,     fun : function() {         console.log(this.a + this.b);     }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);</pre><div class="contentsignin">ログイン後にコピー</div></div>

ここでの

setTimeout

の呼び出し関数は obj.fun
で、これは遅延器によって呼び出されます。はい、2 秒後に実行されます。 this は window オブジェクトを指し、7 を出力します。これを書くと、何が出力されるでしょうか? <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let obj = {     a : 1,     b : 2,     fun : function() {         console.log(this.a + this.b);     }}var a = 3;var b = 4;setTimeout(function() {     obj.fun();}, 2000);</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/9f014475a3e00e65c141386027b762e2-6.png" class="lazy" alt="JavaScript の this pointing 問題を徹底的に理解する"><br> 此时，<code>setTimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象；
在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3

6. 事件处理函数

事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素
即：

DOM元素.onclick = function() {
    这里的上下文就是 DOM元素，this指向DOM元素};

让我们来通过一个例子来理解一下：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件处理函数</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
    <p></p>
    <p></p>
    <p></p>

    <script>
        function show() {
            alert("You click " + this.id);
        }

        let box1 = document.getElementById(&#39;box1&#39;);
        let box2 = document.getElementById(&#39;box2&#39;);
        let box3 = document.getElementById(&#39;box3&#39;);

        box1.onclick = show;
        box2.onclick = show;
        box3.onclick = show;
    </script>

当我们点击构建出来的三个盒子时，弹出的对话框中会输出对应的盒子 id
因为事件处理函数中，this指向的就是对应的DOM 元素

【相关推荐：javascript学习教程】

以上がJavaScript の this pointing 問題を徹底的に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。