JS의 객체 글꼴 상세 정보

앞말

ES6 이전에는 js의 대상 글자 크기(대상 초기화기라고도 함)가 매우 기초적이었다.두 가지 유형의 속성을 정의할 수 있습니다.

키 값 대 {name1: value1}

가져오기 {get name () {...}및 설정기 {set name (val) {...}}의 속성 값을 계산합니다

var myObject = {
  myString: 'value 1',
  get myNumber() {
    return this._myNumber;
  },
  set myNumber(value) {
    this._myNumber = Number(value);
  },
};
myObject.myString; // => 'value 1'
myObject.myNumber = '15';
myObject.myNumber; // => 15

js는 원형을 바탕으로 하는 언어이기 때문에 모든 것이 대상이다.대상을 만들고, 원형을 설정하고, 접근할 때, 구성하기 쉬운 언어를 제공해야 한다.
대상을 정의하고 원형을 설정하는 것은 흔히 볼 수 있는 작업이다.가장 좋은 방법은 대상의 글자 크기에 직접 하나의 문장을 사용하여 원형을 설정하는 것이다.
불행하게도 글자 양의 한계성은 간단한 해결 방안으로 이 점을 실현하는 것을 허락하지 않는다.개체를 결합하여 사용해야 합니다.create () 와 객체 글꼴을 사용하여 원형을 설정합니다.

var myProto = {
  propertyExists: function(name) {
    return name in this;
  }
};

var myNumbers = Object.create(myProto);
myNumbers['arrat'] = [1, 6, 7];
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

나는 이런 해결 방안이 융통성이 없다고 생각한다.JS는 원형을 바탕으로 하는데 왜 원형으로 대상을 만드는 것이 그렇게 번거롭습니까?
다행히도 JS도 점점 완벽해지고 있다.JS의 많은 우울한 문제는 점차적으로 해결된다.
본고는 ES6가 상술한 문제를 어떻게 해결하고 추가 기능을 사용하여 대상의 글자 크기를 개선하는지 보여 준다.

대상 구조에 원형을 설정한다

방법의 성명

슈퍼 호출

속성 이름을 계산합니다

1. 객체 구조에 원형 설정

알다시피 기존 대상의 원형에 접근하는 방법 중 하나는 getter 속성 __proto__:

var myObject = {
  name: 'Hello World!',
};
myObject.__proto__; // => {}
myObject.__proto__.isPrototypeOf(myObject); // => true

myObject.__ proto__myObject의 원형 객체를 반환합니다.
object.__를proto__getter/setter로 사용합니다.대체 방법은 Object 사용을 고려해야 합니다.getPrototypeOf() 및 Object.setPrototypeOf().
ES6에서 __ 사용 가능proto__속성 이름으로 {__proto__:protoObject}에 원형을 설정합니다.
이어서 __를 사용합시다proto__속성은 개체를 초기화하고 위의 코드를 최적화합니다.

var myProto = {
  propertyExists: function(name) {
    return name in this;
  },
};
var myNumbers = {
  __proto__: myProto,
  array: [1, 6, 7],
};
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

myNumbers 대상은 특수 속성명 프로토콜과 원형 myProto를 사용합니다. 이번에는 한 문장으로 만듭니다. 위와 같이object가 필요하지 않습니다.create () 와 같은 추가 함수입니다.
보시다시피 __proto__인코딩을 하는 것은 매우 간단하다. 나는 줄곧 간단명료한 해결 방안을 좋아했다.
주제에서 벗어나게 말해.나는 이상하게도 간단하고 유연한 해결 방안은 대량의 작업과 설계가 필요하다고 생각한다.만약 해결 방안이 매우 간단하다면, 너는 설계하기가 매우 쉽다고 생각할 것이다.그러나 반대로도 마찬가지다.

그것을 간단명료하게 하려면 매우 복잡하다

그것을 복잡하고 이해하기 어렵게 만드는 것은 매우 쉽다

만약 어떤 것들이 너무 복잡하거나 사용하기 어려워 보인다면, 아마도 더욱 보완해야 할 것이다.

1.1 __proto__용법의 특수한 상황

__proto__보기에는 매우 간단해 보이니, 당신도 특수한 상황에 주의해야 합니다.
객체 글꼴에서만 __ 사용 가능proto__한 번, 그렇지 않으면 JS가 오류를 보고합니다.

var object = {
  __proto__: {
    toString: function() {
      return '[object Numbers]'
    }
  },
  numbers: [1, 5, 89],
  __proto__: {
    toString: function() {
      return '[object ArrayOfNumbers]'
    }
  }
};

위 예제의 객체 글꼴에 __ 두 번 사용proto__속성, 이것은 허용되지 않습니다.이 경우 오류가 발생합니다: SyntaxError: Duplicate __proto__ fields are not allowed in object literals.
JS 구속조건은 하나의 객체 또는 null로만 __proto__속성의 값입니다.원본 형식 (문자열, 숫자, 부울 값) 이나 undefined 형식을 사용하는 모든 형식은 무시되고 대상의 원형을 변경하지 않습니다.

var objUndefined = {
  __proto__: undefined,
};
Object.getPrototypeOf(objUndefined); // => {}
var objNumber = {
  __proto__: 15,
};
Object.getPrototypeOf(objNumber); // => {}

객체 글꼴은 undefined 및 숫자 15를 사용하여 __ 을 설정합니다.proto__값.객체나 null만 원형으로 사용할 수 있으므로 __proto__값은 무시되지만 objUndefined와 objNumber는 기본 원형을 가지고 있습니다. 순수한 JS 대상 {}입니다.
물론 기본 유형을 사용해 대상의 원형을 설정하는 것도 이상하다.
객체 글꼴에 계산 결과가 있는 경우'__proto__'{'_proto__']:protoObj} 문자열도 조심해야 합니다.이렇게 생성된 속성은 객체의 원형을 변경하지 않고 키'_ _ 만 사용합니다.proto__'소유한 속성 만들기

