Javascript 객체지향(문)_js 객체지향

제 지식과 지식이 부족하여 "Javascript Advanced 프로그래밍"의 내용 중 일부를 발췌하게 되었습니다. 이 내용도 제가 읽은 노트로 간주될 수 있습니다. Javascript의 객체지향 메커니즘은 매우 중요하고 내용도 방대하기 때문에 여기에서는 각 장별로 하나씩 소개하겠습니다.

객체를 사용하려면 먼저 선언해야 합니다(물론 내장 객체에는 필요하지 않습니다). 빌어먹을 자바스크립트는 항상 우리의 뇌세포를 많이 죽게 만듭니다. 이 글에서는 주로 자바스크립트 클래스를 선언하는 몇 가지 방법을 설명합니다.

Factory 모드
Factory 모드는 많은 개발자가 사용하는 모드일 수 있습니다. 간단히 말해서 이 방법은 먼저 "기초"를 정의한 다음 이를 다양한 기능 위에 던지는(바인딩) 것입니다. 그리고 속성. 다음 코드는 매우 친숙해 보일 수 있습니다.

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

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color)
oCar.showColor ();

물론 클래스로 패키징되기 때문에 재사용해야 합니다(위 메소드는 구문상 변수일 뿐입니다). 특정 객체를 반환하는 팩토리 함수를 사용하여 캡슐화할 수 있습니다.

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

function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color) ;
}

return oCar;
}
oCar = createCar()
oCar.showColor();

물론이죠. , 매우 전문적으로 보이는 createCar 함수에 몇 가지 매개변수를 추가할 수 있습니다.

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

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color ) ;
}

return oCar;
}
oCar = createCar()
oCar.showColor();

사람들은 매우 심오한 느낌을 가지면서도 때로는 혼란스럽기도 합니다. 길이를 고려하지 않는 경우 외부에서 정의할 수 있습니다.

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

function showColor () {
alert(this.color);
}

function createCar(sColor) {
var oCar = new Object
oCar.color; = sColor;
oCar.showColor = showColor;

return oCar;
}
oCar = createCar()


이것도 하세요. 한 가지 장점은 oCar.showColor를 반복적으로 정의할 필요가 없다는 것입니다(누구나 효율적인 프로그램을 좋아합니다).

생성자 패턴
생성자는 실제로 팩토리 메소드와 유사합니다. 코드량 측면에서 보면 생성자 내부에서 객체가 생성되지 않는다는 뜻이다.

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

function Car(sColor) {

this.color = sColor;
this.showColor = function () {
alert(this.color)
}
}
oCar = new Car("빨간색"); >oCar.showColor();


사실 이 암시적 객체는 new 이후에 인스턴스화되었습니다. 기본적으로 생성자는 this 값을 반환합니다(따라서 return을 사용할 필요가 없습니다). 그러나 생성자 패턴은 팩토리 패턴과 마찬가지로 메서드를 반복적으로 정의할 수 있으므로 이를 방지하려면 위에서 언급한 팩토리 패턴을 참조하면 됩니다(항상 불완전해 보입니다).

프로토타입 모드

반복되는 정의 문제는 이제 충분히 해결했는데, 완벽한 해결책은 없을까요? 물론 있습니다. 프로토타입 방법을 사용하면 이러한 문제를 효과적으로 피할 수 있습니다.

코드 복사 코드는 다음과 같습니다. function Car() {}

Car.prototype .color = new Array("red", "green", "blue");

Car.prototype.showColor = function() {
alert(this.color)
}
oCar = 새로운 자동차();
oCar.showColor()


그런데 이 모드를 사용할 때 주의해야 할 점은 클래스의 모든 속성과 메서드가 공유된다는 것(실제로는 포인터)입니다. 이는 두 개의 변수가 인스턴스화되더라도 하나의 값이 변경되면 다른 변수도 변경된다는 의미입니다.

참고: 이 단락의 내용이 변경되었습니다. 자세한 내용은 여기와 여기를 참조하세요(제안해 주신 Brother Fish에게 감사드립니다).

혼합 모드
위에서 배운 방법을 결합하면 프로토타입 모드의 문제를 쉽게 해결할 수 있어 더욱 전문적인 프로그램처럼 보입니다. .

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

function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color)
}
oCar = new Car("빨간색");
oCar.showColor();

위 메소드로 선언된 클래스의 경우 showColor 메소드는 프로토타입(인스턴스 하나만 생성됨)이고 나머지는 생성자입니다(방해하지 마세요). 서로).

동적 프로토타이핑 모드
자신만의 방법을 외부에 두는 것은 환경 친화적이지 않습니다. 다음 방법은 매우 "친환경"입니다.

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

function Car() {
this.color = "red"
if (typeof Car._initialized == "undefine") {
Car.prototype.showColor = function() {
alert(this.color)
}; true;
}
}
oCar = new Car("red");
oCar.showColor()

이 방법은 위와 동일합니다. 블렌딩 모드, 즉 속성은 생성자 내에서 정의되는 반면 메서드는 프로토타입 패턴을 사용합니다. 유일한 차이점은 객체 메서드가 할당되는 위치입니다.


혼합 팩토리 패턴
혼합 팩토리 패턴은 함수 자체가 객체이므로 new를 사용하여 인스턴스화할 수 있으므로 구성 패턴과 혼합 패턴의 통합이라고 볼 수 있습니다. 이런 식으로 설명하겠습니다.)

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

function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color)
}

return oCar;
}
oCar = new Car();
oCar.showColor();

그러나 위의 팩토리 패턴과 같으므로 이 메서드 정의를 사용하지 않는 것이 좋습니다. , 반복되는 선언 질문이 있습니다.

어떤 모드를 선택할 것인가?
사실 위의 설명은 어느 정도 결과를 낳았습니다. 혼합 모드와 동적 프로토타입 모드가 일반적으로 사용됩니다(저는 개인적으로 동적 프로토타입 모드에 투표합니다). 그러나 Factory Pattern과 Construction Pattern(또는 둘을 조합하여)을 단독으로 사용하면 불필요한 낭비가 발생하므로 사용하지 마십시오.

테스트 코드

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">