4: ES6 객체 확장

7430 단어

전언


이 섹션에서는 ES6 제4장(확장된 대상 기능) 노트 이해

객체 범주


객체 범주는 다음과 같습니다.
  • 일반 대상: JS 대상이 있는 모든 기본 내부 행위
  • 기이한 대상: 내부 행위가 일부 측면에서 기본 행위와 다르다
  • 표준 대상: ES6에서 정의된 대상, 예를 들어 Array, Date 등.표준 대상은 일반일 수도 있고 기이할 수도 있다
  • 내장 대상: 스크립트가 실행되기 시작할 때 JS 실행 환경에서 제공하는 대상.모든 표준 객체는 기본 제공

    • 대상 서면량 문법의 확장

  • 대상의 글자량 중 속성이 이름만 있을 때 JS 엔진은 주변 작용역에서 동명 변수
    function createPerson(name, age) {
 return {
     name,
     age
 };
}
    • 를 찾습니다
  • 방법 약자: 사칭과 function 키워드를 생략할 수 있습니다
    ES5 방법과 차이점: 방법은 간략하게 쓸 수 있다super. 간략하게 쓸 수 있는 방법이 아니라 사용할 수 없다.
    var person = {
 name: "Nicholas",
    //         ,       
 sayName() {
     console.log(this.name);
 }
};
  • 속성 이름 계산 필요
  • ES5에서 네모난 괄호는 변수나 문자열의 글자 수를 속성 이름으로 지정할 수 있고 문자열에 표지부로 존재할 때 문법 오류가 발생하는 특수 문자를 허용한다.결함: 대상 속성에서 변수를 사용할 수 없거나 계산을 통해 속성을 얻을 수 있는
    var person = {},
 lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";

console.log(person["first name"]); // "Nicholas"
console.log(person[lastName]); // "Zakas"

// === ES5       ===
var person = {
    [lastName]:'Zakas'
}
person["first" + suffix];
  • ES6에서 계산 속성의 결함 개선
    var lastName = "last name";
var suffix = " name";

var person = {
 "first name": "Nicholas",
 [lastName]: "Zakas",
    ["first" + suffix]: "Nicholas",
};

