집 > 기사 > 웹 프론트엔드 > ES6의 Object.ass() 메소드

ES6의 Object.ass() 메소드

小云云원래의: 2018-02-03 13:32:571766검색

이 글에서는 객체를 병합하고, 소스 객체(source)의 열거 가능한 모든 속성을 대상 객체(target)에 복사하는 데 Object.asset 메소드가 사용된다는 점을 주로 알려드립니다. 다음 글에서는 주로 ES6 Friends에 대해 소개합니다. 새로 추가된 Object.ass() 메소드에 대한 정보가 필요하므로 이를 참조하면 모든 사람에게 도움이 되기를 바랍니다.

머리말

객체 A의 속성을 객체 B에 복사하는 것은 JavaScript 프로그래밍에서 매우 일반적인 작업입니다. 다음 글에서는 객체 복사에 사용할 수 있는 ES6의 Object.sign() 속성을 소개합니다.

JavaScript 생태계에서 객체 복사에는 확장이라는 또 다른 용어가 있습니다. 다음은 두 개의 JS 라이브러리에서 제공하는 확장 인터페이스입니다.

Prototype: Object.extend(destination, source)

Underscore.js: _.extend(destination, *sources)

Object.sign() 소개

ES6은 객체의 속성을 병합/복사하기 위한 Object.Assign()을 제공합니다.

Object.assign(target, source_1, ..., source_n)

대상 개체를 수정한 다음 반환합니다. 먼저 source_1 개체의 열거 가능한 모든 속성을 대상에 복사한 다음 source_1 등의 속성을 순서대로 복사합니다.

1. 속성 이름은 문자열 또는 기호일 수 있습니다.

ES6에서 객체의 속성 이름은 문자열 또는 기호일 수 있습니다. Symbol 값은 고유하기 때문에 Symbol이 객체의 속성 이름으로 사용될 때 동일한 이름을 가진 속성이 나타나지 않음이 보장됩니다. 객체 속성 이름이 문자열 또는 기호인 경우 Object.ass()는 두 가지를 모두 지원합니다.

2. 속성 복사는 할당을 통해 구현됩니다.

대상 객체의 속성은 복사를 통해 생성됩니다. 즉, 대상에 setters 메서드가 있으면 해당 속성이 호출됩니다.

또 다른 해결책은 정의를 통해 구현하는 것입니다. 그러면 새로운 자체 속성을 생성하고 setters 메서드를 호출하지 않습니다. 실제로 Object.sign() 제안의 다른 버전에서는 이 메서드를 사용합니다. 그러나 이 제안은 ES6에서 거부되었으며 이후 버전에서 다시 고려될 수 있습니다.

Object.sign() 사용 예

1. 객체 속성 초기화

생성자는 객체의 속성을 초기화하는 역할을 합니다. 일반적으로 속성 이름을 여러 번 반복해야 합니다. 샘플 코드의 생성자에서는 x와 y가 모두 두 번 반복됩니다.

class Point
{
 constructor(x, y)
 {
  this.x = x;
  this.y = y;
 }
}

가능하다면 모든 중복성을 생략하는 것이 개인적으로 선호합니다. (실제로 CoffeeScript와 TypeScript에는 생성자에서 중복된 속성 이름 문제를 해결하는 구문이 있습니다.):

class Point
{
 constructor(this.x, this.y){}
}

최소한 Object.sign()은 일부 중복을 줄이는 데 도움이 될 수 있습니다.

class Point
{
 constructor(x, y)
 {
  Object.assign(this, { x, y });
 }
}

ES6에서는 { x, y }는 { x: x, y: y }의 약어입니다.

2. 객체에 메서드 추가

ECMAScript 5에서는 함수 표현식을 사용하여 객체에 메서드를 추가합니다.

ES5에서는 객체의 새 메서드를 정의하려면 function 키워드를 사용해야 합니다.

MyClass.prototype.foo = function(arg1, arg2)
{
 //...
};

ES6에서는 객체 메소드 정의가 더 간결하며 function 키워드를 사용할 필요가 없습니다. 이때 Object.ass()를 사용하여 객체에 새 메소드를 추가할 수 있습니다:

Object.assign(MyClass.prototype,
{
 foo(arg1, arg2)
 {
  //...
 }
});

3. 객체 복사

Object.sign()을 사용하여 프로토타입을 포함하여 객체 전체를 복사합니다

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

만 자체 속성 복사:

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({}, obj);

console.log(copy) // 输出{x:1}

ES6의 Object.ass() 메소드

관련 기사