당신도 멋지다고 생각할 멋진 JavaScript 개념

JavaScript로 몇 년간 작업한 후에 저는 제가 직면한 많은 문제가 단순히 몇 가지 필수 개념을 몰랐기 때문에 어려워진다는 것을 깨달았습니다. 이 주제를 더 일찍 마스터했다면 확실히 스트레스를 피할 수 있었을 것입니다.

그래서 저는 어쩐지 제 머릿속에 맴돌고 배웠을 때 그저 흥미로웠던 4가지 개념을 가져왔습니다. 특히 JavaScript를 시작하고 이미 최소한의 지식을 갖고 있는 사람들에게 JavaScript 작업 방법을 살펴보고 이해하는 것이 좋습니다. 언어의 기본 개념.

1. 폐쇄

클로저는 범위와 관련하여 JavaScript에서 가장 강력하고 종종 혼란스러운 개념 중 하나입니다. 해당 환경이 더 이상 실행되지 않는 후에도 함수가 생성된 환경을 "기억"할 수 있습니다. 이는 전역 범위를 오염시키지 않고 "개인" 변수를 생성하고 상태를 관리하는 데 유용합니다.

예:

function criarContador() {
    let contador = 0;

    return {
        incrementar: function() {
            contador++;
            return contador;
        },
        obterValor: function() {
            return contador;
        }
    };
}

const meuContador = criarContador();

console.log(meuContador.obterValor()); // 0
console.log(meuContador.incrementar()); // 1
console.log(meuContador.incrementar()); // 2
console.log(meuContador.obterValor()); // 2

위의 예에서 myCounter가 이미 obtainValor 또는 increment를 사용하여 값을 반환한 후에도 내부 함수는 외부 함수에 속한 counter 변수에 액세스합니다. 폐쇄가 있기에 가능한 일입니다.

2. 프로토타입 상속

자바스크립트는 클래스와 클래스 상속(Java나 C 같은 언어에서 잘 확립된 개념)을 지원하지만, 프로토타입 기반 상속 모델을 기본적으로 채택한다는 점에서 차별화됩니다. JavaScript에서 모든 개체에는 일종의 청사진(템플릿) 역할을 하는 "프로토타입"이 있어 개체 간에 속성과 메서드를 공유할 수 있습니다. 이 프로토타입 상속 모델은 언어의 가장 기본적인 기능 중 하나이므로 기존 클래스 기반 상속에 비해 더 유연합니다.

예:

function Carro(nome) {
    this.nome = nome;
}

Carro.prototype.buzina = function() {
    console.log(`${this.nome} faz um som de buzina`);
}

const camaro = new Carro('Camaro');
camaro.buzina(); // Camaro faz um som de buzina

여기서 카마로는 Carro 프로토타입의 혼 메소드를 상속받아 자바스크립트의 상속 아이디어를 보여줍니다. 프로토타입 체인을 통해 코드를 복제할 필요 없이 서로 다른 객체 간에 동작을 공유할 수 있습니다.

3. 카레

커링은 여러 인수를 취하는 함수를 한 번에 하나의 인수를 취하는 일련의 함수로 변환하는 기술입니다. 이 접근 방식은 재사용 가능한 기능을 생성하고 보다 유연한 방식으로 새 기능을 구성하는 데 유용합니다.

예:

function somar(a) {
    return function(b) {
        return a + b;
    }
}

const somarTres = somar(3);
console.log(somarTres(3)); // 6

예제에서 add(5)는 두 번째 인수를 사용하는 새 함수를 반환하므로 코드의 다른 부분에서 논리를 재사용할 수 있습니다.

4. 이벤트 루프 및 콜백

이벤트 루프는 JavaScript가 비동기 작업을 처리하는 방법을 이해하기 위한 기본 개념입니다. 그리고 이것을 이해하는 것이 JavaScript 학습의 판도를 바꾸었습니다. 기본적으로 수행하는 작업은 호출 스택(동기 코드가 실행되는 위치)과 이벤트 큐(콜백, 이벤트 및 약속과 같은 비동기 작업이 저장되는 위치)를 모니터링하는 것입니다. 콜 스택이 비어 있으면 이벤트 루프는 이벤트 큐에서 작업을 가져와 실행할 스택에 넣습니다. 이렇게 하면 JavaScript가 다른 작업을 차단하지 않고 코드를 계속 실행할 수 있습니다. 이는 I/O 이벤트, 타이머 및 DOM과의 상호 작용을 처리하는 애플리케이션의 유동성을 유지하는 데 필수적입니다.
예:

console.log('Início');

setTimeout(() => {
    console.log('Timer expirou');
}, 0);

console.log('Fim');

// Saída:
// Início
// Fim
// Timer expirou

setTimeout을 0밀리초로 설정하더라도 이벤트 큐에 배치되며 동기 코드(예: console.log)가 처리된 후에만 실행됩니다.
이 개념에 초점을 맞춘 다른 기사의 이미지와 함께 더 자세히 설명할 예정입니다. 왜냐하면 저에게는 이해하는 것이 매우 중요했고 많은 사람들에게도 마찬가지일 것이라고 확신하기 때문입니다.

이러한 개념에 대해 더 알고 싶거나 구체적인 질문이 있으신가요? 댓글로 남겨주시면 살펴보도록 하겠습니다!

위 내용은 당신도 멋지다고 생각할 멋진 JavaScript 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!