Javascript : call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음
개발 및 관리/Javascript 2022. 3. 18. 23:07
call, apply, bind : 함수 호출 방식과 관계없이 this를 지정할 수 있음
1. call : call메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.
const mike = {
name : "Mike",
};
const tom = {
name : "Tom",
};
function showThisName() {
console.log(this.name);
}
showThisName();
showThisName.call(mike);
showThisName.call(tom);
-----------------------------------------------------------------------------------------------------
const mike = {
name : "Mike",
};
const tom = {
name : "Tom",
};
function showThisName() {
console.log(this.name);
}
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
update.call(mike, 1999, "singer");
console.log(mike);
update.call(tom, 2002, "teacher");
console.log(tom);
**********************************************************************************************************
**********************************************************************************************************
2. apply : apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같습니다.
call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 매개변수를 배열로 받습니다.
const mike = {
name : "Mike",
};
const tom = {
name : "Tom",
};
function showThisName() {
console.log(this.name);
}
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
update.call(mike, [1999, "singer"]);
console.log(mike);
update.call(tom, [2002, "teacher"]);
console.log(tom);
-----------------------------------------------------------------------------------------------------
const minNum = Math.min(3, 10, 1, 6, 4);
const maxNum = Math.max(3, 10, 1, 6, 4);
console.log(minNum);
console.log(maxNum);
-----------------------------------------------------------------------------------------------------
const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(nums);
const maxNum = Math.max(nums);
console.log(minNum); //NaN
console.log(maxNum); //NaN
-----------------------------------------------------------------------------------------------------
const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);
console.log(minNum);
console.log(maxNum);
-----------------------------------------------------------------------------------------------------
const nums = [3, 10, 1, 6, 4];
const minNum = Math.min.apply(null, nums);
// = Math.min.apply(null, [3, 10, 1, 6, 4]);
//const maxNum = Math.max.apply(null, nums);
const maxNum = Math.max.call(null, ...nums);
// = Math.max.apply(null, [3, 10, 1, 6, 4]);
console.log(minNum);
console.log(maxNum);
****************************************************************************************************************
****************************************************************************************************************
3. bind : 함수의 this값을 영구히 바꿀 수 있습니다.
const mike = {
name : "Mike",
};
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
const updateMike = update.bind(mike);
updateMike(1980, "police");
console.log(mike);
-----------------------------------------------------------------------------------------------------
const user = {
name : "Mike",
showName : function() {
console.log(`hello, ${this.name}`);
},
};
user.showName();
let fn = user.showName;
fn();
-----------------------------------------------------------------------------------------------------
const user = {
name : "Mike",
showName : function() {
console.log(`hello, ${this.name}`);
},
};
user.showName();
let fn = user.showName;
fn.call(user);
fn.apply(user);
let boundFn = fn.bind(user);
boundFn();
-----------------------------------------------------------------------------------------------------
'개발 및 관리 > Javascript' 카테고리의 다른 글
| setTimeout, clearTimeout, setInterval, clearInterval (0) | 2022.03.21 |
|---|---|
| 자바스크립트 중급 강좌 #14 상속, 프로토타입(Prototype) (0) | 2022.03.21 |
| ES6에 추가된 스펙, Class (0) | 2022.03.18 |
| JavaScript 디버깅, Java 디버깅 (0) | 2022.03.17 |
| 자바스크립트 예외 처리, How to Handle Errors (0) | 2022.03.16 |
