>웹 프론트엔드 >프런트엔드 Q&A >JavaScript 생성자 란 무엇입니까?

JavaScript 생성자 란 무엇입니까?

WBOY
WBOY원래의
2022-01-19 14:32:052286검색

JavaScript에서 생성자는 메모리가 할당된 후 새 객체를 초기화하는 데 사용되는 특수 함수입니다. 객체 생성자는 객체가 처음 생성될 때 매개변수를 전달받아 사용됩니다. 멤버 속성 및 메서드에 값을 할당하는 데 사용됩니다.

JavaScript 생성자 란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript 생성자란 무엇입니까

객체 지향 프로그래밍에서 생성자는 객체의 메모리를 할당한 후 새로 생성된 객체를 초기화하는 데 사용되는 특수 함수입니다. JavaScript에서는 모든 것이 객체입니다. 객체 생성자는 특수한 유형의 객체를 생성하는 데 사용됩니다. 먼저 사용할 객체를 준비합니다. 둘째, 객체가 처음 생성될 때 멤버 속성과 메서드에 값을 할당하기 위한 매개변수를 받습니다.

객체 생성

객체를 생성하는 세 가지 기본 방법:

var newObject = {};
// or
var newObject = Object.create( null );
// or
var newObject = new Object();

객체 생성자가 특정 값에 대한 객체 래퍼를 생성하거나 값이 전달되지 않으면 빈 객체를 생성하여 반환합니다.

객체에 키-값 쌍을 할당하는 네 가지 방법:

// ECMAScript 3 兼容形式
// 1. “点号”法
// 设置属性
newObject.someKey = "Hello World";
// 获取属性
var key = newObject.someKey;
// 2. “方括号”法
// 设置属性
newObject["someKey"] = "Hello World";
// 获取属性
var key = newObject["someKey"];
// ECMAScript 5 仅兼容性形式
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty方式
// 设置属性
Object.defineProperty( newObject, "someKey", {
    value: "for more control of the property's behavior",
    writable: true,
    enumerable: true,
    configurable: true
});
// 如果上面的方式你感到难以阅读,可以简短的写成下面这样:
var defineProp = function ( obj, key, value ){
    var config = {
        value
    }
  Object.defineProperty( obj, key, config );
};
// 为了使用它,我们要创建一个“person”对象
var person = Object.create( null );
// 用属性构造对象
defineProp( person, "car",  "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 还可以创建一个继承于Person的赛车司机
var driver = Object.create( person );
// 设置司机的属性
defineProp(driver, "topSpeed", "100mph");
// 获取继承的属性 (1981)
console.log( driver.dateOfBirth );
// 获取我们设置的属性 (100mph)
console.log( driver.topSpeed );
// 4. Object.defineProperties方式
// 设置属性
Object.defineProperties( newObject, {
  "someKey": { 
    value: "Hello World", 
    writable: true 
  },
  "anotherKey": { 
    value: "Foo bar", 
    writable: false 
  } 
});
// 3和4中的读取属行可用1和2中的任意一种

기본 생성자

앞서 살펴본 것처럼 JavaScript는 클래스 개념을 지원하지 않지만 객체 생성자 기능을 사용하는 방법이 있습니다. 이 함수를 호출하기 위해 new 키워드를 사용하면 JavaScript에서 이 함수를 생성자로 사용하여 자체적으로 정의된 멤버로 객체를 초기화할 수 있습니다.

이 생성자 내에서 this 키워드는 방금 생성된 개체를 나타냅니다. 객체 생성으로 돌아가서 기본 생성자는 다음과 같습니다.

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// 使用:
// 我们可以实例化一个Car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 打开浏览器控制台查看这些对象toString()方法的输出值
console.log( civic.toString() );
console.log( mondeo.toString() );

위는 생성자 패턴의 간단한 버전이지만 두 가지 문제가 있습니다.

상속하기 어렵습니다

각 Car 생성자가 생성한 객체에는, toString()과 같은 함수가 재정의되었습니다

이것은 별로 좋지 않습니다. 이상적인 상황은 모든 Car 유형 객체가 동일한 함수를 참조해야 한다는 것입니다

"프로토타입(프로토타입)" 생성자를 사용하세요

JavaScript의 함수에는 프로토타입 속성. 객체를 생성하기 위해 JavaScript 생성자를 호출하면 생성자 프로토타입의 속성에 액세스하여 생성된 객체에 대해 호출할 수 있습니다

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// 注意这里我们使用 Object.prototype.newMethod 而不是 Object.prototype ,以避免我们重新定义原型对象
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 使用:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );

위 코드를 통해 단일 toString() 인스턴스가 모든 Car 객체에 의해 공유됩니다.

관련 권장 사항: javascript 학습 튜토리얼

위 내용은 JavaScript 생성자 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.