2. 맞춤법 정의

function 키워드와: 사칭 방식을 생략하기 위해 비교적 짧은 문법을 사용하여 대상 상량에서 방법을 설명할 수 있습니다.이것은 약어 방법의 정의라고 불린다.
이어서 우리는 간단명료한 방법으로 몇 가지 방법을 정의했다.

var collection = {
  items: [],
  add(item) {
    this.items.push(item);
  },
  get(index) {
    return this.items[index];
  },
};
collection.add(15);
collection.add(3);
collection.get(0); // => 15

좋은 점은 이런 방식으로 설명하는 방법이 함수로 명명되어 디버깅 목적에 매우 유용하다는 것이다.위의 예시에서 컬렉션을 실행합니다.add.name에서 함수 이름 "add"를 반환합니다.

3. 슈퍼의 사용

JS의 흥미로운 개선은 슈퍼 키워드를 원형 체인에서 계승된 속성에 접근하는 능력으로 사용하는 것이다.다음 예제를 참조하십시오.

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
numbers.sumElements(); // => 17

calc는numbers 대상의 원형입니다.numbers의sumElements 방법에서 슈퍼 키워드를 사용하여 원형 접근 방법:super를 사용할 수 있습니다.sumElements()
최종적으로 슈퍼는 대상의 원형 체인에서 계승된 속성에 접근하는 단축 방식이다.
앞의 예시에서calc.sumElements () 를 직접 실행하여 원형을 호출하면 오류가 발생합니다.그러나, 슈퍼.객체의 원형 체인에 액세스하기 때문에 sumElements()가 올바르게 호출됩니다.원형의 sumElements() 메서드에this를 사용하도록 합니다.numbers가 그룹에 정확하게 접근합니다.
슈퍼 존재는 계승된 속성이 사용될 것을 명확하게 나타낸다.

3.1 슈퍼 사용 제한

슈퍼는 대상의 글자 양의 약어 방법 정의에서만 사용할 수 있습니다.
일반 방법에서 {name: function () {}} 에 액세스하려고 하면 JS에서 오류가 발생합니다.

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements: function() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
// Throws SyntaxError: 'super' keyword unexpected here
numbers.sumElements();

메서드 sumElements는 하나의 속성으로 정의됩니다:sumElements: function () {...}.슈퍼는 약자 방법에서만 사용할 수 있기 때문에 이 상황에서 호출하면 Syntax Error:'super'keyword unexpected here를 던집니다.
이 제한은 대상의 글자 양에 영향을 주지 않는 성명 방식이다.문법이 비교적 짧기 때문에 일반적으로 간략한 방법으로 정의하는 것이 가장 좋다.

4. 속성 이름 계산

ES6 이전에 객체 초기화에는 일반적으로 정적 문자열인 문자 양의 형식이 사용됩니다.계산 이름이 있는 속성을 만들려면 속성 접근기를 사용해야 합니다.

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {};
object[prefix('number', 'pi')] = 3.14;
object[prefix('bool', 'false')] = false;
object; // => { number_pi: 3.14, bool_false: false }

물론 이런 속성을 정의하는 방식은 즐겁다.
이어서 간략한 방법으로 위의 예를 다 고친다.

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {
  [prefix('number', 'pi')]: 3.14,
  [prefix('bool', 'false')]: false,
};
object; // => { number_pi: 3.14, bool_false: false }

[prefix ('number','pi')] prefix ('number','pi') 표현식 (즉'number_pi') 을 계산하여 속성 이름을 설정합니다.
이에 따라 [prefix('bool','false')]는 두 번째 속성 이름을'bool_로 설정합니다false'.

4.1 symbol을 속성 이름으로 사용

symbol은 계산의 속성 이름으로도 사용할 수 있습니다.괄호에 포함시키기만 하면 됩니다: {[Symbol('name')]:'Prop value'}
예를 들어, 특수 속성 Symbol을 사용합니다.iterator는 대상 자체의 속성 이름을 교체합니다.다음 예제와 같습니다.

var object = {
   number1: 14,
   number2: 15,
   string1: 'hello',
   string2: 'world',
   [Symbol.iterator]: function *() {
     var own = Object.getOwnPropertyNames(this),
       prop;
     while(prop = own.pop()) {
       yield prop;
     }
   }
}
[...object]; // => ['number1', 'number2', 'string1', 'string2']

[Symbol.iterator]: function * () {} 객체의 자체 속성을 교체하는 데 사용할 속성을 정의합니다.확장 연산자 [...object] 는 교체기를 사용하여 자신의 속성 목록을 되돌려줍니다.

5. 나머지 및 확장 속성

나머지 속성은 할당 제거 후 남은 속성을 객체에서 수집할 수 있습니다.
다음 예제에서는 객체를 재구성한 후 나머지 속성을 수집합니다.

var object = {
  propA: 1,
  propB: 2,
  propC: 3,
};
let { propA, ...restObject } = object;
propA; // => 1
restObject; // => { propB: 2, propC: 3 }

확장 속성을 사용하면 소스 객체의 고유 속성을 객체 문자 면으로 복사할 수 있습니다.이 예제에서는 소스 객체에서 객체의 다른 속성으로 객체 글꼴을 수집합니다.

var source = {
  propB: 2,
  propC: 3,
};
var object = {
  propA: 1,
  ...source,
};
object; // => { propA: 1, propB: 2, propC: 3 }

6. 총결산

ES6에서 대상의 글자 크기가 상대적으로 작은 구조도 상당히 개선되었다.
__ 사용 가능proto__속성 이름은 초기화기에서 대상의 원형을 직접 설정합니다.이것은 Object를 사용하는 것보다 낫다.create () 가 더 쉽습니다.
참고, __proto__ES6 표준 첨부 파일 B의 일부이며 권장되지 않습니다.이 첨부 파일은 브라우저에 필수적이지만 다른 환경에는 선택할 수 있습니다.NodeJS 4, 5, 6은 이 기능을 지원합니다.
현재 방법 성명의 형식이 더 짧기 때문에function 키워드를 입력할 필요가 없습니다.간소화 방법에서 슈퍼 키워드를 사용할 수 있으며, 이 키워드는 대상의 원형 체인의 계승 속성에 쉽게 접근할 수 있다.
만약 속성 이름이 실행될 때 계산된다면, 현재 계산된 속성 이름 [expression]을 사용하여 대상을 초기화할 수 있습니다.
이상은 JS의 대상 서면량에 대한 상세한 내용입니다. JS의 대상 서면량에 대한 더 많은 자료는 저희의 기타 관련 문장을 주목하십시오!