js 객체 지향 객체를 생성하는 다양한 방법에 대한 요약_js 객체 지향

객체 생성 시작:

　1. 객체 리터럴.

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

var clock={
시간: 12,
분:10,
초:10,
showTime:function(){
alert(this.hour ":" this. Minute ":" this.second); }
}
clock.showTime();//Call

2. 객체 인스턴스 생성

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

var clock = new Object()
clock.hour=12
clock. Minute=10; >clock.showHour=function (){alert(clock.hour);};

clock.showHour();//Call


동적으로 속성을 추가할 수 있음을 보여줍니다. 및 수정됨

객체 생성 모드:

1. 팩토리 모드: 함수이고, 매개변수를 입력하고 객체를 반환하면 파이프라인이 작동합니다.

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

function createClock(시,분,초){

var clock = new Object();
clock.hour=hour;
clock.second=second;
clock.showHour=function(){
Alert(this.hour ":" this. Minute " :" this.second);
반환 시계
}
var newClock(12,12,12); //인스턴스화
newClock.showHour() ;//Call


장점: 마지막으로 장점은 추상적인 개념입니다. 하지만 개체의 유형을 인식할 수 없습니다!

2. 생성자 패턴

코드 복사

코드는 다음과 같습니다. 함수 시계(시,분,초){ this.hour = hour;

this.분 = 분

this.second = 초; 🎜> Alert(this.hour ":" this. Minute ":" this.second)
}
}
var newClock =new clock(12,12,12)
alert( newClock.hour);


참고: new 키워드가 추가되지 않으면 clock이 생성자로 호출되지 않습니다. 동시에, 생성자 내부의 속성이 현재 외부 범위에 매핑되었기 때문에 그의 외부 범위인 창에 속성이 실수로 추가됩니다. 따라서 안전을 위해

코드를 복사하세요.

코드는 다음과 같습니다. 함수 시계(시, 분, 초){ if(이 인스턴스의 시계){ this.hour = hour this. Minute =

this.second = second;

this.showTime = function(){
alert(this.hour ":" this. Minute ":" this.second)
}
}
else{
throw new Error("인스턴스를 만들려면 'new'를 추가하세요.");
}
}


생성자의 단점: 객체 인스턴스를 사용할 때 this 포인터가 변경되기 때문에, 이는 새 인스턴스를 가리킵니다. 이때, 새로운 인스턴스의 메소드도 다시 생성해야 합니다. n개의 인스턴스가 있으면 동일한 메소드를 n번 다시 생성해야 합니다. 그럼 프로토타입 모드를 알아봅시다

3. 프로토타입 모드

코드를 복사하세요

코드는 다음과 같습니다. 시계 기능(시,분,초){ } clock.prototype.hour=12; clock.prototype.분=12; . second=12;

clock.prototype.showTime=function(){

alert(this.hour ":" this. Minute ":" this.second)
var newClock = 새로운 시계();
newClock.showTime()


프로토타입 모델을 깊이 이해하는 것이 중요합니다.

우선 각 함수에는 프로토타입(prototype) 속성이 있으며 이 포인터는 clock.prototype 객체를 가리킵니다. 이 프로토타입 객체에는 기본적으로 시계를 가리키는 속성 생성자가 있습니다. 이 속성은 읽고 쓸 수 있습니다. 객체를 인스턴스화할 때 생성자에 의해 정의된 속성 및 메서드(참고, 생성자에만 있음) 외에도 인스턴스 newClock에는 ECMAScript가 [[ 프로토타입]]을 호출하는 생성자의 프로토타입에 대한 포인터도 있습니다. 객체를 인스턴스화하는 경우 프로토타입이 인스턴스화되지 않았기 때문에 프로토타입 객체의 메서드는 특정 인스턴스에 없습니다. (말도 안되는 말이 많습니다. 오해하지 마세요. 혼동하지 마세요.)

따라서 이 모드에서 정의된 객체의 경우 메소드를 호출할 때: call newClock.showTime()을 먼저 확인하세요. 인스턴스에 있는지, 호출이 있는지 따라서 추적되는 프로토타입도 없고 오류도 없으며 호출이 실패합니다.

물론 이렇게 써도 됩니다.

코드를 복사하세요 코드는 다음과 같습니다.

function clock(시,분,초){
}
clock.prototype={
constructor:clock, //이 속성은 수동으로 설정해야 합니다. 그렇지 않으면 생성자가 손상됩니다. 인스턴스 공유 프로토타입은 더 이상 의미가 없습니다.
시:12,
분:12,
초:12,
showTime:function(){
alert(this.hour ":" this. Minute ":" this.second )
}
}
var newClock = new clock();
newClock.showTime();

참고: 인스턴스와 생성자 프로토타입 간의 연결은 다음과 같습니다. 또한 포인터를 통해 연결하므로 프로토타입을 수정하는 메서드를 동적으로 추가할 수 있습니다.

이 순수 프로토타입 모델의 문제점도 명백합니다. 모든 속성과 메소드가 공유되며 객체를 구체적으로 만들 수 없습니다. 종종 우리는 각 객체가 고유한 속성을 가지고 있다고 생각합니다. 따라서 처음 두 개를 결합하면 새로운 모델이 생성됩니다

4. 구성-시제품 조합 모드.

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

기능시계(시,분,초) {
this.hour = 시간;
this.분 = 분;
this.second = 초
}

clock.prototype.showTime=function(){alert( this.hour ":" this. Minute ":" this.second);}
var newClock = new clock(12,12,12)
newClock.showTime()

here 객체를 더욱 구체적으로 만들기 위해 생성자에 속성을 넣습니다.