제가 조사할 수 있도록 이 JavaScript 구문을 무엇이라고 부르나요?

StackOverflow https://stackoverflow.com/questions/3208236

  •  13-09-2020
  •  | 
  •  

문제

1) 다음 코드에서 만드는 이유는 무엇입니까? gameOfLive 변수뿐만 아니라 function gameOfLife()?

2) 무엇입니까? gol?배열처럼 보이지만 구문이나 호출이 무엇인지 잘 모르겠습니다.

나는 공부하고 있다 http://sixfoottallrabbit.co.uk/gameoflife/

if (!window.gameOfLife) var gameOfLife = function() {

    var gol = {
        body: null,
        canvas: null,
        context: null,
        grids: [],
        mouseDown: false,
        interval: null,
        control: null,
        moving: -1,
        clickToGive: -1,
        table: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(''),
        tableBack: null,

        init: function(width, height) {
            gol.body = document.getElementsByTagName('body')[0];
            gol.canvas = document.createElement('canvas');
            if (gol.canvas.getContext) {
                gol.context = gol.canvas.getContext('2d');
                document.getElementById('content').appendChild(gol.canvas);
                gol.canvas.width = width;
                gol.canvas.height = height;
                gol.canvas.style.marginLeft = "8px";

                gol.control = document.getElementById('gridcontrol');

                gol.canvas.onmousedown = gol.onMouseDown;
                gol.canvas.onmousemove = gol.onMouseMove;
                gol.canvas.onmouseup = gol.onMouseUp;

                gol.addGrid(48,32,100,44,8);

                gol.refreshAll();
                gol.refreshGridSelect(-1);
                gol.getOptions(-1);

                gol.genTableBack();
            } else {
                alert("Canvas not supported by your browser. Why don't you try Firefox or Chrome? For now, you can have a hug. *hug*");
            }
        },
    }
}
도움이 되었습니까?

해결책 

var gameOfLife = function() { }

는 함수 표현, 반면

function gameOfLife() { }

는 함수 선언.

Juriy 'kangax' Zaytsev의 말을 인용하자면 함수 표현식과함수 선언:

선언과 표현의 행동에는 미묘한 차이가 있습니다.

우선, 기능 선언은 다른 표현식이 있기 전에 구문 분석 및 평가됩니다.선언이 소스에서 마지막으로 배치 되더라도 평가됩니다. 무엇보다도 다른 표현 범위에 포함되어 있습니다.[…]

기능 선언의 또 다른 중요한 특성은 조건부로 선언하는 것이 표준화되지 않으며 환경에 따라 다르다는 것입니다.조건부로 선언되는 함수에 의존해서는 안되며 대신 기능 표현을 사용해서는 안됩니다.

이 경우 Joel Coehoorn이 댓글에서 언급했듯이, gameOfLife 조건부로 정의되므로 함수 표현식을 사용해야 합니다.

조건부로 정의된 이러한 함수의 일반적인 사용 사례는 최신 기능을 기본적으로 지원하지 않는 브라우저에서 JavaScript 기능을 향상시키는 것입니다(이전 ECMAScript/JavaScript 버전에서는 사용할 수 없음).함수 선언을 사용하여 이 작업을 수행하고 싶지는 않습니다. 어쨌든 기본 기능을 덮어쓰게 되며 이는 속도 등을 고려하여 원하는 것이 아닐 가능성이 높습니다.짧은 예 이의:

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(item, from) {
        /* implement Array.indexOf functionality,
           but only if there's no native support */
    }
}

함수 표현식의 한 가지 주요 단점은 실제로 익명 함수를 변수에 할당한다는 것입니다.이것은 만들 수 있습니다 더 열심히 디버깅, 함수 이름은 일반적으로 스크립트 실행이 중단될 때(예: 사용자가 설정한 중단점에서) 알 수 없기 때문입니다.Firebug와 같은 일부 JavaScript 디버거는 함수가 할당된 변수의 이름을 제공하려고 시도하지만 디버거는 스크립트 내용을 즉시 구문 분석하여 이를 추측해야 하므로 이는 너무 어려울 수 있습니다. (?)() 함수 이름 대신 표시됨) 또는 잘못된 경우도 있습니다.

(예를 들어, 페이지의 내용을 읽어 보십시오. 내용은 초보자에게 적합하지 않습니다.)

