객체지향 자바스크립트를 기반으로 객체 생성에 대한 자세한 설명(1)_javascript 기술

이번에는 JavaScript 객체지향 기술에 대해 심도있게 공부하겠습니다. 배우기 전에 객체지향 용어에 대한 설명이 필요합니다. 이것이 모든 객체지향 언어의 공통점이다. 객체 지향 용어에는 여러 가지가 있습니다.
1. 객체
ECMA-262는 객체를 "순서가 지정되지 않은 속성 모음으로, 각 속성은 기본 값, 객체 또는 함수를 저장합니다"라고 정의합니다. 엄밀히 말하면 객체는 특별한 순서가 없는 값의 배열이라는 뜻입니다. ECMAScript는 객체를 이런 방식으로 정의하지만 보다 일반적인 정의는 명사(사람, 장소 또는 사물)를 코드 기반으로 표현하는 것입니다.
2. 카테고리
모든 개체는 클래스에 의해 정의되며, 클래스는 개체의 레시피로 간주될 수 있습니다. 클래스는 객체의 인터페이스(개발자가 액세스하는 속성 및 메서드)뿐만 아니라 객체의 내부 작동(속성과 메서드를 작동시키는 코드)도 정의합니다. 컴파일러와 인터프리터는 모두 클래스 사양을 기반으로 개체를 만듭니다.
3. 예시
프로그램이 클래스를 사용하여 객체를 만들 때 생성된 객체를 클래스의 인스턴스라고 합니다. 클래스가 생성할 수 있는 객체 수에 대한 유일한 제한은 코드가 실행되는 컴퓨터의 물리적 메모리에서 비롯됩니다. 각 인스턴스는 동일하게 동작하지만 인스턴스는 독립적인 데이터 세트를 처리합니다. 클래스에서 객체 인스턴스를 생성하는 프로세스를 인스턴스화라고 합니다.
이전 장에서 우리는 ECMAScript에는 형식적인 클래스가 없다고 언급했습니다. 대조적으로, ECMA-262는 객체 정의를 객체에 대한 레시피로 설명합니다. 이는 객체 정의가 실제로 객체 자체이기 때문에 ECMAScript 논리의 절충안입니다. 클래스가 실제로 존재하지 않더라도 대부분의 개발자가 이 용어에 더 익숙하고 두 용어가 기능적으로 동일하기 때문에 객체 정의를 클래스라고 부릅니다.
미리 정의된 개체를 사용하는 것은 개체 지향 언어 기능의 일부일 뿐입니다. 이 언어의 진정한 힘은 자신만의 전용 개체를 만드는 능력에 있습니다. ECMAScript에는 객체를 생성하는 다양한 방법이 있습니다.
1. 독창적인 방식
객체가 생성된 후 객체의 속성을 동적으로 정의할 수 있기 때문에 JavaScript가 처음 소개되었을 때 많은 개발자가 다음과 유사한 코드를 작성했습니다.

var Car = new Object(); 
Car.color = "blue"; 
Car.doors = 4; 
Car.mpg = 25; 
Car.showColor = function() { 
  return this.color; 
}; 
document.write(Car.showColor());//输出：blue 

위 코드에서 Car 객체를 생성합니다. 그런 다음 몇 가지 속성을 지정하십시오. 파란색이고 문이 4개 있으며 갤런당 25마일을 주행합니다. 마지막 속성은 실제로 함수에 대한 포인터입니다. 즉, 속성이 메서드라는 뜻입니다. 이 코드를 실행한 후 Car 개체를 사용할 수 있습니다. 그러나 여기에는 문제가 있습니다. 즉, 여러 개의 Car 인스턴스를 생성해야 할 수도 있으며, 이로 인해 유사한 코드가 많이 반복되어 매우 번거로워질 수 있습니다.
2. 팩토리 방식
위의 여러 유사한 개체 선언 문제를 해결하기 위해 개발자는 특정 유형의 개체를 생성하고 반환할 수 있는 팩토리를 만들었습니다. 이 방법은 인스턴스화된 객체의 대량 중복 문제를 해결하기 위한 것입니다.
(1) 매개변수가 없는 팩토리 메소드
예를 들어, createCar() 함수를 사용하면 이전에 나열된 Car 객체 생성 작업을 캡슐화할 수 있습니다.

function createCar() { 
var TempCar = new Object(); 
TempCar.color = "blue"; 
TempCar.doors = 4; 
TempCar.mpg = 25; 
TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar(); 
var Car2 = createCar(); 
document.write(Car1.showColor()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue 

여기에서는 첫 번째 예제의 모든 코드가 createCar() 함수에 포함되어 있습니다. 또한 TempCar 개체를 함수 값으로 반환하는 추가 코드 줄이 있습니다. 이 함수를 호출하면 새로운 객체가 생성되고 앞서 설명한 Car 객체를 복사하여 필요한 모든 속성이 부여됩니다. 따라서 이 접근 방식을 사용하면 정확히 동일한 속성을 가진 두 가지 버전의 Car 개체(Car1 및 Car2)를 쉽게 만들 수 있습니다.
(2) 매개변수를 사용한 팩토리 메소드
단순히 속성에 기본값을 제공하는 대신 createCar() 함수를 수정하여 각 속성의 기본값을 전달할 수도 있습니다.

function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

createCar() 함수에 매개변수를 추가하면 생성할 Car 객체의 color, door, mpg 속성에 값을 할당할 수 있습니다. 이렇게 하면 두 객체가 동일한 속성을 가지지만 속성 값은 달라집니다.
팩토리 메소드는 반복되는 인스턴스화 문제를 해결하지만 여전히 문제가 있습니다. 즉, 이전 예에서는 createCar() 함수가 호출될 때마다 새로운 함수 showColor()를 생성해야 합니다. 즉, 각 객체가 자체 showColor() 버전이 있습니다. 실제로 모든 객체는 동일한 기능을 공유합니다. 일부 개발자는 이 문제를 피하기 위해 팩토리 함수 외부에서 객체의 메서드를 정의한 다음 속성을 통해 메서드를 가리킵니다.

function showColor() { 
   return this.color; 
}; 
function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = showColor; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
       创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.showColor = function() { 
    return this.color; 
 }; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。