1. 생성자 함수
ex.
function user(first, last) {
this.firstName = first
this.lastName = last
}
const honeyricecake = new user('honey', 'ricecake')
console.log(honeyricecake)콘솔에는
이렇게 해당 내용의 객체가 출력되는 것을 볼 수 있다.
이 때 user라는 함수를 생성자 함수라고 한다.
function user(first, last) {
this.firstName = first
this.lastName = last
}
user.prototype.getFullName = function () {
return `${this.firstName}${this.lastName}`
}
const honeyricecake = new user('honey', 'ricecake')
console.log(honeyricecake.getFullName())이렇게 하면 getFullName이라는 메소드를 user라는 생성자 함수로 만들어낸 모든 객체에서 사용할 수 있다.
그럼 메소드를 생성자함수 내에서 선언하는 것과 prototype으로 선언하는 것의 차이는 무엇일까?
몇 개의 객체를 만들던 메소드는 한번만 선언되었으므로 메모리의 낭비가 없어진다!
이 때 일반적인 함수와 생성자가 구분이 안되므로 우리는 생성자 함수의 첫글자는 대문자로 작성한다.
이런 식으로 생성자를 통해 만들어낸 객체는
해당 생성자로 만들어졌다는 정보를 담고 있다는 것을 알 수 있고
proto로 만든 getFullName함수의 정보 역시 가지고 있음으로 볼 수 있다.
ex.
function User(first, last) {
this.firstName = first
this.lastName = last
}
User.prototype.getFullName = function () {
return `${this.firstName}${this.lastName}`
}
const honeyricecake = new User('honey', 'ricecake')
console.log(honeyricecake.getFullName())2. this
메소드는 호출한 객체로 this 정의
함수는 this가 지정되지 않음(?!)
화살표 함수는 함수 선언 시점에서의 상위 스코프가 this로 정의
그래서 메소드 안에 함수를 정의해서 그 안에 this를 사용하고 싶다면
함수는 화살표함수를 사용하자.
그러면 함수 선언 시점에서의 상위 스코프인 객체가 this로 정의된다.
이 글을 참고하자!
이렇게 메소드를 정의하는 경우, heropy에 정의된 메소드의 내용을 그대로 가져오게 된다.
즉, 메소드를 정의하는 경우는 함수를 사용하는 것이
메소드 내부에서 함수를 한번 더 선언해줄 일이 있을 때는 화살표 함수를 사용하는 것이 더 this를 명확하게 해준다.
3. ES6 Classes
우리는 메소드를 정의할 때 지금까지
normal: function() {
console.log(this.name)
}이런 식으로 써왔는데
이는
normal() {
console.log(this.name)
}이렇게도 쓸 수 있다.
즉, function 키워드 없이도 메소드를 선언할 수 있는 것이다. (세상에)
자바 스크립트에서 지원하는 Class 라는 키워드의 사용법으로 위에서 알아본 생성자함수와 prototype을 대체해보자.
class User {
constructor(first, last) {
this.firstName = first
this.lastName = last
}
getFullName() {
return `${firstName}${lastName}`
}
}메소드가 function키워드 없이도 정의되는 것을 이용해서 훨씬 더 간단하게 만들 수 있다.
즉, 객체의 생성자 함수인 constructor함수를 function 키워드 없이 정의하고
getFullName 메소드 역시 마찬가지이다.
자바와 거의 유사하나 차이점은 필드 변수를 따로 선언해주지 않아도 된다는 것이다.
4. 상속(확장)
자바와 매우 유사하다.
이 때 부모 클래스의 메소드를 super 키워드를 이용해서 호출할 수 있다.
ex. super.method()
