> 웹 프론트엔드 > JS 튜토리얼 > Javascript Object.extend_js 객체 지향

Javascript Object.extend_js 객체 지향

WBOY
풀어 주다: 2016-05-16 18:27:14
원래의
1128명이 탐색했습니다.

클래스이기 때문에 추상 클래스, 구체적 클래스, 클래스 상속이 있으며 동시에 클래스의 멤버는 인스턴스 멤버와 정적 멤버를 가질 수 있습니다. 프로토타입이 이를 어떻게 수행하는지 살펴보겠습니다.
먼저 프로토타입에 있는 다음 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var Abstract = new Object();
Object.extend = function(destination, source) {
for (소스의 속성) {
destination[property] = source[property];
}
반환 대상;
}
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]); }

첫 번째는 Abstract 개체를 선언합니다. Object는 실제로 멤버가 없으므로 빈 클래스이므로 Abstract에는 멤버가 없습니다. 지금은 이것에 대해 이야기하지 않겠습니다. 이것이 추상 클래스의 기초라는 것을 나중에 알게 될 것입니다. 먼저 다음 구문을 설명합니다.
function.member=function(){}
이 경우 함수는 일반적으로 함수에 정적 멤버 멤버를 추가하는 것입니다. 등호 뒤에 있습니다. 예를 들어, 위의 두 번째 코드인 Object.extend=...는 Object 클래스에 확장된 정적 메서드를 추가합니다. 좋습니다. 클래스에 대한 정적 멤버를 정의하는 방법을 알고 있다면 인스턴스 멤버를 정의하는 방법을 알고 싶을 것입니다. 클래스 이름과 멤버 이름 사이에 프로토타입을 추가하면 됩니다.
function.prototype.member= function() {}
프로토타입은 다음과 같이 사용할 수 있을 뿐만 아니라:

코드 복사 코드는 다음과 같습니다. 다음:
function.prototype={
member1:function(){……},
member2:"abc",
member3:function(){……}
}


