>  기사  >  웹 프론트엔드  >  자바스크립트 연구 노트 - 함수(2): this의 작동 메커니즘_기본지식

자바스크립트 연구 노트 - 함수(2): this의 작동 메커니즘_기본지식

WBOY
WBOY원래의
2016-05-16 16:43:171033검색

글로벌 범위에서

이;
전역 범위에서 사용되는 경우 전역 개체를 가리킵니다.
전역 개체에 대한 자세한 소개는 다음과 같습니다.

전역 개체는 실행 컨텍스트에 들어가기 전에 생성된 개체입니다.
이 개체의 복사본은 하나만 있으며 프로그램의 어느 곳에서나 해당 속성에 액세스할 수 있습니다. 전역 개체의 수명 주기는 프로그램이 종료되는 순간 종료됩니다.
전역 객체의 초기 생성 단계에서는 Math, String, Date, parsInt가 자체 속성으로 사용되며, 다른 속성은 초기화됩니다. 추가로 생성된 다른 객체도 속성으로 가질 수 있습니다(전역 객체 자체를 가리킬 수 있음). . 예를 들어 DOM에서 전역 객체의 window 속성은 전역 객체 자체를 참조할 수 있습니다.
따라서 콘솔에 window를 입력하는 것은 this.window와 같습니다.

함수를 호출할 때

foo();
여기서도 전역 개체를 가리킵니다.

메소드 호출 시

test.foo();

이 예에서는 테스트 개체를 가리킵니다.

생성자를 호출할 때

새로운 foo();

new 키워드로 함수를 호출하면 이를 생성자라고 부릅니다. 이때 함수 ​​내에서 this는 새로 생성된 객체를 가리킨다.

명시적으로 설정한 경우

function foo(a, b, c) {}//

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

Function.prototype의 적용 및 호출 메소드를 사용할 때 이 값이 메소드의 첫 번째 매개변수로 명시적으로 설정됩니다.
따라서 함수를 호출할 때의 규칙과 달리 위의 예에서는 bar를 참조합니다.

호출 및 적용 방법은 다음과 같습니다.

호출 방법 :

구문: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
정의: 현재 객체를 다른 객체로 대체하기 위해 객체의 메소드를 호출합니다.

적용방법:

구문: apply([thisObj[,argArray]])
정의: 객체의 메소드를 적용하여 현재 객체를 다른 객체로 대체합니다.
여기서 주목해야 할 한 가지는 객체가 문자 그대로 선언되면 객체 자체를 가리키는 데 사용할 수 없다는 것입니다. 다음과 같습니다:

var obj = {me: this}

여기서는 obj를 가리키지 않으며, 위의 5가지 상황에만 적용이 제한됩니다.

요약

위의 상황은 대부분의 경우 의미가 있지만 두 번째 상황(즉, 함수를 호출할 때)에서는 실제로 거의 유용하지 않으며 이는 Javascript 디자인의 또 다른 실수로 간주됩니다.

Foo.method = function() {
  function test() {
    // this is set to the global object
  }
  test();
}

위에서 말한 대로 여기에서는 Foo 함수가 아닌 전역 개체를 가리킵니다.
테스트에서 Foo에 액세스하려면 Foo를 가리키는 메서드 내부에 지역 변수를 만들어야 합니다.

Foo.method = function() {
  var that = this;
  function test() {
    // Use that instead of this here
  }
  test();
}

그냥 일반적인 변수 이름이지만 외부 this를 가리키는 데 자주 사용됩니다.
함수 별칭과 관련된 또 다른 흥미로운 부분이 있습니다. 즉, 변수에 메서드를 할당할 때입니다.

var test = someObject.methodTest;
test();

위의 예에서 test는 일반 함수로 처리되므로 두 번째 경우(즉, 함수를 호출할 때)에 따르면 내부 this는 someObject 대신 전역 변수를 가리킵니다.
이 후기 바인딩은 처음에는 잘못된 결정처럼 보일 수 있지만 실제로는 프로토타입 상속이 작동하는 방식의 기초입니다.

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

이 시점에서 메소드가 호출되면 Bar의 인스턴스 객체를 가리킵니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.