JavaScriptで"this "

多くの開発者にとって、この「キーワード」は悪夢でした.

この記事では、この“キーワード”は何かを探るでしょう.
まず、JavaScriptのオブジェクトがより良い理解のためにあるものを確認しましょう.

オブジェクト
**オブジェクトのコレクションですkey: value ペアとより複雑なエンティティ(メソッド、ネストしたオブジェクト).

構文

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe"
}

複雑な実体を持つオブジェクト

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe",
   autoIntro:function(){
             console.log("Hello nice to meet you!!")}
}

上記コードで

firstName オブジェクトのプロパティとしても知られています.

autoIntro オブジェクトのメソッドです.

プロパティとメソッドにアクセスするには

person.firstName // John
person.autoIntro() // Hello nice to meet you!!

ここで事件を起こしましょう!
我々が我々のイントロをよりダイナミックにするならば
このようにHello myself John Doe, nice to meet you!! .
これを達成することができます.

const person = {
firstName:"John", // firstname = KEY , John = value
lastName:"Doe",
autoIntro:function(){
console.log(`Hello ${this.firstName} ${this.lastName},nice to meet you!!`)
}
}

person.autoIntro() を出力します.

解説this 常にドットの前にオブジェクトを参照します.person.autoIntro()ヒアthis ドットの前にpersonオブジェクトを指します.それで、我々が使うときthis メソッド本体で実際に人オブジェクトを参照します.this.firstName == person.lastName
this 値は常にコンテキストに応じて実行時に評価されます.

let userOne = { name: "John" };
let userTwo = { name: "Max" };

function sayHi() {
  alert( this.name );
}

// use the same function in two objects
userOne.f = sayHi;
userTwo.f = sayHi;

// these calls have different this
// "this" inside the function is the object "before the dot"
userOne.f(); // John  (this == userOne)
userTwo.f(); // Max  (this == userTwo)

this 矢印機能
矢印関数では、このキーワードに値はありません.
"この"キーワードは常に外側のスコープを参照します.
例えば、

let user = {
 name:"john",
sayhi:function(){
  let sayName = ()=>{
  console.log(this.name) // this == user
}
sayName();
}
}
user.sayhi(); // john

上のコードではsayhi .
レッツチェンジsayhi 矢印関数へと内部関数を削除します.

let user = {
  name: "john",
  sayhi:()=> {  
      console.log(this.name); // this == undefined
  }
};
user.sayhi(); // error Cannot read property 'name' of undefined

だからここではundefined 矢印関数で知っているのでthis 値がない.
そのうえ、「これ」についてもっとたくさんあります.
This keyword
ハッピーコーディング❤️