Madame Lelica

소개

자바 스크립트는 프로토 타입을 기반의 언어와 모든 개체 자바스크립트에는 숨겨져 내부 속성이라는]사용할 수 있는 확장하는 개체의 특성 및 방법입니다. 에 대한 자세한 내용을 읽을 수 있는 시제품에서 우리의 이해 시제품 및 상속에서 JavaScript 습니다.

최근까지 근면 한 개발자는 생성자 함수를 사용하여 JavaScript 에서 객체 지향 디자인 패턴을 모방했습니다., 종종 ES6 이라고하는 언어 사양 ECMAScript2015 는 JavaScript 언어에 클래스를 도입했습니다. 클래스에서 JavaScript 지 않습니다 실제로 제공한 추가 기능을 종종 설명을 제공하는 것으로”구문 설탕”이상 프로토타입 및 상속에서 그들이 제공하는 깨끗하고 우아한 구문입니다. 기 때문에 다른 프로그래밍 언어의 클래스를 사용 클래스에서 구문을 JavaScript 더 간단한 개발자 사이를 이동하는 언어입니다.자바 스크립트 클래스는 함수의 한 유형입니다., 클래스는class키워드로 선언됩니다. 함수 표현식 구문을 사용하여 함수를 초기화하고 클래스 표현식 구문을 사용하여 클래스를 초기화합니다.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

우리는 우리에 액세스할 수 있는]의 객체를 사용하는Object.getPrototypeOf()방법입니다. 우리가 만든 빈 함수를 테스트하기 위해 그것을 사용합시다.

Object.getPrototypeOf(x);

Output
ƒ () { }

우리는 또한 사용하는 방법에스 클래스 우리가 만들어집니다.,

Object.getPrototypeOf(y);

Output
ƒ () { }

이 코드를 선언한function및class두 반환 기능을]. 프로토 타입을 사용하면 모든 함수는new키워드를 사용하여 생성자 인스턴스가 될 수 있습니다.

Output
x {}constructor: ƒ ()

이것은 클래스에도 적용됩니다.

Output
y {}constructor: class

이러한 프로토타입 생성자를 예로는 그렇지 않으면 비어 있지만,우리가 볼 수 있는 방법 아래에 구문,두 방법 모두를 달성하고 있는 동일한 최종 결과입니다.,

클래스 정의

에서 프로토타입 및 상속 튜토리얼에서,우리가 만든 예를 들어 주위를 기반으로 캐릭터 생성에서 텍스트 기반의 역할을 수 있습니다 함수에서 클래스로 구문을 업데이트하려면 여기에서 해당 예제를 계속 진행해 보겠습니다.

생성자 함수는 함수 자체를 참조하여this의 속성으로 할당 될 여러 매개 변수로 초기화됩니다. 식별자의 첫 글자는 규칙에 의해 대문자로 표시됩니다.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

때 우리는 이 클래스의 구문은 아래와 같이,우리는 그것은 구조적으로는 매우 비슷합니다.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

우리가 알고 있는 생성자를 기능을 의미하는 개체의 청사진에 의해 총액의 첫 글자의 이니셜라이저(선택적)에 대한 지식을 통해 구문에 있습니다. class키워드는보다 간단한 방식으로 우리 기능의 목적을 전달합니다.,

유일한 차이는 구문에서 초기화를 사용하는class키워드는 대신function및 할당성 안에constructor()방법입니다.

을 정의하는 방법

일반적인 관행으로 생성 기능을 할당하는 방법으로 직접prototype대신에는 초기화,에서 볼 수 있듯greet()아래의 방법을.

클래스를 사용하면이 구문이 단순화되며 메소드를 클래스에 직접 추가 할 수 있습니다., ES6 에 소개 된 메소드 정의 속기를 사용하여 메소드를 정의하는 것은 더욱 간결한 프로세스입니다.

행동에서 이러한 속성과 메소드를 살펴 보겠습니다. 우리는 새 인스턴스를 만들의Hero를 사용하는new키워드 할당 어떤 값이 있습니다.

const hero1 = new Hero('Varg', 1);

경우 우리는 인쇄에 대한 자세한 정보는 우리의 새로운 객체와 함께console.log(hero1)리에 대한 자세한 내용을 볼 수 있습 무슨 일이 일어나고 있는 클래스를 초기화했습니다.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

우리는 우리에서 볼 수 있는 출력constructor()및greet()기능이 적용되었을__proto__또는]hero1, 와 직접적으로 방법에는hero1개체입니다. 이것은 생성자 함수를 만들 때 분명하지만 클래스를 만드는 동안 분명하지 않습니다. 클래스는보다 간단하고 간결한 구문을 허용하지만 프로세스에서 약간의 명확성을 희생합니다.,

클래스를 확장

유리한 기능의 생성 함수와 클래스는 그들은 확장 할 수 있습으로 새로운 개체의 청사진을 기반으로의 부모이다. 이 방지 반복의 코드는 개체에 대한 비슷하지만 필요 몇 가지 추가 또는 더 특정 기능을 갖추고 있습니다.

새 생성자 함수는call()메서드를 사용하여 부모로부터 만들 수 있습니다., 아래 예에서,우리가 만드는 것이 더 특정 캐릭터 클래스라는Mage할당의 속성을Hero을 사용하여call()뿐만 아니라 추가 제공합니다.

이 시점에서,우리는 새 인스턴스를 만들 수 있습니다의Mage를 사용하여 동일한 속성을Hero뿐만 아니라 새로운 중 하나는 우리가 추가됩니다.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

보내는hero2콘솔,우리가 볼 수 있습니다 우리가 만든 새로운Mage기반으로 생성자입니다.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

와 ES6 클래스고,super키워드를 사용하는call스 가능합니다. 우리는extends를 사용하여 부모 클래스를 참조 할 것입니다.

이제 동일한 방식으로 새Mage인스턴스를 만들 수 있습니다.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

콘솔에hero2를 인쇄하고 출력을 볼 것입니다.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

출력은 정확하게 거의 동일한 것을 제외하고,클래스에서 건설]에 연결되 부모,이 경우에는Hero.

아래는 생성자 함수와 클래스의 초기화,메소드 추가 및 상속의 전체 프로세스를 나란히 비교 한 것입니다.

구문이 상당히 다르지만 기본 결과는 두 방법간에 거의 동일합니다. 클래스 우리에게 간단한 방법을 만드는 개체의 청사진,그리고 생성 기능을 설명하는 더 정확하게 무슨 일이 있습니다.

결론

이 튜토리얼에서는 JavaScript 생성자 함수와 ES6 클래스 간의 유사점과 차이점에 대해 배웠습니다. 모두 클래스고 생성자를 모방하는 객체 지향 상속 모델을 자바스크립트 프로토 타입을 기반 상속 언어입니다.,

프로토 타입 상속을 이해하는 것은 효과적인 자바 스크립트 개발자가되는 것이 가장 중요합니다. React 와 같은 인기있는 JavaScript 라이브러리는class구문을 자주 사용하므로 클래스에 익숙해지면 매우 도움이됩니다.