다른 팁

  1. JavaScript에서 함수는 일류 물건.객체(변수)에 저장하고 함수에 인수로 전달할 수 있습니다.모든 기능은 실제로 Function 물체.

  2. gol 은(는) 객체이며, 다음을 사용하여 초기화되고 있습니다. 객체 리터럴 표기법.

1) 다음 코드에서 gameOfLive를 "gameOfLife() 함수"가 아닌 변수로 만드는 이유는 무엇입니까?

전역 수준에서 정의된 변수는 창 개체의 멤버입니다.따라서 변수로 만들면 다음 구문을 사용할 수 있습니다. window.gameOfLife().그것이 바로 그들이 다음을 사용할 수 있는 이유이기도 합니다. if (!window.gameOfLife) 스니펫 시작 부분을 확인하세요.

그러나 이것이 그들이 왜 이런 방식을 선택했는지 실제로 설명하지는 않으며 함수 선언도 동일한 작업을 수행합니다. 마르셀 코르펠의 답변 두 옵션의 "이유"를 더 잘 설명합니다.

2) 골이란 무엇입니까?배열처럼 보이지만 구문이나 호출이 무엇인지 잘 모르겠습니다.

이 구문을 컴팩트 객체 표기법이라고 합니다.여기서 흥미로운 점은 "컴팩트" 개체가 함수 내부에서 선언된다는 것입니다.이와 같이 함수 내에서 객체를 선언하는 것은 비공개 멤버로 (효과적으로) 자바스크립트 객체를 구축하는 데 사용할 수 있기 때문에 유용합니다.

핵심은 자바스크립트의 함수와 객체를 기억하는 것입니다. 같은거야.따라서, 전체 gameOfLife() 함수는 실제로 객체 정의입니다.더욱이, gol 멤버로 선언된 객체 gameOfLife 개인 멤버를 정의하는 일반적인 기술의 일부일 가능성이 높습니다.그만큼 gameOfLife() 함수/객체는 이것을 반환합니다 gol 물체.그 외 모든 항목은 gameOfLife() 함수/객체는 사실상 반환된 개체의 전용 멤버가 됩니다. gol 예를 들어, 내부에 선언된 모든 것은 gol 객체 자체는 공개입니다.그들이 정말로 원하는 것은 결국 다음과 같은 코드를 작성하는 것입니다.

var game = new gameOfLife();

이제 그렇게 하면 게임 변수는 gol 물체.이 개체의 메서드는 전체 개체에 선언된 항목에 계속 액세스할 수 있습니다. gameOfLife() 기능하지만 다른 코드는 그렇지 않습니다(적어도 그렇게 쉽지는 않습니다).따라서 해당 항목은 사실상 비공개입니다.항목 gol 객체 자체는 여전히 공개되어 있습니다.따라서 다른 객체 지향 언어로 빌드하는 것과 마찬가지로 적절한 캡슐화/정보 숨기기를 위해 개인 및 공용 멤버가 모두 포함된 객체가 있습니다.

변수에 함수를 넣으면 나중에 이를 다른 함수로 대체하여 해당 함수를 나머지 코드에 투명하게 대체할 수 있습니다.이는 양식 위젯에 "onClick="을 지정할 때 수행하는 작업과 동일합니다.

확신하는:구문을 설명하려면 다음을 수행하십시오.

함수는 자바스크립트의 일급 객체이므로 함수를 변수에 넣을 수 있습니다.따라서 이 코드의 주요 부분은 실제로 var gameOfLife에 저장된 함수 정의이며 나중에 다음을 호출하여 사용할 수 있습니다.

gameOfLife()

gol은 객체(해시)이고 "init"는 "gol" 해시의 "init" 키에 직접 입력하는 것을 제외하고 위 구문의 또 다른 예입니다.그래서 저것 함수는 다음과 같이 호출될 수 있습니다.

gol["init"](w,h)

에 따르면 이 페이지, 선언 gameOfLife 그들의 방식은 당신의 방식대로 선언하는 것과 다르지 않습니다.그들이 정의하는 방식 gol 객체로 만듭니다(또는 연관 배열로 생각할 수도 있습니다).배열에 대한 유사한 단축키는 중괄호 대신 대괄호를 사용하는 것입니다.

함수를 객체의 속성으로 사용하려는 경우 함수를 변수로 간주하는 것이 유용할 수 있습니다.(보다: http://www.permadi.com/tutorial/jsFunc/index.html)

나는 gol이 JSON 형식과 매우 유사한 이름/값 쌍으로 설명된 JavaScript 개체라고 생각합니다.(보다: http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_))

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top