자바스크립트 - 객체의 메서드와 this

자바스크립트 - 객체의 메서드와 this

728x90

let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi;

객체는 메서드를 함수 만들듯이 생성할 수 있으며 . 연산자를 통해 사용할 수 있습니다.

함수를 생성 후 메서드로 등록해서 사용할 수도 있습니다.

객체 리터럴 안에 메서드를 생성할 경우 단축할 수 있으며 객체 상속에 따라 조금 차이가 존재합니다.

// 아래 두 객체는 동일하게 동작 user = { sayHi: function() { alert("Hello"); } }; // 단축 구문 user = { sayHi() { // "sayHi: function()"과 동일합니다. alert("Hello"); } };

this

메서드 내부에서 객체에 접근은 this 키워드를 사용하여 접근할 수 있습니다.

this가 아닌 객체이름을 통해 접근할 수도 있지만 객체가 변할 경우 문제가 발생할 수도 있습니다.

자바스크립트에서는 this는 모든 함수에 사용할 수 이있으며 런타임에 결정이 됩니다. 유연하게 사용할 수 잇지만 조심해서 사용해야합니다.

화살표 함수에서 this는 화살표 함수가 아닌 외부 함수에서 this의 값을 가져옵니다.

let user = { firstName: "보라", sayHi() { let arrow = () => alert(this.firstName); arrow(); } }; user.sayHi(); // 보라

여기서는 arrow가 아닌 외부 sayHi의 this가 됩니다.

from http://ky-dev.tistory.com/152 by ccl(A) rewrite - 2021-11-07 02:28:12