웹 프론트엔드 JS 튜토리얼 자바스크립트 프로토타입 체인 상속 활용 분석 사례_자바스크립트 능력

자바스크립트 프로토타입 체인 상속 활용 분석 사례_자바스크립트 능력

May 16, 2016 pm 04:17 PM
javascript 프로토타입 체인 용법 상속하다

이 기사에서는 JavaScript 프로토타입 체인 상속의 사용법을 예제와 함께 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.
function Shape(){
this.name = '모양'
this.toString = 함수(){
이 이름을 반환하세요.
}
}

함수 TwoDShape(){
this.name = '2D 도형'
}
함수 삼각형(변, 높이){
this.name = '삼각형'
this.side = 쪽
this.높이 = 높이
this.getArea = 함수(){
this.side*this.height/2를 반환합니다.
}; }

/* 상속 */
TwoDShape.prototype = 새 모양()
Triangle.prototype = new TwoDShape();
객체의 프로토타입 속성을 완전히 다시 작성하면 때로는 객체의 생성자 속성에 부정적인 영향을 미칠 수 있습니다.

따라서 관련 상속 관계 설정을 완료한 후에는 이에 따라 이러한 객체의 const 속성을 재설정하는 것이 매우 좋은 습관입니다. 아래와 같이:

코드 복사 코드는 다음과 같습니다.
TwoDShape.prototype.constructor = TwoDShape
Triangle.prototype.constructor = 삼각형;
재작성:


코드 복사 코드는 다음과 같습니다.
function Shape(){}

Shape.prototype.name = '모양'
Shape.prototype.toString = function(){
this.name을 반환하세요.
}

함수 TwoDShape(){}

TwoDShape.prototype = 새 모양()
TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 모양'
;
함수 삼각형(변, 높이){
this.side = 쪽
this.높이 = 높이
}

Triangle.prototype = 새로운 TwoDShape
Triangle.prototype.constructor = 삼각형

Triangle.prototype.name = '삼각형'
; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }

다시 작성(값 대신 참조로 전달):


코드 복사 코드는 다음과 같습니다.function Shape(){}
Shape.prototype.name = '모양'
Shape.prototype.toString = function(){
this.name을 반환하세요.
}

함수 TwoDShape(){}

TwoDShape.prototype = Shape.prototype
TwoDShape.prototype.constructor = TwoDShape

TwoDShape.prototype.name = '2D 모양'
;
함수 삼각형(변, 높이){
this.side = 쪽
this.높이 = 높이
}

Triangle.prototype = TwoDShape.prototype
Triangle.prototype.constructor = 삼각형

Triangle.prototype.name = '삼각형'
; Triangle.prototype.getArea = function(){
return this.side*this.height/2; }


이 방법은 효율성을 향상시키지만 값이 아닌 참조로 전달되므로 "상위 개체"의 이름 값에 영향을 미치는 부작용이 있습니다.
하위 개체와 상위 개체는 동일한 개체를 가리킵니다. 따라서 자식 개체가 프로토타입을 수정하면 부모 개체도 즉시 변경됩니다.

다시 작성(임시 생성자 사용):


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

C++ 함수 상속에 대한 자세한 설명: 상속에서 '기본 클래스 포인터'와 '파생 클래스 포인터'를 사용하는 방법은 무엇입니까? C++ 함수 상속에 대한 자세한 설명: 상속에서 '기본 클래스 포인터'와 '파생 클래스 포인터'를 사용하는 방법은 무엇입니까? May 01, 2024 pm 10:27 PM

함수 상속에서는 "기본 클래스 포인터" 및 "파생 클래스 포인터"를 사용하여 상속 메커니즘을 이해합니다. 기본 클래스 포인터가 파생 클래스 개체를 가리키는 경우 상향 변환이 수행되고 기본 클래스 멤버에만 액세스됩니다. 파생 클래스 포인터가 기본 클래스 개체를 가리키는 경우 하향 캐스팅이 수행되므로(안전하지 않음) 주의해서 사용해야 합니다.

WPSdateif 함수 사용 WPSdateif 함수 사용 Feb 20, 2024 pm 10:27 PM

WPS는 일반적으로 사용되는 사무용 소프트웨어 제품군이며 WPS 테이블 기능은 데이터 처리 및 계산에 널리 사용됩니다. WPS 테이블에는 두 날짜 사이의 시차를 계산하는 데 사용되는 매우 유용한 함수인 DATEDIF 함수가 있습니다. DATEDIF 함수는 영어 단어 DateDifference의 약어입니다. 구문은 다음과 같습니다. DATEDIF(start_date,end_date,unit) 여기서 start_date는 시작 날짜를 나타냅니다.

상속과 다형성은 C++의 클래스 결합에 어떤 영향을 미치나요? 상속과 다형성은 C++의 클래스 결합에 어떤 영향을 미치나요? Jun 05, 2024 pm 02:33 PM

