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

우리가 만드는 모든 함수에는 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 객체인 프로토타입 속성이 있습니다. 논리적으로는 다음과 같이 이해할 수 있습니다. 프로토타입은 생성자를 사용하여 생성된 객체의 프로토타입 객체입니다. 프로토타입을 사용하면 모든 개체 인스턴스가 포함된 속성과 메서드를 공유할 수 있다는 장점이 있습니다. 즉, 생성자에서 객체 정보를 정의할 필요 없이 이 정보를 프로토타입에 직접 추가하는 것입니다.

프로토타입 메소드는 객체의 프로토타입 속성을 활용합니다. 새로운 객체를 생성하는 데 사용되는 방법으로 간주됩니다. 여기서는 먼저 빈 생성자를 사용하여 함수 이름을 설정합니다. 그런 다음 모든 속성과 메서드가 프로토타입 특성에 직접 할당됩니다. 이전 예제를 다시 작성했는데 코드는 다음과 같습니다.

function Car() { };
//将所有的属性的方法都赋予prototype属性
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  return this.color;
};
var Car1 = new Car();
var Car2 = new Car();
document.write(Car1.showColor()+"
");//输出：blue
document.write(Car2.showColor());//输出：blue

이 코드에서는 먼저 코드 없이 생성자 Car()를 정의합니다. 다음 몇 줄의 코드에서는 Car의 프로토타입 속성에 속성을 추가하여 Car 객체의 속성을 정의합니다. new Car()가 호출되면 프로토타입의 모든 속성이 생성될 객체에 즉시 할당됩니다. 이는 모든 Car 인스턴스가 showColor() 함수에 대한 포인터를 저장한다는 의미입니다. 의미상으로 모든 속성이 하나의 객체에 속해 있는 것처럼 나타나 기존 팩토리 메소드와 생성자 메소드의 문제점을 해결

또한 이 메소드를 사용하면 instanceof 연산자도 사용할 수 있습니다. 유형을 확인하세요. 주어진 변수가 가리키는 객체:

코드는 다음과 같습니다.

document.write(Car1 instanceof Car);    //输出：tru

프로토타입 접근 방식이 좋은 해결책인 것 같습니다. 안타깝게도 그다지 만족스럽지는 않습니다. 첫째, 이 생성자에는 매개변수가 없습니다. 프로토타입 메소드를 사용하면 Car1과 Car2의 color 속성이 "blue"이고,door 속성이 4이고, mpg 속성이 이기 때문에 생성자에 매개변수를 전달하여 속성값을 초기화할 수 없습니다. 25. 이는 객체가 생성된 후 속성의 기본값을 변경해야 한다는 것을 의미하며, 이는 번거롭지만 이것이 끝은 아닙니다. 실제 문제는 속성이 함수가 아닌 객체를 가리킬 때 발생합니다. 기능 공유는 문제를 일으키지 않지만 개체가 여러 인스턴스 간에 공유되는 경우는 거의 없습니다. 다음 예를 고려하십시오.

function Car() { };//定义一个空构造函数，且不能传递参数
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
  return this.color;
};
var Car1 = new Car();
var Car2 = new Car();
Car1.drivers.push("Bill");
document.write(Car1.drivers+"
");//输出：Mike,John,Bill
document.write(Car2.drivers);//输出 ：Mike,John,Bill

위 코드에서 드라이버 속성은 "Mike"와 "John"이라는 두 이름을 포함하는 배열 개체에 대한 포인터입니다. 드라이버는 참조 값이므로 Car의 두 인스턴스는 모두 동일한 배열을 가리킵니다. 이는 Car2.drivers에서도 볼 수 있는 Car1.drivers에 "Bill" 값을 추가하는 것을 의미합니다. 이러한 포인터 중 하나를 출력하면 "Mike,John,Bill"이라는 문자열이 표시됩니다. 객체를 생성할 때 문제가 너무 많은데, 객체를 생성하는 합리적인 방법이 없을까? 대답은 '예'입니다. 생성자와 프로토타입 메서드를 조합하여 사용해야 합니다.

생성자/프로토타입 메서드를 혼합하여 사용해야 합니다(
< 사용을 권장함). 🎜>

생성자 메서드와 프로토타입 메서드를 혼합하면 다른 프로그래밍 언어와 마찬가지로 개체를 만들 수 있습니다. 개념은 매우 간단합니다. 즉, 개체의 모든 비기능적 속성을 정의하고 사용하는 것입니다. 객체의 기능적 속성을 정의하는 프로토타입 메서드(메서드) 결과적으로 모든 함수는 한 번만 생성되고 각 객체는 고유한 객체 속성 인스턴스를 갖게 됩니다.

function Car(Color,Doors,Mpg) {
 this.color = Color;
 this.doors = Doors;
 this.mpg = Mpg;
 this.drivers = new Array("Mike","John");
};
Car.prototype.showColor = function() {
   return this.color;
};
var Car1 = new Car("red",4,23);
var Car2 = new Car("blue",3,25);
Car1.drivers.push("Bill");
document.write(Car1.drivers+"
");//输出：Mike,John,Bill
documnet.write(Car2.drivers);//输出：Mike,John

이제는 일반 객체를 생성하는 것과 비슷합니다. 함수가 아닌 모든 속성은 생성자에서 생성됩니다. 즉, 매개변수를 사용하여 속성에 기본값을 할당할 수 있습니다. showColor() 함수의 인스턴스가 하나만 생성되므로 메모리 낭비가 없습니다. 또한 Car1의 drivers 배열에 "Bill" 값을 추가해도 Car2의 배열에는 영향을 주지 않으므로 이들 값을 출력할 때 배열의 경우 Car1.drivers는 "Mike, John, Bill"을 표시하고 Car2.drivers는 "Mike, John"을 표시합니다. 프로토타입 메서드가 사용되기 때문에 objectof의 유형을 결정하는 데 여전히 사용할 수 있습니다.

이 방법은 ECMAScript에서 사용하는 주요 방법이며, 다른 방법도 있습니다. 그러나 일부 개발자는 여전히 이 방법이 완벽하지 않다고 느낍니다.

다른 언어에 익숙한 개발자의 경우 하이브리드를 사용합니다. 결국, 대부분의 객체 지향 언어는 클래스를 정의할 때 속성과 메서드를 시각적으로 표현합니다.

Java很好地打包了Car类的所有属性和方法，因此看见这段代码就知道它要实现什么功能，它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为，在构造函数内部找属性，在其外部找方法的做法不合逻辑。因此，他们设计了动态原型方法，以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car：

<strong>function Car(Color,Doors,Mpg) {
 this.color = Color;
 this.doors = Doors;
 this.mpg = Mpg;
 this.drivers = new Array("Mike","John");
 //如果Car对象中的_initialized为undefined，表明还没有为Car的原型添加方法
 if (typeof Car._initialized == "undefined") {
   Car.prototype.showColor = function() {
    return this.color;
   };
   Car._initialized = true; //设置为true，不必再为prototype添加方法
 }
}
var Car1 = new Car("red",4,23);//生成一个Car对象
var Car2 = new Car("blue",3,25);
Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素
document.write(Car1.drivers+"
");//输出：Mike,John,Bill
document.write(Car2.drivers);//输出：Mike,John</strong>

 直到检查typeof Car._initialize是否等于"undefined"之前，这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义，构造函数将用原型方式继续定义对象的方法，然后把 Car._initialized设置为true。如果这个值定义了(它的值为 true时，typeof 的值为Boolean)，那么就不再创建该方法。简而言之，该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，传统的 OOP开发者会高兴地发现，这段代码看起来更像其他语言中的类定义了。 

我们应该采用哪种方式呢？      

如前所述，目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方式也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。总之JS是基于面向对象的一门客户端脚本语言，我们在学习它的面向对象技术的时候要的留意JS与其他严谨性高的程序语言的不同。也要正确使用JS创建对象的合理的方式，推荐使用构造函数与原型方式的混合方式创建对象实例。这样可以避免许多不必要的麻烦。

以上就是JavaScript基于面向对象之创建对象的全部内容，希望对大家的学习有所帮助。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程