this 키워드 기능 및 예제

dahyeyudev·2019년 11월 21일
0

advanced object

목록 보기
1/1

ADVANCED OBJECTS

The this Keyword

Objects are collections of related data and functionality. We store that functionality in methods on our objects:

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  }
};

goat 객체에 .makeSound()메소드가 있다. 아래와 같이 goat 객체에 .makeSound() 메소드를 쓸 수 있다.

goat.makeSound(); // Prints baaa

Nice, we have a goat object that can print baaa to the console. Everything seems to be working fine.

만약 우리가 goat의 dietType를 출력하는 메소드.diet()를 goat객체에 추가하려면 어떻게 해야할까?

What if we wanted to add a new method to our goat object called .diet() that prints the goat‘s dietType?

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(dietType);
  }
};
goat.diet(); 
// Output will be "ReferenceError: dietType is not defined"

위의 코드를 통해 알 수 있듯이 결과는 레퍼런스에러가 뜬다. dietType가 goat의 프로퍼티임에도 불구하고 not defined가
뜬다. 그 이유는 .diet()메소드 안의 스코프가, 자동적으로 goat객체의 다른 프로퍼티(dietType)로 접근할 수 없기 때문이다.

That’s because inside the scope of the .diet() method, we don’t automatically have access to other properties of the goat object.

그 이유로 this 가 나타난 것이다. 만약 .diet() 메소드에 this 를 쓴다면 .diet() 메소드는 작동한다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);   // this를 쓰면 결과가 나온다. this로 인해서 스코프가 접근할 수 있게됨.
  }
};

goat.diet(); 
// Output: herbivore

this 키워드는 객체의 프로퍼티를 부르는 calling object를 참조한다? 위의 예시를 보면 calling object는 this를 통해 goat객체에 접근할 수 있게하고, 그다음 닷노테이션을 이용해 dietType프로퍼티에 접근할 수 있게 한다.

The this keyword references the calling object which provides access to the calling object’s properties. In the example above, the calling object is goat and by using this we’re accessing the goat object itself, and then the dietType property of goat by using property dot notation.

Let’s get comfortable using the this keyword in a method.

Instructions

1.

Let’s create a new object to practice using this.

In main.js there is an object robot, add a property of model and assign to it a value of '1E78V2'. Add another property, energyLevel and assign to it a value of 100.

2.

Inside the robot object, add a method named provideInfo. Inside the body of provideInfo(), return the following string by using interpolation:

I am MODEL and my current energy level is ENERGYLEVEL.  

Replace ‘MODEL’ and ‘ENERGYLEVEL’ with the calling object’s model and energyLevel property. Remember, to get the access to the calling object’s properties inside a method, you have to use the this keyword!

3.

Now to check .provideInfo() has access to the internal properties of robot. Log the result of calling .provideInfo() method on robot to the console.

answer

const robot = {
  model: '1E78V2',
  energyLevel: 100,
  provideInfo() { 
    return `I am ${this.model} and my current energy level is ${this.energyLevel}.`
  }
};

console.log(robot.provideInfo());

from

codeacademy.com

0개의 댓글