자바스크립트_기초_4.4

메서드와 this

객체는 실제 존재하는 개체를 표현하고자 할 때 생성됩니다.
이런 객체들은 내부에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다.

메서드 만들기

let user = {
	name : "Jhon",
    age : 30
};

user.sayHi = function(){
	alert("안녕하세요!")
}

user.sayHi(); // 함수 호출

user 안에 sayHi라는 함수를 할당해 주었습니다.
이제 안녕하세요! 라고 인사를 하고 이를 메서드라고 부릅니다.

아래와 같이 이미 정의된 함수를 이용해서 구현할 수도 있습니다.

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

객체 지향 프로그래밍
객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍이라고 합니다.

올바른 개체를 선택하는 방법, 개체 사이의 상호작용을 나타내는 방법 등에 관한 의사결정은 객체 지향 설계를 기반으로 이뤄집니다.

메서드와 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다. 대부분의 메서드는 객체 프로퍼티의 값을 활용합니다.

메서드 내부에서 this를 사용하면 객체에 접든할 수 있습니다.

var user = {
	name = "Jhon",
    age : 30,
    
    sayHi() {
    	//this는 '현재 객체'를 의미합니다.
    	alert(this.name);
    }
};
user.sayHi(); //  Jhon

this.name 대신 user.name을 사용할 수도 있습니다.
하지만..

let admin = user;
user = null; 
admin.sayHi();

이러면 더이상 user 객체는 존재하지 않으므로 Error: Cannot read property 'name' of null이라는 에러가 발생합니다.

자유로운 this

자바스크립트에서는 모든 함수에 this를 사용할 수 있습니다.
this값은 런타임에 결정됩니다.
❗ 동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라집니다.

let user = { name: "John" };
let admin = { name: "Admin" };

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

// 서로 다른 객체에서 동일한 함수를 사용하여 f라는 함수를 선언함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

객체 없이 호출하기 : this == undefined

function sayHi() {
  alert(this);
}

sayHi(); // undefined

객체가 없어도 함수를 호출할 수 있습니다.
이 때 엄격 모드에서는 this에는 undefined가 할당됩니다.
그 외에는 this가 전역 객체를 참조합니다.

이렇게 자유로운 this를 만들면 함수를 하나만 만들어 여러 객체에서 재사용할 수 있다는 점은 장점이지만 실수를 범하기 쉬운 단점이 있습니다.

this가 없는 화살표 함수

화살표 함수는 일반 함수와 달리 고유한 this를 갖지 않습니다. 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 평범한 외부 함수에서 this 값을 가져오게 됩니다.

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

user.sayHi(); // 보라

위의 arrow()의 this는 외부 함수 user.sayHi()의 this가 됩니다.