프로토타입
- javascript에는 클래스라는 개념이 없기 때문에, 자신이 다른 객체의 원형이 되는 객체를 의미
// Person에 대한 프로토타입 생성
function Person() {
this.name;
this.age;
this.job;
}
// Person 프로토타입에 대한 setData 함수 생성
Person.prototype.setData = (name, age, job) => {
this.name = name;
this.age = age;
this.job = job;
};
// Person 프로토타입에 대한 setData 함수 생성
Person.prototype.introduce = (name, age, job) => {
console.log(
`"안녕하세요 저는 ${this.name}이라고 합니다! 나이는 ${this.age}이고, 직업은 ${this.job}입니다."`
);
};
// Person에 대한 객체 생성(pdh 기준으로 상위 객체는 Person)
const pdh = new Person();
pdh.setData("DongHun Park", "26", "programmer");
pdh.introduce();
- 프로토타입 체인: 생성된 객체가 프로토타입(객체)과 체인에 걸려있는 것처럼 연결된 형태
this
- this: 객체의 함수에서 호출한 객체를 가리키는 키워드
- 호출한 객체가 없을 경우, default는 window
...
// (2) pdh 객체가 introduce 함수를 호출할 경우, this 객체는 pdh
Person.prototype.introduce = (name, age, job) => {
console.log(
`"안녕하세요 저는 ${this.name}이라고 합니다! 나이는 ${this.age}이고, 직업은 ${this.job}입니다."`
);
};
...
// (1) pdh 객체가 introduce 함수를 호출
pdh.introduce();
call, apply, bind
- 프로토타입 함수에 대해 this를 직접 지정해 주는 기능을 하는 함수
- call: 함수를 바로 호출하면서 매개변수에 인자를 하나씩 전달
- apply: 함수를 바로 호출하면서 매개변수를 배열 값으로 전달
- bind: 함수를 바로 호출하지 않고, 매개변수를 바인딩한 새로운 함수를 반환
...
Person.prototype.introduce = (name, age, job) => {
console.log(
`"안녕하세요 저는 ${this.name}이라고 합니다! 나이는 ${this.age}이고, 직업은 ${this.job}입니다."`
);
};
const pdh = new Person();
pdh.setData("DongHun Park", "26", "programmer");
// pdh객체를 넣은 상태에서 introduce 함수를 바로 실행
introduce.call(pdh);
// pdh객체를 넣은 상태에서 introduce 함수 바인딩
const introducePDH = introduce.bind(pdh)
introducePDH; // 바인딩한 함수인 introducePDH 실행
Ghost