집 >웹 프론트엔드 >JS 튜토리얼 >JS 개념 질문에 대한 요약 및 답변

JS 개념 질문에 대한 요약 및 답변

php中世界最好的语言원래의: 2018-06-04 13:49:451508검색

이번에는 JS 개념 질문에 대한 요약과 Q&A를 가져왔습니다. JS 개념 질문 사용 시 주의사항은 무엇인가요?

Q: JavaScript의 상속과 프로토타입 체이닝을 설명하고 예를 들어보세요.

JavaScript는 프로토타입 기반의 객체 지향 언어이며 전통적인 클래스 기반 상속 시스템이 없습니다.

JS에서 각 객체는 내부적으로 프로토타입이라는 객체를 참조하며, 이 프로토타입 객체 자체도 자신의 프로토타입 객체를 참조하는 등의 방식입니다. 이는 프로토타입 참조 체인을 형성하며 이 체인의 끝은 프로토타입이 null인 개체입니다. JS는 프로토타입 체인을 통해 상속을 구현합니다. 객체가 자신에게 속하지 않는 속성을 참조하는 경우 참조된 속성을 찾을 때까지(또는 체인 끝에서 직접 찾을 때까지 프로토타입 체인을 순회합니다. 정의가 아닙니다).

간단한 예:

function Animal() { this.eatsVeggies = true; this.eatsMeat = false; }function Herbivore() {}
Herbivore.prototype = new Animal();function Carnivore() { this.eatsMeat = true; }
Carnivore.prototype = new Animal();var rabbit = new Herbivore();var bear = new Carnivore();console.log(rabbit.eatsMeat);   // logs "false"console.log(bear.eatsMeat);     // logs "true"

Q: 다음 코드 조각에서 경고는 무엇을 표시합니까? 답변을 설명해 주세요.

var foo = new Object();var bar = new Object();var map = new Object();
map[foo] = "foo";
map[bar] = "bar";
alert(map[foo]);  // what will this display??

여기에 알림 표시줄이 나타납니다. JS 객체는 본질적으로 키-값 쌍의 해시 테이블이며, 여기서 키는 항상 문자열입니다. 실제로 문자열이 아닌 객체를 키로 사용하면 JS는 이를 암시적으로 문자열로 변환하고 해당 값을 키로 사용하므로 오류가 발생하지 않습니다.

그래서 위 코드의 지도 객체가 foo 객체를 키로 사용하면 자동으로 foo 객체의 toString() 메서드를 호출하고 기본 구현이 여기에서 호출됩니다. "[object Object]"라는 문자열을 얻게 됩니다. 그럼 위 코드를 보면 설명은 다음과 같습니다.

var foo = new Object();
var bar = new Object();
var map = new Object();
map[foo] = "foo";    // --> map["[Object object]"] = "foo";
map[bar] = "bar";    // --> map["[Object object]"] = "bar";                     // NOTE: second mapping REPLACES first mapping!
alert(map[foo]);     // --> alert(map["[Object object]"]);                     // and since map["[Object object]"] = "bar",                     // this will alert "bar", not "foo"!!                     //    SURPRISE! ;-)

Q: JavaScript의 클로저에 대해 설명해주세요. 폐쇄란 무엇입니까? 그들은 어떤 독특한 특성을 갖고 있나요? 어떻게 그리고 왜 사용합니까? 예를 들어주세요.

클로저는 클로저가 생성될 때 범위 내에 있는 모든 변수나 기타 함수를 포함하는 함수입니다. JavaScript에서 클로저는 다른 함수의 본문 내에 정의된 함수인 "내부 함수" 형식으로 구현됩니다. 간단한 예는 다음과 같습니다.

(function outerFunc(outerArg) {  var outerVar = 3;
  (function middleFunc(middleArg) {    var middleVar = 4;
    (function innerFunc(innerArg) {      var innerVar = 5;      // EXAMPLE OF SCOPE IN CLOSURE:
      // Variables from innerFunc, middleFunc, and outerFunc,
      // as well as the global namespace, are ALL in scope here.
      console.log("outerArg="+outerArg+                  " middleArg="+middleArg+                  " innerArg="+innerArg+"\n"+                  " outerVar="+outerVar+                  " middleVar="+middleVar+                  " innerVar="+innerVar);      // --------------- THIS WILL LOG: ---------------
      //    outerArg=123 middleArg=456 innerArg=789
      //    outerVar=3 middleVar=4 innerVar=5
    })(789);
  })(456);
})(123);

클로저의 중요한 특징은 외부 함수가 반환된 후에도 내부 함수가 외부 함수의 변수에 계속 액세스할 수 있다는 것입니다. 이는 JavaScript에서 함수가 실행될 때 함수가 생성될 때 적용되었던 범위를 계속 사용하기 때문입니다.

그러나 내부 함수가 생성될 때가 아니라 호출될 때 외부 함수 변수의 값에 액세스하면 혼란이 발생할 수 있습니다. 이 뉘앙스에 대한 응시자의 이해도를 테스트하려면 다음 코드 조각을 사용하십시오. 이 코드는 5개의 버튼을 동적으로 생성하고 사용자가 세 번째 버튼을 클릭할 때 무엇이 표시될지 응시자에게 묻습니다.

function addButtons(numButtons) {  for (var i = 0; i < numButtons; i++) {    var button = document.createElement(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);
    button.onclick = function() {
      alert(&#39;Button &#39; + (i + 1) + &#39; clicked&#39;);
    };    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}window.onload = function() { addButtons(5); };

많은 사람들이 틀렸다고 대답했습니다. 사용자가 세 번째 버튼을 클릭하면 "버튼 3이 클릭되었습니다"가 표시됩니다. 실제로 위 코드에는 사용자가 5개 버튼 중 하나를 클릭할 때 "버튼 6 클릭"을 표시하는 버그(클로저에 대한 오해에 기반함)가 포함되어 있습니다. 이는 (모든 버튼에 대해) onclick 메서드가 호출될 때 for 루프가 완료되고 변수 i의 값이 이미 5이기 때문입니다.
다음으로 응시자에게 위 코드의 오류를 수정하여 예상되는 동작을 생성하는 방법을 질문할 수 있습니다(예: 버튼 n을 클릭하면 "버튼 n 클릭"이 표시됨). 응시자가 정답을 제시할 수 있다면 아래와 같이 클로저를 올바르게 사용하는 방법을 알고 있다는 의미입니다.

function addButtons(numButtons) {  for (var i = 0; i < numButtons; i++) {    var button = document.createElement(&#39;input&#39;);
    button.type = &#39;button&#39;;
    button.value = &#39;Button &#39; + (i + 1);    // HERE&#39;S THE FIX:
    // Employ the Immediately-Invoked Function Expression (IIFE)
    // pattern to achieve the desired behavior:
    button.onclick = function(buttonIndex) {      return function() {
        alert(&#39;Button &#39; + (buttonIndex + 1) + &#39; clicked&#39;);
      };
    }(i);    document.body.appendChild(button);    document.body.appendChild(document.createElement(&#39;br&#39;));
  }
}window.onload = function() { addButtons(5); };

이 기사의 사례를 읽으신 후 해당 방법을 숙달하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!