> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 연산자 우선 순위에 대한 자세한 분석(예제 포함)

JavaScript 연산자 우선 순위에 대한 자세한 분석(예제 포함)

不言
풀어 주다: 2018-11-26 15:40:39
앞으로
2162명이 탐색했습니다.

이 기사는 JavaScript 연산자 우선 순위에 대한 자세한 분석을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

저는 2년 동안 문법의 함정에 빠지지 않을 줄 알았는데, 사실 최근 제품 개발팀에 한 잘생긴 남자가 뺨을 맞았습니다. 문제에 대해 논의해 보겠습니다. 모든 사람이 더 쉽게 읽을 수 있도록 이 문제의 모델을 추상화했습니다.

var provider = {
    test: {
        $get: function(){
            return function anonymous(config){
            };
        }
    }
};
var type = "test";
var config = {};
new provider[type].$get()(config);
로그인 후 복사

함수에 이>가 있는 이유는 무엇입니까? 위 명령문이 실행될 때 <code>anonymous? code>는 new 대신 window에 의해 생성된 새 객체를 가리킵니다. 이 질문을 들었을 때 제가 가장 먼저 생각한 것은: Nani! new 연산자에 해당하는 생성자의 this가 새로 생성된 객체를 가리키지 않는다는 것이 어떻게 가능합니까? ? 예는 어떻습니까? 당시에는 사업에 대한 문제를 주의깊게 추상화하지 않았기 때문에 사실 조금 혼란스러웠습니다. 그런데 곰곰이 생각해보면 이 문장은 정확히 무엇을 표현한 것일까요? anonymous中的this指向的是window而不是new创建的新对象。我当时听到这个问题的第一时刻想的是: 纳尼 !怎么可能new操作符对应的构造函数中的this指向的不是新创建的对象实例呢?当时由于并没有仔细地将问题从业务中抽象出来,其实我也有点迷糊,但仔细一想,这个语句到底要表达什么呢?

思考

在说这个表达式所要表达的含义之前,先说一个关于new操作符的几个小知识:

构造函数的返回

JavaScript构造函数中可以返回值,也可以不返回值,比如:

function Person(){

}
var person = new Person()
로그인 후 복사

我们知道这个时候构造函数返回的是创建的实例对象,也就是构造函数中this

Thinking

이 표현의 의미에 대해 이야기하기 전에 새 연산자에 대한 약간의 지식에 대해 이야기해 보겠습니다.# 🎜🎜## 🎜🎜#Constructor return

JavaScript 생성자는 다음과 같은 값을 반환하거나 반환하지 않을 수 있습니다.

function Person(){
    return function(){}
}
var person = new Person()
typeof person // "function"
로그인 후 복사
#🎜 🎜#현재로서는 생성자는 생성자의 this가 가리키는 개체인 생성된 인스턴스 개체를 반환합니다. 하지만 생성자에 반환 값이 있는 경우 상황에 따라 차별화해야 합니다. 비참조 유형 값이 반환되는 경우 실제로 반환되는 것은 여전히 ​​새로 생성된 인스턴스 개체입니다. 그러나 참조 유형의 값이 반환되면 참조 개체 자체가 반환됩니다. 예:
new constructor[([arguments])]
로그인 후 복사

JavaScript에서 함수는 일급 시민으로서 본질적으로 참조 유형이므로 person은 반환된 익명 함수입니다. JavaScript 연산자 우선 순위에 대한 자세한 분석(예제 포함)new 연산자의 두 가지 형태

사실 MDN의 new 연산자 설명에서 구문은

new provider[type].$get()(config);
로그인 후 복사
#🎜 🎜#입니다. ([인수])는 대괄호로 둘러싸여 있으며 이는 기본값이 될 수 있음을 의미합니다. 따라서 매개변수가 없는 생성자에 대해 new Person()과 new Person 사이에 차이가 없다면 다음 질문에 대해 생각해 보겠습니다. . 이전에 함수를 반환한 Person의 경우 new Person()이 실행될 때 (new Person)() 대신 new Person()이 실행되는 이유는 무엇입니까? 이전 기사 중 하나를 읽어보셨다면 매개변수가 있는 new 연산자가 매개변수 목록이 없는 new 연산자보다 우선순위가 높다는 것을 아실 것입니다. 따라서 항상 두 번째 대신 첫 번째가 실행됩니다.

#위의 단계를 이해한 후 문제의 본질에 가까워졌습니다. #
(new provider[type].$get())(config);
로그인 후 복사

JavaScript 엔진이 다음으로 구문 분석하는지 여부:

new (provider[type].$get())(config);
로그인 후 복사

또는

var str = "Hello" + true ? "World" : "JavaScript";
로그인 후 복사
첫 번째 양식의 경우 (new 공급자[type].$get()) 무엇 반환되는 것은 익명 함수이므로 익명(config)의 내부 this 지점은 window입니다. 두 번째 모드에서 공급자[type].$get()은 익명 함수를 반환하므로 new anonymous(config)를 실행할 때 내부 this 포인터는 새로 생성된 인스턴스 this를 가리킵니다. 물론 이것이 왜 new로 생성된 새로운 객체 대신 window를 가리키는지 보면 알 수 있습니다. 사실 작가가 당시에 표현하고 싶었던 것은 두 번째 의미였지만, 사실은 두 번째 의미였습니다. 왜? 그 이유는 매우 간단합니다. 첫 번째 실행 방법에서는 JavaScript 엔진이 먼저 new 연산자를 매개변수 목록으로 구문 분석하는 반면, 두 번째 방법에서는 함수 호출이 먼저 실행된 후 new 연산자가 실행됩니다. 레벨 다이어그램에서 볼 수 있듯이 매개변수 목록이 있는 new는 함수 호출보다 우선순위가 높으므로 첫 번째 방법으로 실행해야 합니다.


사실 이 글에는 유용한 정보가 별로 없지만, 그래도 두 가지 인사이트가 있습니다. 먼저, 이전 유사한 글에서 이렇게 모호한 표현은 사용하지 말 것을 강조했습니다. 예를 들어 일부 학생들은 다음과 같이 작성할 것입니다.

rrreee

그렇다면 str의 내용은 무엇입니까? 어떤 사람들은 Hello World라고 생각할 수도 있습니다. Hello World입니다. 실제로 연산 결과는 World입니다.

+ 연산자가 조건 연산자보다 우선순위가 높기 때문에 이때 괄호를 추가하면 코드를 더 쉽게 읽을 수 있습니다. 둘째, 기술에 대한 경외심을 가지십시오. 모든 것을 알고 있다고 생각하지만 실제로는 아무것도 모른다는 것입니다. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#

위 내용은 JavaScript 연산자 우선 순위에 대한 자세한 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