JavaScript와의 간단한 상속

키 테이크 아웃

JavaScript는 프로토 타입 기반 접근 방식을 사용하여 객체 지향 언어를 만들어 프로토 타입으로 사용되는 기존 객체를 복제하여 동작을 재사용 할 수 있습니다. 이 개념은 상속을 시뮬레이션하는 데 사용될 수 있습니다 상속은 프로토 타입을 복제하는 함수를 만들어 모든 멤버와 기능을 새로운 클래스로 전송하여 JavaScript로 구현할 수 있습니다. 이를 통해 각 클래스는 부모 클래스에서 기능과 멤버를 상속받을 수있는 클래스 계층 구조를 만들 수 있습니다. JavaScript는 객체 지향 프로그래밍에 대한 고유 한 접근 방식을 가지고 있지만 C# 또는 C와 같은 언어에서 나오는 개발자가 친숙한 언어를 JavaScript로 복제하려고하면 최상의 결과를 얻을 수 없다는 것을 이해하는 것이 중요합니다. 대신, JavaScript의 독특한 철학을 수용하면 전체 힘을 발휘할 수 있습니다.

이 기사는 Microsoft의 Web Dev Tech 시리즈의 일부입니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.
• 많은 친구들이 C# 또는 C 개발자입니다. 그들은 프로젝트에서 상속을 사용하는 데 익숙하며 JavaScript를 배우거나 발견하고 싶을 때 가장 먼저 질문하는 것 중 하나는 다음과 같습니다.“그러나 어떻게 JavaScript와의 상속을 할 수 있습니까?” 실제로 JavaScript는 C# 또는 C와 다른 접근 방식을 사용하여 객체 지향 언어를 만듭니다. 프로토 타입 기반 언어입니다. 프로토 타이핑의 개념은 프로토 타입 역할을하는 기존 객체를 복제하여 동작을 재사용 할 수 있음을 의미합니다. JavaScript의 모든 객체는 객체가 사용할 수있는 기능 세트와 멤버를 정의하는 프로토 타입에서 혐의를받습니다. 수업이 없습니다. 객체. 그런 다음 모든 객체는 다른 객체의 프로토 타입으로 사용할 수 있습니다.
이 개념은 매우 유연하며이를 사용하여 유전과 같은 OOP의 일부 개념을 시뮬레이션 할 수 있습니다. 상속 구현 javaScript를 사용 하여이 계층으로 만들고 싶은 것을 시각화합시다 :
• 우선, 우리는 쉽게 classa를 만들 수 있습니다. 명백한 클래스가 없기 때문에 다음과 같은 기능을 만들어 행동 세트 (클래스…)를 정의 할 수 있습니다.
이 "클래스"는 새로운 키워드를 사용하여 인스턴스화 할 수 있습니다
• 그리고 우리의 객체를 사용하여 사용하려면 :
상당히 단순합니까? 완전한 샘플의 길이는 8 줄입니다 :

이제 클래스간에 "상속"을 만드는 도구를 추가해 봅시다. 이 도구는 단 하나의 일을해야합니다. 프로토 타입을 복제하십시오 :

이것은 마법이 일어나는 곳입니다! 프로토 타입을 복제함으로써 우리는 모든 멤버와 기능을 새로운 클래스로 옮깁니다. 따라서 첫 번째 클래스가 될 두 번째 클래스를 추가하려면이 코드를 사용해야합니다.

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

그런 다음 ClassB가 Classa에서 인쇄 함수를 상속 받았기 때문에 다음 코드가 작동합니다.

및 다음 출력을 생성합니다

우리는 클래스의 인쇄 함수를 무시할 수도 있습니다

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

이 경우 생성 된 출력은 다음과 같습니다.

여기서 트릭은 기본 인쇄 기능을 얻기 위해 Call Classa.prototype에 대한 것입니다. 그런 다음 통화 기능 덕분에 현재 객체 (this)의 기본 함수를 호출 할 수 있습니다. Classc 생성은 이제 분명합니다

및 출력은 다음과 같습니다

a<span>.print();</span>

