>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 프로토타입과 상속(Prototypes and Inheritance)_javascript 기술

자바스크립트 프로토타입과 상속(Prototypes and Inheritance)_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:54:42905검색

JavaScript 개체는 프로토타입 개체의 속성을 상속합니다. 모든 객체에는 프로토타입이 있습니다. 프로토타입의 모든 속성은 이를 프로토타입으로 사용하는 객체의 속성과 유사합니다. 간단히 말해서 모든 객체는 프로토타입에서 속성을 상속받습니다.
(각 객체는 해당 프로토타입의 속성을 상속합니다.)

객체의 프로토타입은 생성자 함수에 의해 정의됩니다. JavaScript의 모든 함수에는 프로토타입 속성이 있습니다. 이 속성은 비어 있는 상태로 시작되며 여기에 추가하는 모든 속성은 생성자가 만든 개체의 소유가 됩니다.

프로토타입 객체는 생성자와 연결됩니다. 이는 프로토타입이 메서드와 기타 상수를 배치하기에 이상적인 장소가 될 수 있음을 의미합니다. 프로토타입의 속성은 새로 생성된 객체에 복사되지 않습니다. 해당 속성은 객체의 속성과 똑같이 보입니다. 이는 프로토타입을 사용하면 동일한 유형의 여러 객체가 차지하는 메모리를 크게 줄일 수 있음을 의미합니다.

각 클래스에는 일련의 속성이 포함된 프로토타입 객체가 하나만 있습니다. 그러나 런타임에 클래스의 여러 인스턴스를 만들 수 있습니다. 그렇다면 프로토타입의 속성에 대한 읽기 또는 쓰기가 발생하면 어떻게 될까요?
속성을 읽을 때 JavaScript는 먼저 개체 자체에 이 속성이 있는지 확인하려고 시도합니다. 그렇지 않은 경우 해당 속성이 프로토타입에 존재하는지 검색합니다. 그렇다면 결과가 반환됩니다.
프로토타입의 속성을 작성할 때 여러 객체가 프로토타입을 공유하기 때문에 당연히 프로토타입에 직접 쓸 수는 없습니다. 이때 JavaScript는 실제로 개체에 동일한 이름의 속성을 생성한 다음 해당 값을 씁니다. 다음에 이 속성을 읽을 때 JavaScript는 즉시 객체의 속성에서 이를 찾아내므로 프로토타입을 볼 필요가 없습니다. 이때 "객체의 속성을 마스크로 숨기거나 프로토타입의 속성을 숨긴다"고 합니다.(그림자 또는 숨기기).

위 논의에서 볼 수 있듯이 실제로 클래스를 설계할 때 한 가지 원칙만 익히면 됩니다. 프로토타입에서는 일부 메서드만 정의하고(메서드는 일반적으로 변경되지 않음), 상수 , 상수 등 이렇게 하면 혼란이 덜해질 것입니다.
例子:

// 클래스의 생성자 메서드를 정의합니다.
//
//각 개별 Circle 개체.
함수원(x,y,r)
{
    이것.x = x;  //원 중심의 X좌표

.y =y;  // 원 중심의 Y좌표

.r =r;  // 원의 반경
}


// Create and discard an initial Circle object.
// This forces the prototype object to be created in JavaScript 1.1.
new Circle(0,0,0);


// Define a constant: a property that will be shared by
// all circle objects. Actually, we could just use Math.PI,
// but we do it this way for the sake of instruction.
Circle.prototype.pi =
3.14159;


// 원의 둘레를 계산하는 방법을 정의합니다.
// 먼저 함수를 선언한 다음 이를 프로토타입 속성에 할당합니다.
// 위에 정의된 상수의 사용에 유의하세요.
function Circle_circumference(  ) { return
2
*
이것.pi *
이것.r; }
Circle.prototype.circumference =Circle_circumference;


// 다른 방법을 정의합니다. 이번에는 함수 리터럴을 사용하여
// 함수를 정의하고 이를 프로토타입 속성에 할당합니다. 모두 한 번에.
Circle.prototype.area =
함수(  ) { return
this.pi *
이것.r *
이것.r; }


// Circle 클래스가 정의되어 있습니다.
// 이제 인스턴스를 생성하고 해당 메서드를 호출할 수 있습니다.
var c =
new Circle(0.0, 0.0, 1.0);
vara =c.area( );
var p = c .circumference( );


내장 클래스의 프로토타입

사용자 정의 클래스뿐만 아니라 문자열 및 날짜와 같은 시스템 내장 클래스도 가질 수 있습니다. 프로토타입도 있을 수 있습니다. 그리고 여기에 새로운 메서드, 속성 등을 추가할 수 있습니다.
다음 코드는 모든 String 객체에 유용한 함수를 추가합니다.

// 다음과 같은 경우 true를 반환합니다. 마지막 문자는 c
String.prototype.endsWith =입니다.
기능(c) {
 반환 (c ==
this.charAt(this.length-1))
}


그러면 다음과 같이 호출할 수 있습니다.

var message =
"안녕하세요";
message.endsWith('h') // false 반환
message.endsWith('d') // true를 반환합니다

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