상속과 다형성은 클래스 결합에 영향을 줍니다. 상속은 파생 클래스가 기본 클래스에 종속되기 때문에 결합을 증가시킵니다. 다형성은 객체가 가상 함수와 기본 클래스 포인터를 통해 일관된 방식으로 메시지에 응답할 수 있기 때문에 결합을 줄입니다. 모범 사례에는 상속을 적게 사용하고, 공용 인터페이스를 정의하고, 기본 클래스에 데이터 멤버를 추가하지 않고, 종속성 주입을 통해 클래스를 분리하는 것이 포함됩니다. 다형성과 종속성 주입을 사용하여 은행 계좌 애플리케이션에서 결합을 줄이는 방법을 보여주는 실제 예입니다.

MySQL ISNULL 함수에 대한 자세한 설명 및 사용법 소개 MySQL ISNULL 함수에 대한 자세한 설명 및 사용법 소개 Mar 01, 2024 pm 05:24 PM

MySQL의 ISNULL() 함수는 지정된 표현식이나 열이 NULL인지 여부를 확인하는 데 사용되는 함수입니다. 부울 값을 반환하며, 표현식이 NULL이면 1, 그렇지 않으면 0을 반환합니다. ISNULL() 함수는 SELECT 문이나 WHERE 절의 조건부 판단에 사용할 수 있습니다. 1. ISNULL() 함수의 기본 구문: ISNULL(expression) 여기서 표현식은 NULL인지 또는 NULL인지를 결정하는 표현식입니다.

C++ 함수 상속에 대한 자세한 설명: 상속 오류를 디버깅하는 방법은 무엇입니까? C++ 함수 상속에 대한 자세한 설명: 상속 오류를 디버깅하는 방법은 무엇입니까? May 02, 2024 am 09:54 AM

상속 오류 디버깅 팁: 올바른 상속 관계를 확인하세요. 디버거를 사용하여 코드를 단계별로 실행하고 변수 값을 검사합니다. 가상 수정자를 올바르게 사용했는지 확인하세요. 숨겨진 상속으로 인해 발생하는 상속 다이아몬드 문제를 살펴봅니다. 추상 클래스에서 구현되지 않은 순수 가상 함수를 확인하세요.

CSS 변환을 사용하여 요소 변환 CSS 변환을 사용하여 요소 변환 Feb 24, 2024 am 10:09 AM

CSS에서 Transform의 사용 CSS의 Transform 속성은 HTML 요소의 이동, 회전, 크기 조정 및 기울이기와 같은 작업을 수행할 수 있는 매우 강력한 도구입니다. 요소의 모양을 극적으로 바꾸고 웹 페이지를 더욱 창의적이고 역동적으로 만들 수 있습니다. 이 기사에서는 Transform의 다양한 용도를 자세히 소개하고 구체적인 코드 예제를 제공합니다. 1. 이동(Translate) 이동이란 요소를 x축, y축을 따라 지정된 거리만큼 이동하는 것을 말합니다. 구문은 다음과 같습니다:

C++ 함수 상속 설명: 언제 상속을 사용하지 않아야 합니까? C++ 함수 상속 설명: 언제 상속을 사용하지 않아야 합니까? May 04, 2024 pm 12:18 PM

다음 상황에서는 C++ 함수 상속을 사용하면 안 됩니다. 파생 클래스에 다른 구현이 필요한 경우 다른 구현을 사용하는 새 함수를 만들어야 합니다. 파생 클래스에 함수가 필요하지 않은 경우 빈 클래스로 선언하거나 구현되지 않은 전용 기본 클래스 멤버 함수를 사용하여 함수 상속을 비활성화해야 합니다. 함수에 상속이 필요하지 않은 경우 코드 재사용을 위해 다른 메커니즘(예: 템플릿)을 사용해야 합니다.

C++ 함수 상속에 대한 자세한 설명: 상속에서 'is-a' 및 'has-a' 관계를 이해하는 방법은 무엇입니까? C++ 함수 상속에 대한 자세한 설명: 상속에서 'is-a' 및 'has-a' 관계를 이해하는 방법은 무엇입니까? May 02, 2024 am 08:18 AM

C++ 함수 상속에 대한 자세한 설명: "is-a"와 "has-a" 사이의 관계를 마스터하세요. 함수 상속이란 무엇인가요? 함수 상속은 파생 클래스에 정의된 메서드를 기본 클래스에 정의된 메서드와 연결하는 C++의 기술입니다. 파생 클래스가 기본 클래스의 메서드에 액세스하고 재정의할 수 있도록 하여 기본 클래스의 기능을 확장합니다. "is-a" 및 "has-a" 관계 함수 상속에서 "is-a" 관계는 파생 클래스가 기본 클래스의 하위 유형, 즉 파생 클래스가 기본 클래스의 특성과 동작을 "상속"함을 의미합니다. 기본 클래스. "has-a" 관계는 파생 클래스에 기본 클래스 개체에 대한 참조 또는 포인터가 포함되어 있음을 의미합니다. 즉, 파생 클래스가 기본 클래스 개체를 "소유"합니다. 구문다음은 함수 상속을 구현하는 방법에 대한 구문입니다. classDerivedClass:pu

See all articles