javaScript 로 더 많은 실습 는 당신을 놀라게 할지도 모르지만 Microsoft는 많은 오픈 소스 JavaScript 주제에 대한 무료 학습을 가지고 있으며 Project Spartan이 다가 오면서 더 많은 것을 만들어내는 임무를 수행하고 있습니다. 나만의 것을 확인하십시오 :

webgl 3d, html5 및 babylon.js 소개 asp.net 및 angularjs 로 단일 페이지 응용 프로그램 구축 html

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

의 최첨단 그래픽

또는 우리 팀의 학습 시리즈 :

실용적인 성능 팁 HTML/JavaScript를 더 빠르게 만들 수 있습니다 (반응 형 디자인에서 캐주얼 게임, 성능 최적화, 성능 최적화에 이르기까지 7 부 시리즈) 최신 웹 플랫폼 JumpStart (HTML, CSS 및 JS의 기본 사항) HTML 및 JavaScript JumpStart를 사용하여 범용 Windows 앱 개발

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

Mac, Linux 또는 Windows를위한 Visual Studio Community, Azure Trial 및 Cross-Browser 테스트 도구 등 일부 무료 도구 및 일부 무료 도구. 그리고 일부 철학…

결론을 내리기 위해, 나는 JavaScript가 c# 또는 c가 아니라고 명확하게 언급하고 싶습니다. 그것은 그 자체의 철학을 가지고 있습니다. C 또는 C# 개발자이고 JavaScript의 전체 힘을 수용하고 싶다면, 내가 줄 수있는 가장 좋은 팁은 다음과 같습니다. 언어를 JavaScript로 복제하려고하지 마십시오. 최상의 또는 최악의 언어는 없습니다. 단지 다른 철학!

이 기사는 Microsoft의 Web Dev Tech 시리즈의 일부입니다. 프로젝트 스파르타와 새로운 렌더링 엔진을 여러분과 공유하게되어 기쁩니다. Modern.ie의 Mac, iOS, Android 또는 Windows 장치에서 무료 가상 머신을 받거나 원격으로 테스트하십시오. JavaScript 상속에 대한 자주 묻는 질문 (FAQ) JavaScript에서 고전적인 상속과 프로토 타입 상속의 차이점은 무엇입니까?

JavaScript에는 두 가지 유형의 상속이 있습니다 : 클래식과 프로토 타입. 생성자 상속이라고도하는 고전적인 상속은 클래스 또는 생성자 함수에서 새로운 객체가 생성되는 곳입니다. 이것은 상속이 Java 또는 C와 같은 언어로 작동하는 방식과 유사합니다. 반면에 프로토 타입 상속은 JavaScript에 고유합니다. 기존 객체에서 속성을 상속하는 새 개체를 작성하는 것이 포함됩니다. 이것은 Object.create () 메소드를 사용하거나 새 개체의 프로토 타입을 기존 객체로 설정하여 수행됩니다. 둘의 주요 차이점은 클래식 상속이 클래스와 생성자 함수를 사용하는 반면 프로토 타입 상속은 객체를 사용한다는 것입니다.

프로토 타입 체인이 JavaScript 상속에서 어떻게 작동합니까?

프로토 타입 체인은 어떻게 중요합니다. JavaScript 상속의 개념. 객체에서 속성 또는 메소드에 액세스 할 때 JavaScript는 먼저 해당 객체에 해당 속성 또는 방법이 있는지 확인합니다. 그렇지 않은 경우 JavaScript가 객체의 프로토 타입을 확인합니다. 이 프로세스는 속성 또는 방법이 발견되거나 체인의 끝에 도달 할 때까지 프로토 타입 체인을 계속합니다 (일반적으로 내장 객체 프로토 타입). 이 메커니즘은 객체가 프로토 타입에서 속성과 메소드를 상속하여 JavaScript에서 코드 재사용 및 상속을 가능하게합니다.

JavaScript 상속에서 'Super'의 개념을 설명 할 수 있습니까? JavaScript의 키워드는 클래스의 맥락에서 객체의 부모의 기능을 호출하는 데 사용됩니다. 다시 말해, 'Super'를 사용하면 객체의 상위 클래스에서 기능에 액세스하고 호출 할 수 있으므로 상위 클래스의 방법을 재사용 할 수 있습니다. 이것은 부모 클래스의 생성자를 호출 할 수있는 서브 클래스의 생성자에 특히 유용합니다.

