객체지향 자바스크립트를 배우고 객체를 생성하는 9가지 방법을 마스터하세요_자바스크립트 기술

이 글에서는 참고용으로 JavaScript로 객체를 생성하는 9가지 방법을 공유합니다.

【1】객체 생성자 사용
[단점] 동일한 인터페이스를 사용하여 많은 객체를 생성하면 중복 코드가 많이 생성됩니다

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
  　　alert(this.name);
　　}

【2】객체 리터럴을 사용하세요
[단점] 동일한 인터페이스를 사용하여 많은 객체를 생성하면 중복 코드가 많이 생성됩니다

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};

【3】팩토리 패턴: 특정 객체를 생성하는 과정을 추상화합니다. ECMAScript에서는 클래스를 생성할 수 없다는 점을 고려하여 개발자는 객체 생성 세부 사항을 특정 인터페이스로 캡슐화하는 기능을 개발했습니다.
[단점] 유사한 객체를 여러개 생성하는 문제는 해결되나, 객체 인식 문제는 해결되지 않습니다

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');

【4】생성자 모드: 명시적으로 객체가 생성되지 않고 속성과 메서드가 이 객체에 직접 할당되며 반환 문이 없습니다
[단점] 각 메소드는 각 인스턴스에서 다시 생성되어야 합니다

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");

【4.1】생성자 확장 모드: 생성자 외부에서 함수 정의를 전달
[단점 1] 전역 범위에 정의된 함수는 실제로 특정 개체에 의해서만 호출될 수 있으므로 전역 범위를 이름에 걸맞게 만드는 것이 다소 가치가 없습니다
[단점 2] 객체가 많은 메소드를 정의해야 하는 경우, 이 사용자 정의 참조 유형에는 캡슐화가 전혀 없습니다

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);

【5】프로토타입 패턴: 우리가 만드는 각 함수에는 프로토타입 속성이 있습니다. 이 속성은 객체를 가리키는 포인터이며, 이 객체의 목적은 특정 유형의 모든 인스턴스가 공유할 수 있는 정보를 포함하는 것입니다. 속성 및 메서드. 말 그대로 이해하면 프로토타입은 생성자를 호출하여 생성된 객체 인스턴스의 프로토타입 객체입니다

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true

【5.1】간단한 프로토타입 모드: 불필요한 입력을 줄이고 프로토타입의 기능을 시각적으로 더 잘 캡슐화하기 위해 모든 속성과 메서드를 포함하는 객체 리터럴로 전체 프로토타입 객체를 다시 작성합니다.
[단점] 이 방법으로 생성자 속성을 재설정하면 [[Enumerable]] 속성이 true로 설정됩니다. 기본 생성자 속성은 기본적으로 열거 가능하지 않습니다.

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};

【5.2】열거 가능한 문제를 해결하기 위한 프로토타입 패턴

function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});

[프로토타입 패턴 단점 1] 프로토타입 객체를 재정의하면 기존 프로토타입과 기존 객체 인스턴스 간의 연결이 끊어지고 여전히 원본 프로토타입을 참조합니다.

function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error

[프로토타입 패턴 단점 2] 참조형 속성의 공유 문제가 두드러진다

function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

【6】결합 패턴: 생성자 패턴과 프로토타입 패턴을 결합하는 것은 사용자 정의 유형을 만드는 가장 일반적인 방법입니다. 생성자 패턴은 인스턴스 속성을 정의하는 데 사용되며 프로토타입 패턴은 메서드 및 공유 속성을 정의하는 데 사용됩니다. 이 혼합 모드는 생성자에 매개변수 전달도 지원하며 참조 유형을 정의하는 데 사용되는 기본 모드입니다

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

【7】동적 프로토타입 모드: 생성자에 모든 정보를 캡슐화하고 생성자에서 프로토타입을 초기화합니다(필요한 경우에만). 동시에 생성자와 프로토타입을 모두 사용하는 이점을 유지합니다. 즉, 기존 메소드가 유효한지 확인하여 프로토타입의 초기화 여부를 결정할 수 있습니다.
[참고] 동적 프로토타입 모드를 사용할 때 객체 리터럴을 사용하여 프로토타입을 재정의할 수 없습니다. 인스턴스가 이미 생성된 상태에서 프로토타입을 재정의하면 기존 인스턴스와 새 인스턴스 간의 연결이 끊어집니다

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

[8] 기생 생성자 패턴: 객체를 생성하는 코드만 캡슐화하고 새로 생성된 객체를 반환하는 함수를 생성합니다.

function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

【기생충 생성자 패턴 적용】추가 메서드를 사용하여 특수 배열을 만듭니다. Array 생성자는 직접 수정할 수 없으므로 이 패턴을 사용하면 됩니다

function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"  

[9] 안전한 생성자 패턴: 소위 안전한 객체는 공용 속성이 없고 해당 메서드가 이를 참조하지 않는 객체를 나타냅니다. 안정적인 객체는 일부 보안 환경(이것과 새로운 것의 사용을 금지함)에서 사용하거나 다른 응용 프로그램에서 데이터가 수정되는 것을 방지하는 데 가장 적합합니다.

function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

위 내용은 JavaScript로 객체를 생성하는 9가지 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.