인스턴스 멤버 정의를 구현합니다. 그런데 프로토타입이 무슨 뜻인가요? 첫 번째 글에서 말했듯이 객체를 표현하기 위해 {}로 직접 묶습니다. 예를 들어 Prototype과 Class는 이렇게 정의된 전역 객체입니다. 다음 사용법을 보면 프로토타입 뒤에 {} 구조가 옵니다. 이것도 객체인가요? 네 맞습니다. 프로토타입은 실제로 객체입니다! JavaScript에서는 다음 구문을 사용하여 객체에 멤버를 임의로 추가할 수 있습니다.
object.member=function(){...}
이런 방식으로 정의되는 한 객체는 즉시 회원이 있습니다. JavaScript는 정말 마술적입니다!
이제 우리는 프로토타입이 객체이고 함수가 함수 또는 클래스라는 것을 알았습니다. 그러면 프로토타입을 모든 클래스(함수)가 내부적으로 보유하는 정적 멤버로 생각할 수 있습니다. 그 기능은 이 클래스의 모든 멤버 포인터를 저장하는 것이지만 이러한 멤버는 프로토타입일 뿐이며 초기화되지 않았으며 이는 프로토타입의 원래 의미와도 일치합니다. 프로토타입 객체를 통해 언제든지 멤버를 확장할 수 있습니다. 클래스가 새로 생성되면 프로토타입 멤버가 초기화된 다음 인스턴스화된 객체에 할당됩니다.
위 코드의 세 번째 부분인 Object.prototype.extend=...는 인스턴스 메소드 확장을 Object에 추가합니다. 인스턴스 메소드에서 이 클래스에 의해 인스턴스화된 객체 자체를 가리키는 이 포인터를 참조할 수 있습니다. 물론 이 개체에는 확장 멤버가 있습니다.
계속하기 전에 다음 두 문을 이해해 보겠습니다.
for(var p in object){}
method.apply(object,arguments)
첫 번째 문장: 모든 변수 멤버 나열, 함수라면 모두 정적 멤버이고, 객체라면 모두 인스턴스 멤버이고 p의 유형은 문자열입니다. 회원의 이름을 나타냅니다. variabel.member를 사용하여 멤버를 참조할 수 있을 뿐만 아니라 variabel["member"]도 사용할 수 있습니다. 차례로 할당도 마찬가지입니다. 이는 변수의 멤버를 열거하는 데 큰 편리함을 제공합니다.
두 번째 문장: 실행할 객체에 메소드 메소드를 적용하고, 매개변수는 인수 배열입니다. 참고: 메소드는 객체의 멤버가 아닙니다. 그러나 이 명령문의 실행은 object.method(arguments)를 의미한다고 생각할 수 있습니다. 이것은 나중에 자주 사용하게 될 매우 중요한 방법이며 점차 익숙해지게 될 것입니다.
계속해서 확장을 진행해 보겠습니다. 이는 매우 중요한 메서드이며 Object 클래스의 인스턴스 멤버라는 것을 알 수 있습니다. 살펴보겠습니다. 대상과 소스라는 두 개의 매개변수를 받습니다. 대상과 소스가 모두 클래스인 경우 해당 기능은 소스 클래스의 모든 정적 멤버를 대상 클래스에 복사하는 것입니다. 복사됩니다. 이때, 대상에 이미 같은 이름의 멤버가 있는 경우 해당 멤버를 덮어쓰게 됩니다. 즉, 대상에 소스의 모든 구성원이 있고 함수는 이 대상을 반환합니다. Object의 인스턴스 멤버로 확장을 살펴보겠습니다.
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object])
}
Start 조금 어지럽지만 걱정하지 마세요. 적용 구문은 방금 설명했습니다. 호출자는 메서드이고 Object.extend는 여기에 적용됩니다. 예를 들어 obj라고 가정하면 다음 대괄호는 this와 object라는 두 멤버를 포함하는 배열입니다. 이 배열은 실제로 Object 정적 멤버 확장의 인수 매개변수입니다. 그러면 이 명령문은
obj.extend(this, object)
이것은 설명되지 않고 그 자체를 나타냅니다. 객체란 무엇인가? 매개변수는 인스턴스 메서드 확장에 의해 전달되는 매개변수이므로 혼동하지 마세요. 연장은 어떻습니까? obj는 확장 인스턴스 멤버를 정의하지 않지만 적용을 통해 Object의 정적 멤버 확장을 사용할 수 있습니다. 확장의 함수 본문을 살펴보겠습니다.
Object.extend = function(destination, source) {
for (소스의 속성) {
destination[property] = source[property];
}
return Destination;
}
obj도 객체이므로 객체도 객체입니다. 즉, 대상과 소스는 모두 객체이므로 함수의 기능은 obj가 객체의 모든 구성원을 갖도록 만드는 것입니다. 그리고 obj를 반환합니다. 약간 어색하게 들리지만 논리는 매우 간단합니다. obj가 객체에서 "상속"되도록 하세요! 아주 좋습니다. 우리는 상속을 보았지만 분명히 객체 상속에 대해 물을 것입니다. 상속에 대해 이야기할 때 클래스 상속에 대해 이야기한다는 말을 처음 들었습니다. 맞습니다. 우리는 아직 실제 클래스 상속을 보지 못했지만 가까이 다가왔습니다. 클래스에는 프로토타입만 있고 프로토타입은 객체가 아닌가요?
생각해보면 클래스의 상속 구문은 매우 간단한 것 같습니다.
b.prototype.extend(a.prototype)
b가 a를 상속하도록 합니다.
그러나 진실은 그렇게 간단하지 않습니다. 프로토타입은 메서드 프로토타입 포인터를 저장하고 확장 메서드는 초기화되지 않아 사용할 수 없습니다! 확장을 사용하려면 개체를 인스턴스화해야 합니다. 프로토타입이 어떻게 수행되는지 살펴보겠습니다.
b.prototype=(new a()).extend(b.prototype)
매우 영리한 방법입니다! 함수가 실제로 변수라는 것을 충분히 설명합니다. 먼저 a 개체를 인스턴스화한 다음 이를 기반으로 확장을 호출하고 b.prototype의 모든 멤버를 a 개체에 덮어쓴 다음 a 개체를 b.prototype에 할당합니다.a로부터 상속받은 b의 작업을 완료했습니다. 실제 사용 시 일반적인 사용법은 다음과 같습니다.
b.prototype=(new a()).extend({});
b는 a에서 상속되기 때문에 b는 일반적으로 클래스 전에 정의되지 않으므로 클래스 멤버는 실제로 다음 {}에서 정의되어야 합니다. 물론 먼저 정의한 뒤 상속할 수도 있지만, 전통적인 개념과는 다르다.
그래, 오늘 이 글을 쓰느라 너무 지쳤는데, 이 글을 읽는 분들도 그럴 것 같아요, 하하. 이제 프로토타입 클래스 개발 프레임워크를 기본적으로 이해했으며 몇 가지 고급 애플리케이션을 다음 시간에 살펴보겠습니다. :)
코드 복사 코드 다음과 같습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