JavaScript에서 상속 된 메소드를 어떻게 재정의 할 수 있습니까?

JavaScript에서 상속 된 메소드를 재정의하는 방법 간단합니다. 어린이 수업이나 대상에서 동일한 이름의 메소드를 정의합니다. 그 방법이 아동 클래스 또는 객체의 인스턴스에서 호출되면, 자식에 정의 된 버전은 부모의 것 대신 사용됩니다. 이를 통해 상속 된 방법의 동작을 사용자 정의하거나 확장 할 수 있습니다.

JavaScript 상속에서 '생성자'의 역할은 무엇입니까?

JavaScript의 '생성자'는 특별한 방법입니다. 객체를 작성하고 초기화하는 데 사용됩니다. 상속의 맥락에서, 부모 클래스의 생성자 함수는 종종 '슈퍼'키워드를 사용하여 아동 클래스의 생성자에서 호출됩니다. 이를 통해 어린이 클래스는 부모 클래스의 속성과 방법을 물려받을 수 있습니다.

상속은 JavaScript ES6 클래스와 어떻게 작동합니까?

ES6의 도입과 함께 JavaScript는 이제 생성자를 정의하고 상속 작업을위한보다 전통적인 클래스 기반 구문을 가지고 있습니다. '클래스'키워드는 클래스를 정의하는 데 사용되며 '확장'키워드는 부모 클래스에서 상속하는 하위 클래스를 만드는 데 사용됩니다. 'Super'키워드는 서브 클래스의 생성자에서 부모 클래스의 생성자를 호출하는 데 사용됩니다.

JavaScript에서 여러 상속을 설명 할 수 있습니까?

JavaScript는 기본적으로 다중 상속을 지원하지 않습니다. 물체 나 클래스가 한 명 이상의 부모로부터 상속 될 수있는 곳. 그러나 믹스 인을 사용하여 다중 상속을 시뮬레이션 할 수 있습니다. Mixin은 객체 또는 클래스가 여러 소스에서 속성과 방법을 "혼합"할 수있는 기술입니다. 이것은 여러 객체 또는 클래스의 기능을 하나로 결합 할 수 있습니다.

JavaScript의 '상속'과 '구성'의 차이점은 무엇입니까?

상속과 구성은 재사용하는 두 가지 방법입니다. JavaScript의 코드. 상속은 객체 또는 클래스가 부모 객체 또는 클래스에서 속성과 메소드를 상속하는 곳입니다. 반면에 구성은 객체가 다른 객체로 구성되는 곳이며 기능은 이러한 구성 요소 객체에 위임됩니다. 상속은 "IS-A"관계에 관한 것이지만 (서브 클래스는 부모 클래스의 유형) 구성은 "has-a"관계에 관한 것입니다 (객체는 다른 객체가 있습니다). JavaScript 함수와 함께 상속을 사용합니까?

JavaScript의 함수는 객체이며 상속을 구현하는 데 사용할 수 있습니다. 이것은 새 개체를 만드는 데 사용되는 생성자 함수를 정의하여 수행됩니다. 생성자 함수의 '프로토 타입'속성은 함수의 모든 인스턴스가 상속 될 객체입니다. 이 프로토 타입 객체에 속성과 방법을 추가함으로써 함수의 모든 인스턴스에 이용할 수있게 할 수 있습니다.

JavaScript 상속의 일반적인 함정은 무엇입니까?

JavaScript 상속의 하나의 일반적인 함정은 다음과 같습니다. 프로토 타입 체인과 생성자 체인 사이의 혼란. 메소드가 객체에서 호출되면 JavaScript는 생성자 체인이 아닌 프로토 타입 체인을 찾습니다. 또 다른 함정은 아동 생성자의 부모 생성자를 호출하는 것을 잊어 버린 것으로 예상치 못한 결과로 이어질 수 있습니다. 마지막으로 JavaScript는 프로토 타입 상속을 사용하기 때문에 인스턴스를 수정하려고 할 때 우연히 프로토 타입을 수정할 수 있습니다.

위 내용은 JavaScript와의 간단한 상속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!