js_javascript 기술로 객체를 생성하는 여러 방법의 예

JavaScript의 모든 것은 문자열, 배열, 숫자, 함수 등 객체입니다. JS에는 클래스라는 개념이 없지만

JS의 문법적 특징을 활용하여 클래스라는 개념으로 객체를 생성할 수 있습니다.

원래 방법

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

< ;script type ="text/javascript">

var obj = new Object()
obj.name = "Koji"; //객체에 속성 추가
obj.age = 21;
obj.showName = function(){ //객체에 메서드 추가
alert(this.name)
}
obj.showAge = function(){
alert(this .age);

obj.showName(); //코지
obj.showAge() //21

위 메소드는 new 키워드를 통해 객체를 생성한 후, 동적 언어인 JS의 특성에 맞는 속성과 메소드를 추가하여

객체를 구성합니다. 메소드를 호출하는 객체입니다.

이 접근 방식의 문제점은 객체를 여러 번 생성해야 하는 경우 코드를 여러 번 반복해야 하므로 코드 재사용에 도움이 되지 않는다는 것입니다.

팩토리 메소드

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

< ;script type ="text/javascript">

function createObj(){
var obj = new Object(); //객체 생성

obj.name = "Koji" ;
obj.age = 21;
obj.showName = function(){
alert(this.name)
}
obj.showAge = function(){
alert (this.age);

return obj; //return object
}

var obj1 = createObj()
var obj2 = createObj();

obj1.showName(); //Koji
obj2.showAge() //21




코드 재사용률을 높이기 위해 팩토리 메소드를 변경하고 매개변수 값을 전달할 수도 있습니다.

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

위 방법은 코드 재사용률을 향상시킬 수 있지만 다릅니다. 객체 지향 클래스의 개념에는 큰 결함이 있습니다. 얼굴
객체는 객체의 속성은 비공개이고 객체의 메소드는 공유된다는 점을 강조합니다. 위의 팩토리 메소드가 객체를 생성할 때 각

객체에 대해 고유한 전용 메소드를 생성해야 합니다. 동시에 각 개체에 대해 논리적으로 동일한 메서드를 만드는 것은 메모리를 낭비합니다. 개선된 내용은 다음과 같습니다

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

function createObj(name, age){
var obj = new Object() // 객체 생성

obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge; //객체 반환
}

function showName(){ //함수도 객체입니다.
alert(this.name)
}

function showAge( ){
alert(this .age);

var obj1 = createObj("Koji", 22)
var obj2 = createObj("Luo", 21); 🎜>
obj1.showName(); //코지
obj1.showAge(); //22
obj2.showName(); //루오
obj2.showAge();




위에서는 두 개의 함수 개체를 정의하여 함수 개체를 보유하는 서로 다른 개체의 개인 문제를 해결합니다. 이제 모든 객체 메소드

는 위의 두 함수에 대한 참조를 보유합니다. 그러나 이 경우 객체의 기능은 객체와 독립적이고 무관해집니다. 이는 특정 메서드가 특정 클래스에 속한다는

객체 지향 개념과 일치하지 않습니다.

생성자 방식




코드 복사


코드는 다음과 같습니다.

생성자 메소드는 팩토리 메소드와 동일하며 각 객체에 대해 전용 함수 객체를 생성합니다. 물론 이러한 함수

개체는 생성자 외부에서도 정의할 수 있으므로 개체와 메서드는 서로 독립적입니다.

Prototype 방식: 객체의 프로토타입 속성을 활용하는 방식입니다.




코드 복사

코드는 다음과 같습니다. script type="text/javascript">

function Person(){} //빈 생성자를 정의하고 매개변수를 전달할 수 없습니다.

//바꾸기 all 속성 메소드는 모두 프로토타입 속성

Person.prototype.name = "Koji"; //Add attribute
Person.prototype.age = 22; 프로토타입.showName = function(){ //메서드 추가
alert(this.name)
}

Person.prototype.showAge = function(){
alert(this.age );
}

var obj1 = new Person(); //Person 객체 생성
var obj2 = new Person()

obj1.showName(); /코지
obj1.showAge(); //22
obj2.showName() //코지
obj2.showAge(); //22

🎜>

Person 객체가 생성되면 프로토타입의 속성이 새 객체에 할당됩니다. 그런 다음 속성과 메서드가 공유됩니다.

이 방법의 첫 번째 문제점은 생성자가 매개변수를 전달할 수 없으며 새로 생성된 각 객체에 기본값이 있다는 것입니다. 둘째, 메소드 공유에는 문제가 없으나, 속성이 상태를 변경할 수 있는 객체인 경우 속성 공유에 문제가 있다.

코드 복사


코드는 다음과 같습니다.

Person.prototype.showAge = function(){

alert(this.age)
}

Person.prototype. showArray = function(){
alert(this.array)
}

var obj1 = new Person(); //Person 객체 생성
var obj2 = new Person() ;

obj1.array.push("Kyo"); //obj1의 배열 속성에 요소 추가

obj1.showArray() //Koji,Luo,Kyo
obj2 .showArray(); //Koji,Luo,Kyo




위 코드에서 obj1부터 obj1까지의 속성 배열에 요소를 추가하면 obj2 배열 속성 요소도

의 영향을 받습니다. 그 이유는 obj1 및 obj2 개체의 배열 속성이 동일한 Array 개체를 참조하기 때문입니다. 그런 다음 이 Array

개체를 변경하고 다른 개체를 변경합니다. 하나는 Array 객체를 참조합니다. 속성은 자연스럽게 영향을 받습니다.

혼합 생성자/프로토타입 접근 방식

생성자를 사용하여 객체의 속성을 정의하고 프로토타입을 사용하여 객체의 메서드를 정의합니다. 메소드는 공유되는 반면

프라이빗 속성을 얻을 수 있습니다.




코드 복사


코드는 다음과 같습니다.

속성이 비공개된 후에는 해당 속성을 변경해도 다른 개체에 영향을 주지 않습니다. 동시에 다양한 객체가 메소드를 공유합니다. 의미상으로

이것은 객체 지향 프로그래밍의 요구 사항을 충족합니다.

동적 프로토타입 방식

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

function Person(이름, 나이) {
this.name = 이름
this.age = age; = new Array ("Koji", "Luo");

//Person 객체의 _initialized가 정의되지 않은 경우 이는 Person 프로토타입에 추가된 메서드가 없음을 의미합니다.
if (Person 유형. ._initialized == "정의되지 않음")
{
Person.prototype.showName = function() {
alert(this.name)
}

Person.prototype.showArray = function() {
alert(this.array);

Person._initialized = true; //true로 설정하면 프로토타입에 메서드를 추가할 필요가 없습니다.
}
}

var obj1 = new Person("Koji", 22); //Person 객체 생성
var obj2 = new Person("Luo", 21); .array.push("Kyo "); //obj1의 배열 속성에 요소 추가

obj1.showArray() //Koji,Luo,Kyo
obj1.showName(); /Koji
obj2.showArray (); //Koji,Luo
obj2.showName(); //Luo

생성자/프로토타입 메서드와 유사합니다. 생성자에 메서드를 추가하고 생성자

함수 Person에 속성을 추가하면 if 문이 한 번만 성공적으로 실행될 수 있습니다.

실제 응용 프로그램에서는 가장 좋은 방법이 사용됩니다. . 광범위한 것은 생성자/프로토타입 메소드입니다. 동적 프로토타입 메서드도 널리 사용되며 기능적으로 생성자

함수/프로토타입 메서드와 동일합니다. 생성자나 프로토타입 메서드만 사용하지 마세요.