JavaScript 객체 지향 - 팩토리 메소드와 생성자 메소드를 사용하여 객체 생성

이전 글에서는 간단한 자바스크립트 객체의 생성 방법을 소개했는데, 간단한 js 객체의 가장 큰 문제점은 클래스 제약이 없어 객체의 재사용이 불가능하고, 이에 대한 관례도 없다는 것입니다. 작동 중에 작동이 시작되었습니다. 그래서 사람들은 디자인 패턴에서 팩토리 패턴을 빌려 JavaScript 객체를 만들었습니다.

팩토리 메소드를 사용하여 JavaScript 객체 생성

팩토리 메소드의 개념은 함수에서 객체를 생성한 다음 해당 객체에 해당하는 속성과 메소드를 설정하고 마지막으로 반환하는 것입니다. 개체. 함수를 통해 캡슐화하고 특정 인터페이스를 사용하여 개체를 만듭니다. 다음은 팩토리 메소드를 사용하여 person 객체를 생성하는 예이다.

function createPerson(name,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.say = function(){
    alert(this.name + "," + this.age);
  }
  return o;
}
// 实例化p1和p2对象
var p1 = createPerson("Leon",22);
var p2 = createPerson("Ada",20);
 
//调用p1和p2对象的say()方法
p1.say();
p2.say();

팩토리 메소드를 사용하면 클래스 문제는 효과적으로 해결되지만, 또 다른 문제가 있다. 객체 p1 및 p2의 데이터 유형을 감지할 수 없습니다. typeof를 사용하여 객체가 객체 유형인지 감지할 수 있습니다:

console.info(typeof p1);  // 控制台输出：Object

객체의 유형을 결정하기 위해 instanceof를 사용하려면 p1 인스턴스of?, 인스턴스of 뒤에 어떤 유형을 채워야 할까요? 우리는 모른다.

생성자를 사용하여 JavaScript 객체 생성

팩토리 메소드는 객체의 특정 유형을 결정할 수 없기 때문에 사람들은 JavaScript 객체를 생성하는 새로운 방법인 생성자 메소드를 제안했습니다. JavaScript에서는 생성자를 사용하여 Object 및 Array와 같은 특정 유형의 개체를 만들 수 있습니다. 이러한 js 기본 생성자는 런타임 시 실행 환경에 자동으로 나타납니다. 또한 생성자를 사용자 정의하여 사용자 정의 유형의 속성과 메서드를 정의할 수도 있습니다.

생성자를 사용하여 클래스를 생성하는 방법은 팩토리를 기반으로 클래스를 생성하는 방법과 유사하지만 가장 큰 차이점은 함수 이름이 클래스 이름이라는 점입니다. 일반적으로 프로그래밍 표준 관례에 따라 클래스의 첫 글자는 대문자로 표시됩니다. 생성자를 사용하여 클래스를 생성할 때 함수 내부의 this 키워드를 통해 속성 정의가 완료됩니다.

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.info(this.name + "," + this.age);
  }
}
// 通过new关键字来创建对象
var p1 = new Person("Leon",22);
var p2 = new Person("Ada",20);
// 调用对象的方法
p1.say();
p1.say();

위 코드와 같이 클래스 생성이 완료되면 new 키워드를 통해 객체를 인스턴스화할 수 있습니다.

생성자 메서드를 사용하면 객체 유형을 감지하는 문제가 매우 잘 해결됩니다. object가 Person 유형인지 확인하기 위해 instanceof 키워드를 사용할 수 있습니다.

console.info(p1 instanceof Person);   //控制台显示：true                              
console.info(p2 instanceof Person);   //控制台显示：true

또한 다음과 같은 작업도 수행할 수 있습니다. 생성자 키워드를 사용하여 객체의 생성자가 Person 유형인지 확인합니다:

console.info(p1.constructor == Person);   //控制台显示：true                              
console.info(p2.constructor == Person);   //控制台显示：true

또는 비교를 위해 p1 및 p2의 생성자를 직접 인쇄합니다:

console.info(p1.constructor);
console.info(p2.constructor);

생성자 메소드를 사용할 때 발생하는 문제는 각 객체에 메소드의 복사본이 있다는 것입니다. 객체에 메소드가 많으면 메모리 공간을 많이 차지하게 됩니다.

일부 고급 컴파일된 객체지향 프로그래밍 언어(Java 등)에서는 객체 메소드가 런타임 시 스택 영역에 동적으로 생성되며 메모리를 차지하지 않습니다. Javascript에서는 생성자 메소드를 사용하여 생성된 객체의 경우 객체의 각 메소드는 클래스 메소드의 복사본입니다. 객체에 메소드가 많으면 메모리 공간을 많이 차지하게 됩니다.

클래스 메소드를 전역 변수에 정의하면 클래스의 메소드가 동일한 함수를 가리킬 수 있습니다. 코드는 다음과 같습니다.

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  // 此时的类方法是一个全局方法的引用
  this.say = say;
}
//将方法设置为全局的方法
function say(){
  alert(this.name + "," + this.age);
}

클래스 메소드를 전역 메소드로 설정하면 객체의 메소드가 메모리 공간을 점유하는 문제를 해결할 수 있습니다. 이때 생성자를 통해 생성된 모든 객체의 메소드는 해결됩니다. 동일한 전역 함수를 가리킵니다.

그러나 모든 메소드를 전역 함수로 설정하면 이러한 함수를 윈도우에서 호출할 수 있어 객체의 캡슐화가 파괴되고, 객체에 메소드 수가 많으면 코드가 발생하는 문제가 있습니다. 그 안에는 우리의 발전에 도움이 되지 않는 수많은 글로벌 기능이 있습니다.

이러한 생성자 메서드의 단점을 해결하려면 프로토타입을 사용하여 객체를 생성해야 합니다. 다음 글에서는 프로토타입을 사용하여 JavaScript 객체를 생성하는 방법을 소개하겠습니다.

위 내용은 JavaScript 객체 지향입니다. 팩토리 메소드와 생성자 메소드를 사용하여 객체를 생성합니다. 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!