> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 객체지향 경험 [요약]_javascript 스킬

자바스크립트 객체지향 경험 [요약]_javascript 스킬

WBOY
풀어 주다: 2016-05-16 18:58:55
원래의
865명이 탐색했습니다.

JavaScript의 객체 지향 설계에 대해 이야기하는 것은 다소 무리가 있습니다. 결국 JavaScript 언어 자체는 고급 언어만큼 엄격하지 않습니다. 이 글을 읽기 전에, C, Java, C# 등과 같은 고급 언어를 이해하고, 객체지향 프로그래밍에 대한 기본 지식을 갖추시기를 바랍니다.
1. 클래스 정의:
function ClassName(){
}
클래스의 정의 형식이 함수의 정의 형식과 동일하다는 것을 알 수 있습니다.
사실 함수와 클래스는 사용될 때만 구분할 수 있습니다. 예를 들어 페이지에서 별도로 사용합니다:



2. >function ClassName( ){
//공용 변수 정의
this.property1=0;
//공용 메서드 정의
this.method1=function(){
//이것을 확인합니다. .a에 값이 할당됨
if(this.a != undefine)
alert(this.a)
}

//다른 메소드 정의 형식
this.method3; =funcA;

//비공개 멤버 정의
var pram1=1
var method2=function(){
alert(''); 🎜>// funcA는 메소드 method3의 처리 함수입니다.
function funcA(){
alert('')
}
위 코드를 천천히 설명하겠습니다.
이 클래스의 멤버이며 모두 공개됩니다.
예를 들어 property1은 클래스의 속성이고 method1은 클래스의 메서드입니다.
클래스의 멤버는 var로 정의할 필요가 없으며 이 접두사가 없는 멤버는 전용 변수입니다.
예: pram1은 프라이빗 변수이고, method2는 프라이빗 메서드입니다.
클래스의 속성은 클래스에서 정의할 필요가 없으며 초기화할 필요가 없는 속성은 정의할 필요가 없습니다.
예: method1에서 a 속성을 출력하려면 객체를 생성할 때 전체 클래스에 정의된 속성이 없습니다.
var obj=new ClassName()
obj.a="hello javascript";
obj.method1()
this.method=function()을 통해 클래스의 메소드를 정의할 수 있습니다. {}, 예를 들어 method1 메소드;
는 this.method=funcName을 통해 정의할 수도 있으며, 메소드는

과 같은 특정 함수에 의해 처리되도록 지정됩니다. :
function classA( ){
this.property1='hello';
this.method1=function(){
alert(this.property1)
}
}

function classB (){
}
//classA 상속
classB.prototype=new classA()

//classB에 PI 특성 추가
classB; .prototype.PI=3.1415926;
//classB에 showPI 메소드 추가
classB.prototype.showPI=function(){
alert(this.PI)
}
프로토타입 객체에 classA의 인스턴스를 프로토타입 객체에 추가하면 classB가 classA의 모든 멤버를 상속하게 됩니다.
예: classB.prototype=new classA()
동시에 추가할 수도 있습니다. 프로토타입을 통해 클래스 외부의 새 멤버(이것은 언어에서 사용할 수 없는 또 다른 고급 기능입니다)
예: classB.prototype.PI 및 classB.prototype.showPI

4. 클래스 메소드:
클래스 메소드의 오버로딩은 클래스의 생성자에서 자주 사용됩니다. 예를 들어 클래스에 이름은 같지만 매개변수나 매개변수 유형이 다른 두 개의 메소드가 있습니다. JavaScript는 공식적으로 클래스 메소드 오버로드를 지원하지 않습니다. 인수 속성을 통해 클래스 메소드를 오버로드할 수 있습니다:
function classA(){
//Get the number ofparameter
// this.arguments.length는 다음과 같습니다. 잘못된
var num=classA.arguments.length;

this.method1=function(){
if(num==0){
alert
}
if(num==1){
alert(1);
}
}
}
클래스 또는 함수 이름의 인수 속성이 반환됩니다. 배열에는 모든 매개변수가 포함됩니다.
예: classA.arguments.length는 매개변수 수를 얻을 수 있고, classA.arguments[0]는 첫 번째 매개변수의 값을 가져옵니다.
필요에 따라 매개변수 수 또는 매개변수 값을 가져와서 동일한 함수 또는 클래스에는 다음과 같은 다른 함수가 있습니다.
var obj= new classA();
obj.method1();//outputs 0
var obj1= new classA(5 ; >function A (){
this.a=1;
this.b=2;
this.add=function(){
return this.a
}
}
//객체 정의
var obj=new A()
//클래스 속성 할당
obj.b=6; /Call 클래스 메소드
var sum=obj.add();

또 다른 정의 메소드:
var obj={
a:1,
b: 2.
add:function(){
return this.a this.b;
}
}

이 메소드로 정의된 객체에도 정의된 클래스 구조가 있습니다. 한 번만 사용됩니다
속성과 메소드를 정의할 때는 this 키워드를 사용할 필요가 없고 ":" 바로 뒤에 값을 지정하면 됩니다.
단, 메소드에서 속성을 사용할 때는 this 키워드를 사용해야 합니다. 🎜>
이 글은 제 개인적인 경험과 이해일 뿐입니다. 제가 쓴 내용은 일부 책에 쓰여진 내용과 조금 다를 수 있으니 읽어보시면 금방 이해되실 거라 믿습니다. 이 기사는 시작점일 뿐이며 특정 프로젝트 요구 사항을 자세히 다루어야 합니다. 관련된 모든 예제는 직접 디버깅하고 수정했습니다. 오류가 있으면 수정해 주세요.

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