console.log(person["first name"]); // "Nicholas"
console.log(person[lastName]); // "Zakas"

    • 새로운 방법


    ES5는 ES5부터 새로운 전역 함수를 만드는 것을 피하고 Object 대상의 원형에 새로운 방법을 추가하는 것을 피하며 어떤 대상이 새로운 방법을 추가해야 하는지를 찾으려는 설계 의도를 가지고 있다.따라서 다른 객체에 적용되지 않는 새 메서드는 전체 Object 객체에 추가됩니다.
  • Object.is () 방법
    엄격하게 동일 연산자(==)는 +0과 -0이 같거나 NaN===NaN이false를 반환하는 것으로 간주됩니다.Object.is()는 이러한 특수한 표현을 복원했다
    console.log(+0 == -0); // true
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(5 == 5); // true
console.log(5 == "5"); // true
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false

  • Object.assign () 방법: 혼합하면 한 대상이 다른 대상에서 속성과 방법을 수신합니다. 방법 내부는 부치 연산자 (=) 를 사용하기 때문에 접근 속성을 수용자에게 복사할 수 없습니다. (접근기 속성을 호출하는 get 
    var receiver = {};
Object.assign(receiver,
 {
     type: "js",
     name: "file.js"
 },
    //    ,          
 {
     type: "css"
 }
);
console.log(receiver.type); // "css"
console.log(receiver.name); // "file.js"

// ===                        ===
var receiver = {},
supplier = {
 get name() {
     return "file.js"
 }
};

Object.assign(receiver, supplier);

var descriptor = Object.getOwnPropertyDescriptor(receiver, "name");

console.log(descriptor.value); // "file.js"
console.log(descriptor.get); // undefined

    • 중복 객체 글꼴 속성

  • ES5의 엄격한 모드에서 중복된 대상의 글자량 속성을 검사하여 중복된 속성 이름을 찾으면 오류
    • 를 던집니다
  • ES6에서 엄격 모드든 비엄격 모드든 중복 정의 대상의 글자량 속성은 오류를 던지지 않으며 중복 속성이 존재할 때 뒤에 배열된 속성의 값은 뒤에 있는 값을 덮어쓴다

    • 고유 속성의 열거 순서

    ES5에서는 대상 속성의 매거 순서를 정의하지 않았고, ES6에서는 대상 자체 속성이 매거될 때 되돌아오는 순서를 엄격하게 정의했다.
    고유 속성이 열거될 때 기본 순서는 다음과 같습니다.
  • 모든 숫자 유형 키, 오름차순으로 정렬
  • 모든 문자열 형식 키, 대상에 추가된 순서대로 배열
  • 모든 기호 유형 키도 추가 순서대로 배열
    • var obj = {
    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
};

obj.d = 1;

console.log(Object.getOwnPropertyNames(obj).join("")); // "012acbd"

    이것은 Object입니다.getOwnPropertyNames() 및 Reflect.ownKeys(제12장 참조)는 속성이 어떻게 되돌아오는지에 영향을 미쳤고 Object에도 영향을 미쳤다.assign () 처리 속성의 순서입니다.
    for-in 순환의 매거 순서는 아직 명확하게 정해지지 않았다. 왜냐하면 모든 JS 엔진이 같은 방식을 사용하는 것은 아니기 때문이다.Object.keys() 및 JSON.stringify () 도 for-in과 같은 매거 순서를 사용합니다.

    더욱 강력한 원형

  • ES5에서 대상의 원형은 초기화가 완료된 후(구조기 또는 Object.create() 방법을 통해) 변하지 않는다.
  • ES6에 Object.setPrototypeOf() 방법을 추가하여 임의로 지정한 대상의 원형을 수정할 수 있습니다.
    ES6의 Object.setPrototypeOf () 방법은 대상이 만들어진 후에 원형을 변경할 수 있습니다.
    //       :           ,             .
let person = {
 getGreeting() {
     return "Hello";
 }
};
let dog = {
 getGreeting() {
     return "Woof";
 }
};

//     person
let friend = Object.create(person);
console.log(friend.getGreeting()); // "Hello"
console.log(Object.getPrototypeOf(friend) === person); // true
  • ES5에서 대상의 실례를 덮어쓰려면 원형의 동명 방법을 사용해야 한다. 다음과 같은 방법을 취할 수 있다. 
    let person = {
 getGreeting() {
     return "Hello";
 }
};

let dog = {
 getGreeting() {
     return "Woof";
 }
};

let friend = {
 getGreeting() {
        //                    ,      ,    call      this     
     return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
 }
};
//        person
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(Object.getPrototypeOf(friend) === person); // true
    그러나 다단계 계승 시 이 방법은 적용되지 않는다
    let person = {
 getGreeting() {
     return "Hello";
 }
};

//     person
let friend = {
     getGreeting() {
            //      ,        this     relative ，  relative      friend   ，  friend.getGreeting().call()                   ，        。
         return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
 }
};
Object.setPrototypeOf(friend, person);

//     friend
let relative = Object.create(friend);

console.log(person.getGreeting()); // "Hello"
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(relative.getGreeting()); // error!
  • ES6에서 super 인용은 현재 대상의 원형을 가리키는 지침이고 super는 동적이 아니다. 항상 정확한 대상을 가리킬 수 있다. 슈퍼 인용은 호출할 때 확정된 것이 아니라 대상(대상의 방법에 따라 간략하게 쓰고class 문법에 사용해야 한다)의 원형이다. 시종 현재 대상의 원형은 방법을 간략하게 쓸 수 없는 상황에서 사용할 수 없다super.문법 오류 발생
    let person = {
 getGreeting() {
     return "Hello";
 }
};

//     person
let friend = {
     getGreeting() {
            //    super          (friend)   ,   this              
         return super.getGreeting() + ", hi!";
 }
};
Object.setPrototypeOf(friend, person);

//     friend
let relative = Object.create(friend);

console.log(person.getGreeting()); // "Hello"
console.log(friend.getGreeting()); // "Hello, hi!"
console.log(relative.getGreeting()); // "Hello, hi!"

    • 공식적인 메서드 정의

  • ES6 이전에 방법의 개념은 정식으로 정의된 적이 없고 하나의 호칭일 뿐이었다. 이전에는 대상의 함수 속성만 가리켰다
  • ES6에서 공식적으로 정의했다. 방법은 [[HomeObject]] 내부 속성을 가진 함수로 이 내부 속성은 이 방법이 속한 대상을 가리킨다super에 대한 인용은 [[HomeObject]] 속성을 사용하여 무엇을 해야 할지 판단합니다.첫 번째 단계는 [[HomeObject]]에서 Object.getPrototypeOf()를 호출하여 원형에 대한 인용을 얻는 것이다.다음에 이 원형에서 동명 함수를 찾기;마지막으로 this 귀속을 만들고 이 방법을 호출합니다.
    let person = {
 //   
 getGreeting() {
     return "Hello";
 }
};

//     
function shareGreeting() {
 return "Hi!";
}
    • Nx monorepo의 npm 패키지 관리 및 GiitHub Actions
    [android] ViewPager의 기본 사용 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage