> 웹 프론트엔드 > JS 튜토리얼 > js에서 객체를 생성하는 세 가지 기본 방법(팩토리 모드, 생성자 모드, 프로토타입 모드)에 대한 자세한 설명

js에서 객체를 생성하는 세 가지 기본 방법(팩토리 모드, 생성자 모드, 프로토타입 모드)에 대한 자세한 설명

高洛峰
풀어 주다: 2017-01-10 12:18:21
원래의
1173명이 탐색했습니다.

1. 팩토리 패턴

팩토리 패턴은 소프트웨어 엔지니어링 분야에서 잘 알려진 디자인 패턴입니다. ECMAScript에서는 클래스를 만들 수 없기 때문에 함수를 사용하여 특정 인터페이스로 객체를 캡슐화합니다. 구현 방법은 매우 간단합니다. 즉, 함수 내에서 개체를 만들고 개체에 속성과 메서드를 할당한 다음 개체를 반환합니다.

function a(name){
 var b = new object();
 b.name = name;
 b.say = function(){
  alert(this.name);
 }
  return b
}
로그인 후 복사

함수는 내부적으로 b 객체를 생성하여 반환합니다.

2. 생성자 패턴

function Person(name, url) { //注意构造函数名第一个字母大写
 this.name = name;
 this.url = url;
 this.alertUrl = alertUrl;
}
  
function alertUrl() {
 alert(this.url);
}
로그인 후 복사

객체가 생성될 때마다 AlertUrl 메서드가 생성되므로 낭비입니다. 따라서 공간을 절약하기 위해 AlertUrl 메소드를 전역적으로 작성하지만, 이렇게 작성하는 것은 객체지향 프로그래밍의 원래 의도에 위배됩니다.

3. 프로토타입 패턴

우리가 만드는 모든 함수에는 프로토타입 속성이 있으며, 이 속성은 객체를 가리키는 포인터이며, 이 객체의 목적은 다음과 같습니다. 유형의 모든 인스턴스가 공유하는 특정 속성 및 메서드. 프로토타입 객체를 사용하면 모든 객체 인스턴스가 포함된 속성과 메서드를 공유할 수 있다는 장점이 있습니다.

function Person(){
}
 
Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
  alert(this.name);
}
 
var person1 = new Person();
var person2 = new Person();
  
//测试代码
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill
 
person1.name = "666";
 
alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill
로그인 후 복사

우리가 만드는 모든 함수에는 실제로 객체를 가리키는 포인터인 프로토타입 속성이 있습니다.

person1과 같은 사람 개체가 생성되면 기본 이름 속성은 bill입니다. 이름 값을 변경하려면 person1.name에 대해 작업을 수행해야 합니다. 이것은 단지 이 객체의 이름 속성을 변경합니다. Alert(person1.prototype.name)은 여전히 ​​프로토타입

의 이름 속성을 표시합니다. 위 내용은 모두의 학습에 도움이 되기를 바랍니다. 그리고 나는 또한 모든 사람들이 PHP 중국어 웹사이트를 지지해주기를 바랍니다.

js에서 객체를 생성하는 세 가지 기본 방법(팩토리 모드, 생성자 모드, 프로토타입 모드)에 대한 자세한 설명은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