2021年06月25日

JavaScriptの情報共有

Jsのthisは何?

こんにちは
たまにjsの事例を見るときthisが見えるときがあります。
今回は私が見たthisで分かりやすかった内容がありまして共有したいと思います。

ブラウザーコンソール(F12)をつけてthisを打ってみると、
this; // Window{}
に出ます。

そこに関数の中に入れて使うと
function j(){console.log(this);};
j(); // Window{}

はい、windowですね。
ここで一つの事実が分かります。
thisは、基本的にwindowです。

それではthisがwindowではない場合がありますが、一度見てみます。

オブジェクトのメソッド
var obj = {
j: function(){ console.log(this); },
};
obj.j(); //obj
オブジェクトメソッド j の中の this はオブジェクトを指します。
これは、オブジェクトのメソッドを呼び出すときにthisを内部的に変えてくれるからです。

しかし、次のようにすると結果は変わります。
var j2 = obj.j;
j2(); //Window
呼び出す際に、呼び出す関数がオブジェクトのメソッドなのかそのままの関数なのかが重要です。
j2 は obj.j を取り出してきたものですから、これ以上objのメソッドではありません。

演算子の場合
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function() {
console.log(this.name, this.age);
}

演算子関数にもしnewを呼び出さずにそのまま呼び出したらどうなりますか?
Person('hello' , 10);
console.log(window.name, window.age); // hello 10

ただ関数でthisがwindowを指すと言いましたね? それでthis。name ?? this.ageはwindow.name,window.ageになってしまいます。
これを防ぐためには「new Person」を使用する必要があります。
var hero = new Person('world', 20); // Person {name: “world”, age: 20}
hello.sayHi(); // world 20

このように「new」をつけると、thisが演算子を通じて作成されたインスタンス(world自身)になります。

今回はここまで説明になります。
私もまだまだthisについて紛れることがあるのでたまに参考します。笑
不足な文章読んでいただきありがとうございます。