JavaScript로 객체를 생성하는 7가지 방법(요약, 필독)

이 글에서는 주로 JavaScript에서 객체를 생성하는 7가지 방법을 소개합니다. 구체적인 작업 단계는 아래에서 자세한 설명을 확인하실 수 있습니다. 그것에.

JavaScript에서 객체를 생성하는 방법은 여러 가지가 있습니다. 객체 생성자나 객체 리터럴을 통해 단일 객체를 생성할 수도 있습니다. 분명히 이 두 가지 방법은 반복되는 코드를 많이 생성하므로 대량 생산에는 적합하지 않습니다. 다음으로, 객체를 생성하는 7가지 매우 고전적인 방법을 소개하겠습니다. 각 방법에는 고유한 장점과 단점이 있습니다.

팩토리 패턴

function createPerson(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = createPerson(‘Jiang', ‘student')
var person2 = createPerson(‘X', ‘Doctor')

이 팩토리 함수는 셀 수 없이 호출할 수 있으며, 매번 호출됩니다. 속성과 메소드가 있는 두 개의 객체가 포함된 메시지를 반환합니다

팩토리 패턴은 유사한 객체를 여러 개 생성하는 문제를 해결하지만 객체 식별 문제, 즉 객체의 유형을 알 수 없는 문제는 해결하지 못합니다

생성자 패턴

function Person(name, job) {
 this.name = name
 this.job = job
 this.sayName = function() {
  console.log(this.name)
 }
}
var person1 = new Person(‘Jiang', ‘student')
var person2 = new Person(‘X', ‘Doctor')

이 생성자를 호출하려면 new를 사용하세요.

새 객체를 생성합니다. 실행됩니다. [[프로토타입]] link
이 새 객체는 함수 호출의 This
에 바인딩됩니다.
이 메서드를 사용하여 객체를 생성하면 객체 유형을 감지할 수 있습니다

person1 인스턴스of Object // true

person1 인스턴스of Person //true
하지만 생성자를 사용하여 객체를 생성하려면 각 메소드가 각 인스턴스에 있어야 합니다.

프로토타입 모드

function Person() {
}
Person.prototype.name = ‘Jiang'
Person.prototype.job = ‘student'
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()

에서 다시 생성하세요. 프로토타입 객체에 직접 정보를 추가하세요. 프로토타입을 사용하면 생성자에서 객체 인스턴스 정보를 정의하지 않고도 모든 인스턴스 객체가 포함된 속성과 메서드를 공유할 수 있다는 장점이 있습니다.

Prototype은 매우 중요한 개념으로, proto와 프로토타입의 관계와 차이점을 이해하는 글에서 자세히 설명되어 있습니다.

간단한 작성 방법

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}
var person1 = new Person()

Person.prototype을 1과 동일하게 설정 객체 리터럴 형식으로 생성된 객체이지만 이로 인해 .constructor가 더 이상 Person을 가리키지 않게 됩니다.

이 방법을 사용하면 기본 Person.prototype 객체가 완전히 다시 작성되므로 .constructor는 여기에 존재하지 않습니다

Person.prototype.constructor === Person // false

이 속성이 필요한 경우 수동으로 추가할 수 있습니다

function Person() {
}
Person.prototype = {
 constructor：Person
 name: ‘jiang',
 job: ‘student',
 sayName: function() {
  console.log(this.name)
 }
}

하지만 이렇게 하면 됩니다 메서드가 아직 충분하지 않습니다. 생성자 속성은 기본적으로 열거 가능하지 않습니다. 따라서 가능하다면 Object.defineProperty 메서드

Object.defineProperty(Person.prototype, ‘constructor', {
 enumerable: false,
 value: Person
})

단점

프로토타입을 사용하면 모든 속성이 공유된다는 점은 큰 장점이지만 몇 가지 단점도 가져올 것입니다.

프로토타입에서 모두 속성 인스턴스는 많은 인스턴스에 의해 공유되므로 기능에 매우 적합합니다. 기본 값을 포함하는 속성은 거의 불가능합니다. 인스턴스 속성은 프로토타입 속성을 보호할 수 있습니다. 그러나 참조 유형 값을 사용하면 문제가 발생합니다

function Person() {
}
Person.prototype = {
 name: ‘jiang',
 friends: [‘Shelby', ‘Court']
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) //[“Shelby”, “Court”, “Van”]
console.log(person1.friends === person2.friends) // true

인스턴스 person1과 person2가 동일한 프로토타입을 가리키면 person2

에도 반영됩니다. 생성자 패턴과 프로토타입 패턴 결합

이는 사용자 정의 유형을 생성하는 데 가장 널리 사용되고 가장 널리 알려진 방법입니다. 위 패턴의 단점을 해결할 수 있습니다

이 패턴을 사용하면 각 인스턴스가 인스턴스 속성의 자체 복사본을 가질 수 있지만 동시에 메서드에 대한 참조를 공유할 수 있습니다

이 경우 인스턴스 속성이 수정되더라도 참조 유형의 값은 다른 인스턴스의 속성 값에 영향을 미치지 않습니다

function Person(name) {
 this.name = name
 this.friends = [‘Shelby', ‘Court']
}
Person.prototype.sayName = function() {
 console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push(‘Van')
console.log(person1.friends) //[“Shelby”, “Court”, “Van”]
console.log(person2.friends) // [“Shelby”, “Court”]
console.log(person1.friends === person2.friends) //false

동적 프로토타입 모드

동적 프로토타입 모드는 초기화 중에 모든 정보를 캡슐화합니다. 특정 should를 감지하여 프로토타입을 초기화해야 하는지 여부를 결정하는 데 기존 메소드가 유효합니다

function Person(name, job) {
 // 属性
 this.name = name
 this.job = job

 // 方法
 if(typeof this.sayName !== ‘function') {
  Person.prototype.sayName = function() {
    console.log(this.name)
  }
 }

}
var person1 = new Person(‘Jiang', ‘Student')
person1.sayName()

sayName 메소드가 존재하지 않는 경우에만 프로토타입에 추가됩니다. 이 코드는 생성자가 처음 호출될 때만 실행됩니다.

이후 프로토타입은 초기화되었으므로 수정할 필요가 없습니다

여기에서 프로토타입에 대한 수정 사항은 모든 인스턴스에 즉시 반영될 수 있습니다.

둘째, if 문은 이후에 존재해야 하는 모든 속성을 확인할 수 있습니다. 따라서 모든 속성과 메서드를 확인하기 위해 여러 if 문을 사용하는 대신 하나만 확인하세요.

Parasite Constructor Pattern

이 패턴의 기본 아이디어는 기능이 다음과 같은 함수를 만드는 것입니다. 단지 객체를 생성하는 코드를 캡슐화한 다음 새로 생성된 객체를 반환합니다

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(this.name)
 }
 return o
}
var person1 = new Person(‘Jiang', ‘student')
person1.sayName()

这个模式，除了使用new操作符并把使用的包装函数叫做构造函数之外，和工厂模式几乎一样

构造函数如果不返回对象，默认也会返回一个新的对象，通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值

稳妥构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。

稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用

稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数

function Person(name, job) {
 var o = new Object()
 o.name = name
 o.job = job
 o.sayName = function() {
  console.log(name)
 }
 return o
}
var person1 = Person(‘Jiang', ‘student')
person1.sayName()

和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS进行E-mail地址格式验证代码

Vue.js表单控件使用总结

Vue.js配置登录表单代码步骤剖析

위 내용은 JavaScript로 객체를 생성하는 7가지 방법(요약, 필독)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!