JavaScript의 객체와 프로토타입 (1)

팩토리 패턴

우리는 객체를 생성하기 위해 다음 코드를 사용할 수 있다는 것을 알고 있습니다.

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'

이러한 방식으로 객체를 생성하는 것은 비교적 간단하고 직관적이며, 또한 JavaScript 유형입니다. 객체를 생성하는 가장 기본적인 방법입니다. 하지만 문제가 있습니다. 여러 객체를 생성해야 한다면 코드를 많이 반복해서 작성해야 합니다. 예를 들어 user1이라는 객체를 하나 더 생성하려면 위의 코드를 다시 작성해야 하는데, 이는 실제 개발 과정에서는 적합하지 않습니다.

이 문제를 해결하기 위해 팩토리 패턴이라는 방법을 사용할 수 있습니다. 이 방법은 중복 코드를 많이 생성하는 객체를 인스턴스화하는 문제를 해결하는 것입니다.

function create(name, age) {
　　var obj = new Object(); 
　　obj.name = name; 
　　obj.age = age;
　　obj.run = function () {
　　　　return this.name +' '+ this.age;
　　};
　　return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());

위의 코드를 보면 팩토리 패턴이 인스턴스화 중 대량의 코드 중복 문제를 해결하지만 또 다른 문제, 즉 식별 문제가 발생한다는 것을 알 수 있습니다. 어떤 개체가 인스턴스입니까? 예를 들어

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true

위의 코드는 box1이 객체임을 나타내지만 어떤 객체가 생성되었는지는 알 수 없습니다.

2. 생성자(Constructor Method)

위의 문제를 해결하기 위해 생성자(Constructor) 메소드를 이용하여 객체를 생성할 수 있습니다. 생성자와 일반 함수의 유일한 차이점은 호출 방식입니다. 그러나 생성자도 함수입니다.

function User(name, age) { //构造函数模式
　　this.name = name;
　　this.age = age;
　　this.run = function () {
　　　　return this.name + ' '+this.age; 　　};
}

객체를 생성할 때 new 연산자를 사용하면 됩니다.

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);

이제 user1 또는 user2가 User에 속하는지 여부를 감지할 수 있습니다.

alert(user1 instanceof User);//true　

생성자 방식을 사용하면 인스턴스화 반복 문제를 해결할 수 있을 뿐만 아니라 객체 인식 문제도 해결함을 알 수 있다. .

생성자를 사용하는 과정은 다음과 같습니다.

1. new 생성자()가 실행되면 백그라운드에서 new Object()가 실행됩니다. 🎜>

　2. 생성자의 범위를 새 객체에 부여합니다.

　3. 생성자에서 코드를 실행합니다.

　4. 백그라운드에서 직접 새 개체를 반환합니다.

다음으로 생성자 내부의 함수 문제를 살펴보겠습니다.

alert(user1.run==user2.run);//结果返回的是false

명령문을 실행하면 결과는 false입니다. 이는 해당 메소드가 실제로 참조 주소임을 의미합니다. 여러 개체를 반복적으로 생성하면 각 개체의 메서드가 메모리에 새로운 공간을 열어 더 많은 공간을 낭비하게 됩니다. 이 문제를 해결하려면 인스턴스 속성이나 메서드 공유를 사용해야 합니다. 다음 기사에서 이 문제를 해결하는 방법에 대해 계속 논의하겠습니다.

위 내용은 JavaScript의 객체와 프로토타입 내용입니다(1). 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!