자바스크립트에서 "이것"

많은 개발자들에게 "this"키워드는 때때로 알 수 없는 버그로 이어지기 때문에 악몽이었습니다.

이 기사에서 우리는 "이" 키워드가 무엇인지 알아볼 것입니다.

먼저 이해를 돕기 위해 자바스크립트 객체가 무엇인지 살펴보겠습니다.

물체

*** 개체는 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는 점. 앞에 있는 사람 개체를 나타냅니다.

따라서 메서드 본문에서 this를 사용할 때 실제로는 person 객체를 참조합니다.
this.firstName == person.lastName

이 값은 컨텍스트에 따라 런타임에 항상 평가됩니다.

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

위의 코드에서 "this"키워드는 외부 범위 함수sayhi를 나타냅니다.

화살표 함수로 변경sayhi하고 내부 함수를 제거할 수 있습니다.

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

여기서 "this"는 undefined입니다. 화살표 함수this에서 알 수 있듯이 값이 없기 때문입니다.

또한 "이것"에 대해 더 많은 것이 있습니다.

This keyword

"해피코딩"❤️