this, call() vs apply()

Judo·2020년 11월 14일
0
post-thumbnail
post-custom-banner

함수는 객체 메서드와 전역 객체 함수로 나뉜다.
객체 메서드는 객체 안에 함수를 뜻한다.

this

this는 해당 함수의 주인이다.

function person{
	firstName : 'Hyun Soo'.
    lastName : 'Kim",
  	fullName : function (){
    	return this.firstName + " " + this.lastName;
    }
}

위 코드처럼 fullName안에 있는 함수에서 personfunction fullName을 소유하고 있으므로 this는 person을 나타낸다.


call()

call()은 내가 이해한 바로는 다른 객체 메서드를 사용할 수 있게 하는 메서드다.
파라미터로 메서드나 함수의 오너를 호출할 수 있다.

let person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
let person1 = {
  firstName:"John",
  lastName: "Doe"
}
let person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
person.fullName.call(person1);  // Will return "John Doe"

위 코드는 w3schools 예제다. call()을 이해하기 위해 연습해보다가 가장 적당한 예시라고 생각해 가져왔다.

person.fullName.call(person1)에서 person.fullName메소드를 사용할 때 call(person1) 을 통해 person.fullName을 호출한 주인은 person1이라고 이해를 하면 될 것 같다.
코드를 해석하자면 person1 객체가 person.fullName()메소드를 호출한게 된다.

추가적으로 call()메서드안에는 인자를 사용할 수 있다.

var person = {
 fullName: function(city, country) {
   return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"John",
 lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

apply()

apply()call()과 비슷한 메서드다.

차이점

call() : 인자를 부분적으로 사용할 수 있다.
apply() : 배열의 형태로 인자를 사용할 수 있다.

person.fullName.apply(person1,['jeju','korea']);
-> "John Doe,jeju,korea"
profile
즐거운 코딩
post-custom-banner

0개의 댓글