호출

김정현·2024년 3월 26일
0

JavaScript

목록 보기
4/10
function Person() {
    this.name = "이이름";
    this.age = 40;
}

Person.call(p1) 
vs
Person(p1)

Person(p1)Person.call(p1) 의 차이점에 대해서 궁금해서 검색해봤다.

우선 공통점으로는 둘 다 Person 함수를 호출한다는 것이다.
함수를 호출하고 this에 객체를 대입하는 것은 같지만, 각자 대입되는 객체가 다르다.

우선 Person(p1) 의 경우,
단순히 Person을 호출하는 것이다.
javaScript에서는 함수를 호출할때에는 함수의 콘텍스트가 호출하는 객체에 의해 this에 대입되는 개체가 달라진다.
그렇기 때문에
위의 경우 window 즉, 전역객체가 대입되게 된다.

반면 Person.call(p1)의 경우,
call() 메서드는 함수를 호출하면서 첫 번째 매개변수로 지정한 객체를 함수 내에서 this로 설정하게 된다.
즉, 이 호출은 p1객체를 Person내부의 this로 대입하게끔 만든다.

그렇기에 후자의 키워드를 선택하는 것이 p1 객체에 Person 함수의 속성이 추가되고 올바르게 설정되는 방법이다.

상속과 직접 조작

function Person() {
    this.name = "이이름";
    this.age = 40;
}
const p1 = {}

p1.__proto__ = Person.prototype

Person.call(p1)

vs

function Person(test) {
    test.name = "이이름";
    test.age = 40;
}
const p1 = {}
Person(p1)

두개의 코드 모두 p1.name 을 출력했을때 같은 값을 출력하였기에 두개의 차이점이 궁금해졌다.

우선 공통점으로는 두 객체를 생성하고 초기화하는 것은 맞다.
그러나 첫번째 코드는 p1객체에 Person함수의 프로토타입을 설정하고 p1객체를 초기화한다. 이로써 p1객체는 Person 함수의 프로토타입에 정의된 메서드 및 속성을 상속 받게된다.

그러나 후자의 코드는 Person함수가 객체를 직접 조작하여 초기화하게 된다. 그렇기에 더 명시적으로 직관적일순 있지만 프로토타입을 링크하지 못하기 때문에 프로토타입의 특성을 물려받지 못하고 함수 내부에서 파라미터로 설정되어 있는 값들만 받아오게 된다 .

0개의 댓글