JavaScript에서 객체를 생성하는 네 가지 방법

이 글은 주로 JavaScript로 객체를 생성하는 네 가지 방법을 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

Keywords

Object.create; (); {}

Background

이 단락은 읽지 않고 건너뛸 수 있습니다...
일상적으로 객체를 생성하는 가장 일반적인 방법은 {}를 사용하여 직접 생성하는 것입니다. 여기서 메서드와 속성은 다음과 같습니다. 직접 작성하는 거긴 한데, 한번은 이렇게 만든 객체를 다른 js 파일에 작성했는데, HTML에서 어떻게 쓰는지 몰라서 오랜만에 바이두에서 Object.create 메소드를 사용하게 되었어요. 새로운 함정이 발생할 것으로 예상하지 않았으므로 이 방법은 ES5 이상만 지원합니다. 하위 버전에서는 호환성을 처리해야 합니다. 이제 향후 참조를 위해 이러한 개체 생성 방법을 정리하겠습니다.

메서드 1: Object.create

1. 구문

var newObj = Object.create(proto, propertyObject);
매개변수:
proto: 새로 ​​생성된 객체의 프로토타입 객체
propertyObject: 새로 생성된 객체의 열거 가능한 속성 Object.defineProperty()
의 두 번째 매개 변수에 해당하는 객체 생성 반환 값: 새로 생성된 객체

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};

var bb = Object.create(aa, {
  // foo会成为所创建对象的数据属性
  foo: { 
    writable:true,
    configurable:true,
    value: "hello" 
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

결과는 다음과 같습니다. bb가 액세스할 수 있는 속성은 다음과 같습니다.
(1) 자체 foo 및 bar
(2) aa valA 및 fnA
And, bb.__proto__ == aa

2.polyfill

이 방법을 지원하지 않는 ES5 이하 브라우저의 경우 호환성을 위해 다음 방법을 사용할 수 있습니다. 이 방법도 Object.create 폴리필입니다.

if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
      if (typeof proto !== 'object' && typeof proto !== 'function') {
          throw new TypeError('Object prototype may only be an Object: ' + proto);
      } else if (proto === null) {
          throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
      }
      if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
      function F() {}
      F.prototype = proto;
      return new F();
  };
}

간단히 말하면 한 문장을 기억하세요. 새 객체의 프로토타입은 proto이고, proto는 Object.create의 첫 번째 매개변수입니다

3 Easter egg

두 장의 사진이 첨부되어 있으니 유용할 것 같습니다. 锵锵锵~~


좋아요, 그림을 열 수 없는 경우를 대비해 그림 1에서는 ES5의 새로운 객체 메소드에 create&keys, DefineProperty, String 메소드에 Trim 및 Array 메소드가 포함되어 있음을 보여줍니다. indexOf, filter&map, foreach가 있습니다.
그림 2는 ES5를 지원하는 브라우저입니다. Chrome은 이를 잘 지원하지만 IE는 IE11에서만 더 잘 지원할 수 있습니다.

방법 2: 새 생성자

이 방법은 특히 상속, 더 나은 확장성 및 확장성을 위해 매우 일반적으로 사용됩니다. 캡슐화

function Person(){
    this.name = '****';
    this.age = 11,
    this.getAge = function(){}
}

var p = new Person();

를 사용하여

{
    name: '****';
    age: 11,
    getAge: function(){},
    __proto__: Object
}
pp.constructor == Person  ==> **true**
Person.__proto__ == Function.prototype   ==> **true**

인 p를 인쇄할 수 있습니다. 방법 3: new Object()

1

var obj = new Object();

와 동일한 빈 개체

var obj = {};

를 만들고 속성 확장을 계속할 수 있습니다. and method

2.

var aa = {
    valA:1, 
    fnA: function(){console.log(this.valA)}
};
var oo = new Object(aa);

결과는 다음과 같습니다.

oo === aa    ==> true
oo.valA = 2;
console.log(aa.valA)   ==> 2

oo는 객체의 직접 복사본과 마찬가지로 aa의 얕은 복사본이라는 뜻입니다.왜 이렇게 테스트하고 싶은지 모르겠습니다. . . .

이 메소드는 new Person과 유사합니다.
Object.__proto__ == Function.protoType
Person.__proto__ == Function.protoType
Object는 객체의 생성자이고 해당 프로토타입 객체도 Function Prototype

Method입니다. 4: {}

이 메서드는 객체 리터럴을 사용하여 객체 생성이라고 합니다. 이것은 제가 자주 사용하는 가장 간단한 방법이자 방법입니다. 목적은 많은 수의 객체 프로세스를 포함하는 객체 생성을 단순화하는 것입니다. .

var person = {
   name: '*****',
   age: 11,
   getAge: function(){
    return this.age;
   },
   setAge: function(newAge){
    this.age = newAge;
   } 
}
调用时：
person.name
person['name']
扩展属性时：
person.hairColor = 'black';
person.getName = function(){};

누군가 테스트를 했습니다. 이 방법은 객체를 생성하기 위해 new Object()를 사용하는 것보다 빠릅니다. 왜냐하면 {}가 즉시 평가되고 new Object()는 메서드이기 때문에 포함되기 때문입니다. 메소드가 프로토타입 내에서 탐색되면 메소드 호출에 필요한 스택 정보가 생성되므로 메소드 호출이 완료된 후에는 스택 정보가 해제되어야 하므로 속도가 느려집니다.

요약

다음은 객체를 생성하는 데 일반적으로 사용되는 방법입니다. 방법 4와 방법 2는 상속 등에 자주 사용됩니다. ES5의 문제점은 일부 새로운 객체의 열거 가능한 속성을 확장할 수 있다는 것입니다. 저는 항상 이것이 defineProperty와 어느 정도 관련이 있다고 생각하지만 아직은 잘 이해가 되지 않습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

브라우저와 NodeJS의 EventLoop 및 일부 메커니즘 간의 유사점과 차이점

javascript를 사용하여 브라우저 유형 결정

위 내용은 JavaScript에서 객체를 생성하는 네 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!