JavaScript 고급 시리즈 - 작동 방식

• 전역 범위

• 함수 호출

• 메서드 호출

• 생성자 호출

• 명시적으로 설정

• 일반적인 오해

• 메소드 할당 표현식

JavaScript는 이를 처리하는 데 있어서 다른 언어와 완전히 다른 메커니즘을 가지고 있습니다. 다섯 가지 다른 경우에서 이는 다른 점을 나타냅니다.

전역 범위

this;

모든 범위에서 사용되면 전역 개체를 가리킵니다.

함수 호출

foo();

여기서도 전역 개체를 가리킵니다.

메서드 호출

test.foo();

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

생성자 호출

new foo();

함수가 new 키워드와 함께 사용되는 경향이 있는 경우 이 함수를 생성자라고 부릅니다. 함수 내에서 이것은 새로 생성된 객체를 가리킵니다.

이를 명시적으로 설정

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

Function.prototype에서 호출 또는 적용 메서드를 사용하는 경우 함수 내에서 this가 함수 호출의 첫 번째 매개변수로 명시적으로 설정됩니다.

따라서 위의 예에서는 함수 호출 규칙이 더 이상 적용되지 않으며 이는 foo 함수에서 bar로 설정됩니다.

일반적인 오해

대부분의 상황이 사실이지만 첫 번째 규칙(번역자 주: 이는 두 번째 규칙을 의미합니다. 함수를 직접 호출하는 것(전역 객체를 가리킴)은 실제로 사용된 적이 없기 때문에 JavaScript 언어의 또 다른 잘못된 설계로 간주됩니다.

Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象（译者注：浏览器环境中也就是 window 对象）
    }
    test();
}

일반적인 오해는 테스트에서 이것이 Foo 객체를 가리킨다는 것인데 실제로는 그렇지 않습니다.

테스트에서 Foo 객체에 대한 참조를 얻으려면 Foo 객체를 가리키는 메소드 함수 내부에 지역 변수를 생성해야 합니다.

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}

그것은 우리가 무작위로 붙인 이름이지만, 이 이름은 이 물체의 외부를 가리키는 데 널리 사용됩니다. Closures 섹션에서 우리는 이것이 매개변수로 전달될 수 있다는 것을 보았습니다.

참고: 객체의 리터럴 선언 구문에서는 객체 자체를 가리키는 데 사용할 수 없습니다. 따라서 var obj = {me: this}의 me는 obj를 가리키지 않습니다. 이는 위의 5가지 상황에서만 나타날 수 있기 때문입니다. 번역자 주: 이 예에서 브라우저에서 실행하면 obj.me는 window 개체와 동일합니다.

메소드 할당식

또 이상한 점은 변수에 메소드를 할당하는 함수 별칭입니다.

var test = someObject.methodTest;
test();

위의 예에서 test는 일반 함수처럼 호출되므로 함수 내의 this는 더 이상 someObject 개체를 가리키지 않습니다.

늦은 바인딩 기능이 비우호적으로 보이지만 실제로는 프로토타입 상속이 의존하는 토양을 기반으로 합니다.

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

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

new Bar().method();

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

이상은 JavaScript 고급 시리즈의 작동 원리입니다. 더 많은 관련 내용을 보려면 PHP 중국어 사이트(m.sbmmt.com)를 참고하세요!