객체 지향 JavaScript — 프로토타입, 호출 및 적용

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 문서에서는 프로토타입 call 및 apply 를 살펴보겠습니다.

함수 프로토타입

함수에는 생성자 함수의 모든 인스턴스 간에 공유되는 항목이 있는 특수prototype 속성이 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function F() {}

F.prototype = {
  name: 'james',
  say() {
    return `I am ${this.nam}`;
  }
};

그런 다음 F 의 인스턴스 2개를 생성하면  :

const foo = new F();
const bar = new F();
console.log(foo, bar);

foo와 bar가 같은 속성을 가지고 있음을 알 수 있습니다.
say 메서드도 같은 작업을 수행합니다.

함수 객체의 메소드

함수 개체에는 고유한 메서드가 있습니다.

예를 들어, 함수에는 함수 코드와 함께 문자열을 반환하는 toString 메서드가 있습니다.

따라서 다음이 있는 경우:

function add(a, b, c) {
  return a + b + c;
}

console.log(add.toString());

우리는 다음을 얻습니다.

"function add(a, b, c) {
  return a + b + c;
}"

기록.

전화를 걸어 신청하세요.

함수에는 call 및 apply 메서드가 있어 함수를 실행하고 this 값을 설정하고 여기에 인수를 전달할 수 있습니다.

예를 들어 다음이 있는 경우:

const obj = {
  name: 'james',
  say(who) {
    return `${this.name} is ${who}`;
  }
};

그런 다음 다음과 같이 작성하여 say를 사용하여 call를 호출할 수 있습니다.

const a = obj.say.call({
  name: 'mary'
}, 'female');

그러면 a는 'mary is female’  .
this를 다음과 같이 설정했습니다.

{
  name: 'mary'
}

그래서 this.name는 'mary'  입니다.

두 번째 인수는 say 의 인수이므로 who 는 'female' 입니다.

함수의 인수가 배열에 있다는 점을 제외하고 동일한 작업을 수행하여 apply를 호출할 수도 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const obj = {
  name: 'james',
  say(who) {
    return `${this.name} is ${who}`;
  }
};

const a = obj.say.apply({
  name: 'mary'
}, ['female']);

그리고 우리는 같은 것을 얻습니다.

Arrow Functions의 어휘 this

this는 컨텍스트에 따라 변경되는 동적 개체입니다.

화살표 함수는 자체 값this에 바인딩되지 않습니다.  .

따라서 다음이 있는 경우:

const obj = {
  prefix: "Hello",
  greet(names) {
    names.forEach(function(name) {
      console.log(`${this.prefix} ${name}`);
    })
  }
}

greet는 콜백 함수이므로 this 속성이 없기 때문에 prefix 메서드에서 오류가 발생합니다.

그러나 화살표 기능을 사용하는 경우:

const obj = {
  prefix: "Hello",
  greet(names) {
    names.forEach((name) => {
      console.log(`${this.prefix} ${name}`);
    })
  }
}

그러면 함수가 this 의 자체 값에 바인딩되지 않으므로 제대로 작동합니다.

개체 유형 추론

toString의 Object.prototype 메서드는 객체를 생성하는 데 사용되는 클래스 이름을 제공합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

Object.prototype.toString.call({});

그리고 얻다:

"[object Object]"

그리고 우리가 쓴다면:

Object.prototype.toString.call([]);

우리는 다음을 얻습니다.

"[object Array]"

다음과 같이 작성하여 call 메서드와 toString를 사용할 수 있습니다.

Array.prototype.toString.call([1, 2, 3]);

우리는 다음을 얻습니다.

"1,2,3"

이것은 다음과 같습니다.

[1, 2, 3].toString()

결론

call 및 apply 메서드를 사용하면 this 및 인수의 값이 서로 다른 함수를 호출할 수 있습니다.

또한 prototype에는 모든 생성자 인스턴스 간에 공유되는 속성이 있습니다.