Javascript에서 객체를 생성하는 네 가지 방법 분석

서문

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!