Javascript 객체 지향 프로그래밍_js 객체 지향에 대한 간략한 토론

JS에서 객체 지향 디자인 아이디어를 완전히 사용하면 코드 재사용이 크게 향상되고, 모듈 간의 결합이 줄어들며, 더 나은 논리적 계층화 및 병렬 개발이 가능해집니다. 아래에서는 몇 단계를 거쳐 제가 이해한 내용을 간략하게 설명하겠습니다.

1. 데이터 유형 및 패키징 클래스

패키징 클래스... 유형 이름... 공통 값... 분류

번호.. . number... 123.123 …… 기본 데이터 유형

Boolean …… Boolean …… true, false …… 기본 데이터 유형

String …… string …… “hello world!” 기본 데이터 유형

객체 …… 객체 …… {}, [] …… 복합 데이터 유형

함수 …… 함수 …… function(){} …… 특수 유형

없음… 정의되지 않음... 정의되지 않음, 정의되지 않음... 작은 데이터 유형

없음... null... null... 작은 데이터 유형

내장 유형에는 이 기사와 관련이 거의 없어 목록에 포함되지 않았습니다.

2. 참조 유형 및 값 유형

참조 유형: 객체 함수

값 유형: 숫자, 부울, 문자열, null, 정의되지 않음

3. 새로운 함수(생성자)와 프로토타입(프로토타입)

프로토타입의 디자인 패턴에 대해서는 많이 언급하지 않겠습니다. 예제를 통해 new를 사용하여 객체를 구성하는 과정을 소개합니다.

function classname(){this.id=0;} var v=new classname();

함수를 사용하여 객체를 생성할 때 다음 프로세스가 수행됩니다.

1 , 클래스 이름의 프로토타입을 찾아 얕은 복사본을 만듭니다.

2. 이 포인터를 복사된 개체에 바인딩합니다.

3. this.constructor 속성을 클래스 이름으로 설정합니다.

[참고: 실제로 classname.prototype.constructor의 값도 classname으로 설정되어 있으며 이는 6부에서 설명합니다.]

4. 사용자 {}에서 코드를 실행합니다.

5. this 포인터를 반환하고 이를 lvalue v에 할당합니다.

4. 객체지향 구현의 세 가지 기본 특성

1. 캡슐화

js에서는 액세스에 중점을 둡니다. 권한. 기본적으로 지원되는 다른 객체 지향 언어에서는 public, protected, private 세 가지 키워드가 일반적으로 액세스 권한을 제어하는 ​​데 지원되지만 js에서는 제어하기 위해 복잡한 범위 관계에만 의존할 수 있습니다.

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

function classname(a){

var uid=a / /uin 비공개를 시뮬레이션하려면 범위가 {}이며 외부에서 사용할 수 없습니다.

this.getuid=function(){return a;} //uid에 대한 외부 읽기 전용 인터페이스 제공 obj.getuid() ;

this.setuid=function(val){a=val} //uid에 대한 쓰기 가능한 외부 인터페이스 제공 obj.setuid(5)

this.id=uid; id는 시뮬레이션입니다. public obj.id는

}

classname.prototype.func=function(){}을 사용합니다. //공용 메서드 obj.func()를 시뮬레이션하여
classname.stafunc =function(){}; //

var obj=new classname(1)을 호출하기 위해 classname.stafunc()를 시뮬레이션합니다.
[!] function은 참조형이기 때문에 classname.prototype.func는 모든 객체가 공유하는 함수 객체(각 객체는 참조만 가짐)이므로 객체 크기가 크지 않다는 점에 유의하는 것이 매우 중요합니다. this.getuid와 this.setuid를 사용하는 것은 함수를 정의하는 것이므로 각 객체 인스턴스마다 복사본을 저장하게 됩니다. 이 방법을 함부로 사용하면 객체의 크기가 커지고 성능에 영향을 미칠 수 있습니다. 개인적으로 개인 변수를 시뮬레이션하는 것은 별 의미가 없다고 생각합니다.

