JS에서 this가 가리키는 여러 함수 호출 방법 소개

이 글은 JS에서 언급된 여러 함수 호출 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

JavaScript 초보자는 this 포인터에 대해 항상 혼란스러울 것입니다. JavaScript를 깊이 있게 배우고 싶다면 먼저 이와 관련된 몇 가지 개념을 명확히 해야 합니다. JavaScript에서 이는 항상 객체를 가리키지만, 이것이 가리키는 특정 객체는 함수가 선언될 때의 환경이 아닌 함수 실행 환경에 따라 런타임에 동적으로 바인딩됩니다. 흔하지 않은 with 및 eval 상황을 제외하고 실제 응용 프로그램에서 이 포인터는 대략 다음 네 가지 유형으로 나눌 수 있습니다.

객체의 메서드로 호출

함수가 객체의 메서드로 호출될 때 이것은 객체를 가리킵니다.

var person = {
  name: 'twy',
  getName: function() {
    console.info(this === person);  // 输出true
    console.info(this.name);     // 输出twy
  }
}
person.getName();

일반 함수로 호출

함수가 일반 함수로 호출될 때 이것은 비엄격 모드에서 전역을 가리킵니다 객체:

function getName(){
  // 非严格模式
  console.info(this === window); // 浏览器环境下输出true
}
getName();

이것은 엄격 모드에서 정의되지 않습니다:

function getName(){
  // 严格模式
  "use strict"
  console.info(this === window); // 输出false
}
getName();

생성자 호출

새 객체가 생성되면 생성자의 이 항목은 새 객체를 가리킵니다:

function person(){
  // 构造函数
  this.color = 'white';
}
var boy = new person();
console.info(boy.color);  // 输出white

call 또는 호출 적용

Use Function.prototype.apply 或 Function.prototype.call 예 들어오는 함수의 this 포인터를 동적으로 변경합니다:

// 声明一个父亲对象，getName方法返回父亲的名字
var father = {
  name: 'twy',
  getName: function(){
    return this.name;
  }
}
// 生命一个儿子对象，但是没有返回名字的功能
var child = {
  name: 'chy'
}
console.info(father.getName()); // 输出twy

// 使用call或apply将father.getName函数里this指向child
console.info(father.getName.call(child)); // 输出chy
console.info(father.getName.apply(child)); // 输出chy

위 내용은 JS에서 this가 가리키는 여러 함수 호출 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!