JavaScript 객체 생성 방법 및 생성자 패턴 코드에 대한 자세한 설명

javascript 객체지향 지식은 매우 방대하고, 깊이 있게 이해하려면 시간이 좀 걸립니다

객체 생성:

1 객체지향을 생성합니다.

var obj = new Object(); 
obj.name = 'haha';
obj.showName = function(){ 
 alert(obj.name);
}
obj.showName();

단점: 우리가 원할 때 여러 객체를 생성하면 반복되는 코드가 너무 많아 캡슐화해야 하므로 팩토리 메서드가 생성됩니다.

2 팩토리 메소드

function CreatePerson(name){ 
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 } 
 return obj;//出厂
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其实就是简单的封装函数，整个过程像工厂的流水线，所以叫工厂方式

단점: 생성된 객체의 유형을 식별할 수 없습니다. 모두 Object이기 때문에 Date, Array 등과 달리 구분이 없어 생성자 패턴이 등장하게 되었습니다.

3 생성자 패턴

function CreatePerson(name){ 
 this.name = name; 
 this.showName = function(){ 
  alert(this.name);
 } 
} 
var p1 =new CreatePerson('haha'); 
p1.showName();
var p2 = new CreatePerson('hehe'); 
p2.showName();

다음 두 가지 측면에서 변경합니다.

함수 이름의 첫 글자는 대문자로 표시됩니다.

실제로는 생성자 자체가 일반 함수와 구별됩니다. 일반적인 함수이지만 생성자라는 함수를 구현하기 위해 특별히 사용하기 때문에 생성자라는 특수한 이름이 있습니다. 함수를 호출하는 방법에 따라 어떤 함수든 생성자가 될 수 있습니다. New를 사용하여 호출하면 생성자가 됩니다.

새 키워드 호출

New 키워드는 함수를 호출할 때 사용되는데, New는 정확히 어떤 일을 할까요? New를 사용하는 것과 사용하지 않는 것의 차이점은 무엇입니까? 다음 예제를 다시 보면

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name); 
 }; 
 console.log(this);
} 
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

New를 사용하여 함수를 호출할 때 요점이 달라진다는 것을 알 수 있습니다. 사실 New는 아래와 같은 일을 주로 하는데, 아래에 적힌 내용은 일반적인 동작일 뿐 내부 소스코드는 아닙니다.

function CreatePerson(name){ 
 var obj = {}; //声明一个空对象obj 
 obj._proto_= CreatePerson.prototype;
 //把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法 ，这里原型先知道结论，下面会讲。
 CreatePerson.apply(obj); //用apply方法让this指向obj对象
 this.name = name; //obj对象添加属性，方法
 this.showName = function(){ 
  alert(this.name);
  }; 
 return obj;//返回这个对象
}

함수 구성 패턴의 문제점:

alert(p1.showName==p2.showName);//false

단점: 이 두 객체가 새로 생성될 때마다 시스템은 각각 새로운 메모리를 생성한다는 것을 알 수 있습니다. 이 두 객체는 ​​자체 토지를 가지고 있지만 기능이 동일하고 아직 공유되지 않았으며 이는 확실히 우리가 원하는 것이 아닙니다. 그래서 다음 메소드인 프로토타입 + 구성 모드가 있습니다.

4 프로토타입 + 구성 모드

프로토타입: 각 함수에는 프로토타입 속성이 있는데, 이는 프로토타입 객체라고도 불리는 객체입니다. (그러나 프로토타입 객체는 우리가 작성한 속성과 메소드뿐만 아니라 아래에서 소개할 다른 속성도 갖습니다.) 이 함수를 통해 생성된 인스턴스 객체는 이 프로토타입 객체 속성 아래의 메소드와 메소드를 공유할 수 있습니다. 그래서 함수의 프로토타입 아래에 공유하고 싶은 것들을 넣기만 하면 되고, 공유하고 싶지 않은 것들은 생성자를 통해서 생성할 수 있습니다.
밤나무를 보세요(프로토타입 + 구성)

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

이 테스트는 showName() 메서드가 공유되어 있음을 알 수 있으며 이는 더 나아가 참조 관계가 있음을 의미합니다. 이는 p1의 showName을 변경하면 p2의 showName에도 영향을 미친다는 의미입니다.

위 내용은 JavaScript 객체 생성 방법 및 생성자 패턴 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!