서문
Javascript를 사용하여 객체를 생성하는 방법은 여러 가지가 있습니다. 네 가지 방법을 나열하고 각 방법의 장점과 단점을 나열하여 누구나 선택하여 사용할 수 있도록 합시다.
팩토리 패턴
function createPerson(name, age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj; //一定要返回，否则打印undefined:undefined
}
var person1 = new createPerson('Young',18);
console.log(person1.name + ':' + person1.age);장점: 팩토리 패턴은 여러 유사한 객체를 생성하는 문제를 해결할 수 있습니다
단점: 객체 인식 문제를 해결하지 못함(객체의 유형을 결정하는 방법)
생성자패턴
function Person(name,age){
this.name = name;
this.age = age;
}
var person1 = new Person('Young',18);
console.log(person1.name + ':' + person1.age);장단점을 이야기하기 전에 먼저 자신에 대한 이야기를 좀 하겠습니다
생성자를 함수로 사용하기
function Person(name,age){
this.name=name;
this.age=age;
this.sayName=function(){
return this.name;
}
}
//当做构造函数使用
var person1 = new Person('Young', 18);
person1.sayName();
console.log(person1.name + ':' + person1.age);
//当做普通函数调用
Person('Wind', 18);
console.log(window.sayName());
//在另一个作用域中调用
var obj = new Object();
Person.call(obj, 'bird', 100);
console.log(obj.sayName()); 생성자 장점과 단점
장점: 인스턴스를 특정 유형으로 식별할 수 있습니다.
단점: 모두 각 메서드는 각 인스턴스에서 다시 생성되어야 합니다. 물론 다음과 같이 변경할 수도 있습니다.
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName(){
return this.name;
}
가 전역 함수를 호출하도록 변경되었으므로 캡슐화가 전혀 없습니다. . . 다음 프로토타입 패턴은 이러한 단점을 보완할 수 있습니다
프로토타입 패턴
function Person(){
}
Person.prototype.name = 'Young';
Person.prototype.age = 18;
Person.prototype.sayName = function(){
return this.name;
}
var person1 = new Person();
console.log(person1.sayName());
var person2 = new Person();
console.log(person1.sayName());
alert(person1.sayName === person2.sayName);
//person1和person2访问的是同一组属性的同一个sayName()函数에 저장된 객체 인스턴스를 통해 액세스할 수 있지만 프로토타입 값이지만 프로토타입의 값은 인스턴스 객체
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
alert(person1.sayName==person2.sayName);//true를 통해 재정의될 수 없습니다.
person1.sayName
를 호출하면 파서가 먼저 인스턴스를 결정합니다. . person1에
sayName
속성이 있습니까? 그렇다면 자체 속성을 호출하세요. 그렇지 않으면 프로토타입에서 속성을 검색하세요.
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var person1=new Person();
var person2=new Person();
person1.name='Wind';
console.log(person1.sayName());//Wind
console.log(person2.sayName());//Young
delete person1.name;
console.log(person1.sayName());//Young
console.log(person2.sayName());//Young프로토타입이나 인스턴스에 속성이 있는지 확인하려면
hasOwnPropertyType
메서드를 사용하세요. 이 메서드는 Object에서 상속됩니다. 프로토타입은 거짓입니다.
열거형 객체의 인스턴스 속성은
Object.keys()
메서드를 사용합니다
function Person(){
}
Person.prototype.name='Young';
Person.prototype.age=18;
Person.prototype.sayName=function(){
return this.name;
}
var keys=Object.keys(Person.prototype);
console.log(keys);//["name", "age", "sayName"]프로토타입 패턴의 장점과 단점
장점: 모든 인스턴스에서 모든 메소드를 반복할 필요가 없습니다
단점: 프로토타입 패턴만 사용하는 사람은 거의 없습니다. . 문제는 자세히 나열되어 있습니다
function Person(){
}
Person.prototype={
constructor:Person,
name:'Young',
age:18,
friends:['Big','Pig'],
sayName:function(){
return this.name;
}
};
var p1=new Person();
var p2=new Person();
p1.friends.push('Mon');
console.log(p1.friends);//["Big", "Pig", "Mon"]
console.log(p2.friends);//["Big", "Pig", "Mon"]인스턴스는 일반적으로 고유한 속성을 가지고 있기 때문에 여기에
Person.prototype
에 넣습니다. p1 Modification과 같이 프로토타입을 포함한 전체 인스턴스가 수정되었습니다. 음, 생성자 패턴과 프로토타입 패턴을 조합하여 사용할 수 있습니다.
생성자 패턴과 프로토타입 패턴을 함께 사용하세요
function Person(name,age){
this.name=name;
this.age=age;
this.friends=['Big','Pig'];
}
Person.prototype={
sayName:function(){
return this.name;
}
};
var p1=new Person('Young',18);
var p2=new Person('Wind',78);
p1.friends.push('Raganya');
console.log(p1.friends);//["Big", "Pig", "Raganya"]
console.log(p2.friends);//["Big", "Pig"]
console.log(p1.friends==p2.friends);//false
console.log(p1.sayName==p2.sayName);//true이 패턴은 현재 사용자 정의 유형 방법을 만드는 데 가장 널리 사용되고 인식되는 패턴입니다. 참조 유형을 정의하는 데 사용되는 기본 모드입니다.
요약
위 내용은 Javascript에서 객체를 생성하는 네 가지 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
