>  기사  >  웹 프론트엔드  >  Prototype.js 학습_프로토타입 과 유사함

Prototype.js 학습_프로토타입 과 유사함

WBOY
WBOY원래의
2016-05-16 19:12:34956검색

성공적인 JavaScript 오픈소스 프레임워크인 Prototype.js는 많은 유용한 기능을 캡슐화하고 있습니다. 공식 문서에는 아무것도 제공되지 않지만 Google에서 검색해 보니 관련 문서가 많이 공개되었습니다. 나는 그것을 사용하는 방법을 배우면서 몇 가지 질문을 하게 되었는데, 친숙한 친구들이 나에게 더 많은 조언을 해주길 바란다. 나는 프로토타입을 배울 때 이러한 점들에 주의를 기울인다. ^_^
1. 클래스 생성
프로토타입.js가 캡슐화되어 있어 매우 간단합니다.

var Person=Class.create();

이렇게 하면 초기화 메소드 구현을 제공해야 하는 Person 클래스가 생성됩니다.

Person.prototype={
              초기화: 기능(){
                                                                                                                                                                  , 매개변수화하여 사용자 정의할 수 있습니다.
이렇게 클래스를 정의하고 나면 함수를 통해 클래스를 정의하는 JavaScript의 원래 방식과 확실히 다르다는 것을 알 수 있습니다. 이 경우 Class.create를 사용하여 클래스를 정의할 수 있습니다. 곧장.
클래스에는 일반적으로 정적 멤버(특성상 정적)와 인스턴스 멤버(호출되기 전에 인스턴스화해야 함)의 정의도 포함됩니다.
이는 JavaScript에서도 매우 쉽습니다.
정적 멤버:

var Person={
name:'person',
getName:function(){return 'person' }
        };
위의 Person.getName은 직접 호출할 수 있지만, eat 메소드는 var person=new Person();person.eat();을 통해 호출해야 합니다.
2. 클래스 상속
클래스 상속은 실제로 JavaScript 자체에서 지원되지만 프로토타입은 다른 방법을 제공합니다.
javascript에서 지원하는 구현에 따르면:

var Student=Class.create();
Student.prototype=new Person();

이런 식으로 Student 상속은 사람에게.
이는 프로토타입을 사용하여 달성할 수 있습니다:

var Student=Class.create();
Object.extend(Student.prototype,Person.prototype)
추가할 때 하위 클래스가 필요합니다. 메서드를 사용하려면
Student.prototype.study=function(){};
또는
Object.extend(Student.prototype,{
Study:function(){}
}을 사용할 수 있습니다. );

3. 이벤트 메커니즘(클래스 메서드 실행 모니터링 및 관찰)
이벤트 메커니즘으로서 주로 이벤트 정의를 제공해야 합니다. 이벤트 모니터링 및 이벤트 관찰.
JavaScript에서 이벤트는 on으로 시작해야 합니다. 즉, 이벤트는 onclick과 같은 이름을 지정해야 합니다.
위의 Student에 다음과 같은 외부 이벤트를 추가합니다.

Student. 프로토타입.study=function(){
This.onstudy();
}
Student.prototype.onstudy=function(){}
이 온스터디는 예를 들어 해당 인스턴스에 의해 구현됩니다. 예제에서는 다음 메서드를 사용합니다.
function StudyThis(){
Alert("study this");
}
var Student=new Student()
Student.onstudy=studyThis() ;
우리는 일반적으로 프로토타입에서 제공하는 바인딩AsEventListener 및 Observe를 기반으로 다음을 시도했습니다.
study.onstudy=watchStudy.bindAsEventListener(this)
function watchStudy(event);
Alert("watch Study")
}

이벤트 메커니즘에 따라 스터디를 실행할 때 스터디를 보고 스터디를 시청하라는 두 가지 프롬프트가 표시되어야 합니다. 실행 중 나만 시계 연구 프롬프트를 볼 수 있는데, 왜 그럴까요? 리스너 개념에 따르면 원래 메소드를 덮어쓰면 안 되는데, 프로토타입.js의 소스코드를 살펴보니 위의 작성 방법에 따라 원래 메소드가 덮어쓰여진다는 것을 알 수 있었습니다.
Observe는 다음을 시도했습니다.
Event.observe(study,'study',watchStudy,false)
관찰 메커니즘에 따르면 스터디를 실행할 때 두 개의 프롬프트가 표시되어야 하지만 최종 실행 후에는 라인은 전혀 효과가 없었습니다.
왜 그럴까요?

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