序文

JavaScriptの「this」キーワードは非常に重要な概念ですが、多くの初心者はそれを深く理解するのが難しいと感じています。これに苦しんでいる、またはこれから苦しんでいる場合は、深呼吸して今すぐリラックスしてください。キーワード「this」を理解することは実際には難しいことではないことを知ってください。この記事を辛抱強く読んだ後、あなたは「this」をより深く理解するようになると思います。以下では、「this」キーワードがどのように機能するかについて説明します。

'this'キーワードとは

'this'キーワードは、実行コンテキスト（各関数）ごとに作成される特別な変数です。したがって、一般に、'this'キーワードを使用する関数では、'this'は常にその所有者の値を取ります。つまり、関数の所有者を指しているということです。これは抽象的に聞こえるので、今のところ、「this」キーワードの値は静的ではないことを覚えておく必要があります。したがって、常に異なります。その値は関数がどのように呼び出されたかによって異なり、その値は関数が実際に呼び出されたときにのみ割り当てられます。たとえば、x = 4に設定すると、xの値は4になりますが、「this」キーワードの値は関数の呼び出し方法によって異なります。次に、関数を呼び出す4つの異なる方法を分析してみましょう。

4つの方法---1.関数を呼び出す最初の方法は次のとおりです。関数をメソッドとして使用する

例：これはオブジェクトを表します

const bruce={
    name:'bruce',
    birthYear:2001,
    calcAge:function () {
        return 2022-this.birthYear
    }
};
console.log(bruce.calcAge());//21`

上記のbruceオブジェクトには、bruceオブジェクトにアタッチされた関数であるcalcAge（）関数があります。したがって、メソッドを呼び出すと、calcAge（）のthisはオブジェクトを指します。つまり、これが指すbruceオブジェクトはメソッドを呼び出します。コードの最後の行で、この関数を呼び出します。calcAge（）関数でこれを使用するので、これの値はどうあるべきですか？はい、これはブルースを指します。したがって、this.birrhYear == bruce.birthYear==2001です。

4つの方法---2.関数を呼び出す2番目の方法は、関数を呼び出すだけで、関数をメソッドとして使用せず、オブジェクトにアタッチしないことです。

例：現時点ではthis = undefined

const calcAge=function(birthYear){
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge(2001)

結果は次のとおりです。

QQ图片20220710143425.png

像这样常规的调用某个函数，只是简单的调用某个函数，并没有将这个函数添加到任何对象上面；可以这样说这个this没有主人，就是this指的就是window 。但是在严格模式下全局对象无法进行默认绑定，所以导致this只能绑定在undefined上。这就是this的默认绑定规则：

this所处的词法作用域在哪里生效this就绑定在哪里。
在严格模式下，全局对象无法进行默认绑定，所以导致this只能绑定在undefined上

四种方式---3.调用函数的第三种方法是:调用箭头函数

箭头函数没有自己的this关键字

Example:

//3.箭头函数的调用
const calcAge= birthYear => {
    console.log(2022-birthYear);
    //查看此函数中的this
    console.log(this);
}
calcAge()

执行结果：

QQ图片20220710143752.png 因为箭头函数没有this，所以在箭头函数里面的this是它外层作用域里面的非箭头函数的this,而本例中外层作用域是window,所以这里的this指的是window

四种方式---4.调用函数的第四种方式：该函数被调用作为事件监听器

那么此时的this将会指向处理程序函数所附加到的DOM元素

深入理解this指向的是调用该方法的对象

这就意味着this关键字不会简单的指向在我们编写方法的对象上面。

在第一种函数调用的方式中，因为bruce是调用calaAge()方法的对象，所以此时this是bruce; 那么现在创建一个新对象：

const lucy={
   birthYear:2006,
}

我们都知道函数只是一个值，所以我们可以这样：

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);

结果：

QQ图片20220710134346.png

现在lucy里面也有了一个calcAge()方法，我们再来执行lucy.calcAge()

const lucy={
    birthYear:2006,
}
lucy.calcAge=bruce.calcAge
console.log(lucy);
lucy.calcAge()

结果为：

QQ图片20220710134720.png 这就说明lucy对象调用calcAge()方法时，此时函数calcAge()方法里面的this指向的是lucy, 即调用该方法的对象。所以this关键字如上面所说，它不是静态的，而是取决于函数的调用方式。

现在我们来定义一个常量y,并将bruce.calcAge()函数赋给它

const y=bruce.calcAge
y()

结果为：

QQ图片20220710140300.png 那么此时y()只是作为一个普通函数来进行调用，this是window

小结

this关键字是一个让许多初学者感到困惑的东西，但是总的来说:

1.如果函数是以普通函数（非构造函数）的形式调用，this指的永远都是window

2.如果函数是以方法的形式调用，this就是调用方法的那个对象

jsの「this」キーワードを簡単に説明する

序文