[!] 정말 this.xxx=function(){}을 많이 사용해야 한다면 function(){}의 this 포인터가 가장 바깥쪽에 있는 this 포인터와 다르게 추가하는 것이 가장 좋습니다. var _this=this;를 클래스 정의의 첫 번째 줄에 추가하면 this.xxx=function(){}에서 바인딩 포인터를 편리하게 사용할 수 있습니다.

2. 상속

상속을 구현하는 방법에는 크게 두 가지가 있습니다. 첫 번째는 프로토타입에 값을 할당하고 생성자 속성을 변경하여 자바스크립트 자체의 프로토타입 모델을 사용하는 것입니다. 상속; 두 번째 방법은 프로토타입을 사용하지 않고 상위 객체의 모든 속성 메서드를 하위 객체에 수동으로 깊은 복사하는 것입니다. 예를 들어, A가 B를 상속해야 하는 경우 첫 번째 작성 방법은 다음과 같습니다. A.prototype=new B();A.prototype.constructor=A; 두 번째 작성 방법은 재귀를 작성하거나 다음을 사용하는 것입니다. jquery의 확장 메소드. 게다가 다중 상속을 구현하려면 프로토타입이 정말 번거롭습니다(여러 클래스를 순차적으로 만들고 이를 연결하려면 빈 객체를 만들어야 합니다). 두 번째 방법은 비교적 간단합니다. 일반적으로 이러한 유형의 상속을 통해 상위 클래스를 쉽게 찾을 수 있도록 개체에 속성을 추가하여 상위 클래스를 참조할 수 있습니다.

3. 다형성

함수 오버로딩에 대해서는 이야기하지 않겠습니다. 모든 작업이 완료되었습니다. 매개변수만 확인하면 매우 유연합니다. 숨겨진 속성은 정의되지 않은 상태로 직접 할당됩니다. B 클래스의 프로토타입을 상속받으려면 빈 객체를 생성해야 하며, 그렇지 않은 경우 클래스에 메소드를 작성하더라도 프로토타입을 직접 수정하는 것과 같습니다. 메서드를 작성하지 않으면 생성자를 최종적으로 수정할 때 상속 체인에 혼란이 발생할 수도 있습니다. 빈 개체를 연결하기 쉽습니다.

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

function temp(){}

temp.prototype=B

var obj=new temp();

이 방법으로 B를 상속해야 합니다. .prototype 클래스는 obj를 상속할 수 있으며 프로토타입이 수정되더라도 B는 영향을 받지 않습니다. 그리고 새로운 B()를 상속받는 것처럼 많은 공간을 낭비하지 않습니다.

5. 깊은 카피와 얕은 카피

얕은 카피는 다른 언어와 다르지 않으며, 레퍼런스를 만나면 깊이 들어가지 않습니다. 유형 또는 클래스 유형. Deep Copy는 유형 판단에 따라 재귀 복사를 수행합니다.

6. 프로토타입.constructor

이 값은 주로 상속된 프로토타입 체인을 유지하는 데 사용됩니다. 매우 자세하게 작성된 기사가 있습니다. http://bbs.51js.com/thread-84148-1-1.html을 참조하세요.

7. JS의 객체 지향 개발<.>
저는 프론트엔드 개발자도 아니고 제한된 프로젝트만 보아왔기 때문에 제 경험만 말씀드릴 수 있겠네요.

내가 개발한 B/S는 일반적으로 두 가지 아키텍처를 사용합니다. 하나는 CGI 기반으로 HTML을 생성하는 배경 언어와 일부 사용자 상호 작용, Ajax 통신 등만 수행하는 JS입니다. 다른 하나는 MVC를 사용하는 것입니다. 백그라운드 언어는 JSON만 생성하고 뷰 레이어는 JS 구성 요소에 의해 클라이언트 측에서 완전히 구현됩니다. 후자는 일반적으로 프로그래밍을 위해 객체 지향 아이디어를 사용하고, 구성 요소를 클래스로 캡슐화하고, JSON을 생성자에 전달한 다음 이를 컨트롤러 또는 레이아웃 구성 요소에서 추가합니다. 구성 요소를 재사용할 수 있으므로 백엔드 관리 시스템 및 JS 게임 개발 효율성이 상당히 인상적입니다.