안녕하세요. Tay 입니다.
이제까지 호출 방식에 따라서 바인딩 되는 this 를 확인해봤습니다.
이번에는 명시적으로 this 바인딩을 지정하는 방법에 대해서 알아보겠습니다.
apply 메서드
function.apply(thisArg, argArray);
- thisArg : 함수 내부에서 사용한 this 에 바인딩 할 객체
- argArray : 함수 호출시 넘길 인자들 배열
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="apply.js"></script>
</body>
</html>
2) apply_call.js
function Person(name, national, gender) {
this.name = name;
this.national = national;
this.gender = gender;
}
let kim = {};
Person.apply(kim, ["geuntae", "kor", "male"]);
console.log(kim);- 생성자 함수 Person 을 선언한다.
- 빈 객체 kim 을 선언한다.
- function apply 를 통해서 kim 객체에 배열을 함수인자로 전달한다.
- 명시적으로 kim 객체에 this를 바인딩 했다.
결과 :
kim 객체에 프로퍼티가 정상적으로 생성됐다.
call 메서드
function.call(thisArg, parameters)
- thisArg : 함수 내부에서 사용한 this 에 바인딩 할 객체
- parameters : 넘길 인자들을 하나씩 열거
1) apply_call.js
function Person(name, national, gender) {
this.name = name;
this.national = national;
this.gender = gender;
}
let kim = {};
Person.apply(kim, ["geuntae", "kor", "male"]);
console.log(kim);
let lee = {};
Person.call(lee, "sedol", "kor", "female");
console.log(lee);- kim 객체와 lee 객체를 비교해보자.
- 빈 객체 lee 를 생성했다.
- call 메서드로 this 를 바인딩해서 프로퍼티를 생성
결과 :
정상적으로 lee 객체에 프로퍼티가 생성 된 것을 확인할 수 있다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[24] - This[3] : 생성자 함수에 new 를 붙이지않고 호출 할 경우 와 일반 함수에 new 를 붙여서 호출 할 경우 에러 (0) | 2020.03.20 |
|---|---|
| 자바스크립트 정리하며 배우기[23] - This[2] : 생성자 함수를 호출할 때 this 바인딩 (0) | 2020.03.19 |
| 자바스크립트 정리하며 배우기[22] - This[1] : 함수와 this, this 의 개념, this 와 that (0) | 2020.02.25 |
| 자바스크립트 정리하며 배우기[21] - Arguments : 유동적인 함수 만들기 (0) | 2020.02.20 |
| 자바스크립트 정리하며 배우기[20] - 내부 함수(inner function) (0) | 2020.02.03 |
