Extension of ES6 object

Time:2021-5-4

1. Super keyword

(1) We know,This keyword always points to the current object where the function is located. ES6 adds another similar keyword super to point to the prototype object of the current object

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;        // Super here refers to the obj object prototype
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

Object.setPrototypeOf(_ obj, prototype_): The function isPrototype an object.

In the above code, the object obj. Find() method is referenced by super. FooFoo attribute of proto

(2) Note that when the super keyword represents a prototype object,It can only be used in methods of objectsIf it is used in other places, it will report an error. Here’s an example:

//Error report
const obj = {
  foo: super.foo
}

//Error report
const obj = {
  foo: () => super.foo
}

//Error report
const obj = {
  foo: function () {
    return super.foo
  }
}

The above three uses of super will report errors, because for JavaScript engine, theSuper is not used in object methodsIn the first way, super is used in an attribute. In the second and third ways, super is used in a function and then assigned to the foo attribute. At present, only the abbreviation of object method can let JavaScript engine confirm that it defines the method of object.

Here, maybe the second and the third writing methods are confusing. In fact, in the object, there is the following form, which is the default method of the object:

const obj = {
  Foo () {}, // foo is the method of the object
  Func: function foo1() {} // foo1 is not a method of an object
}

(3) Inside the JavaScript engine, super. Foo is equivalent to object. Getprototypeof (this). Foo (attribute) or object. Getprototypeof (this). Foo. Call (this) (method).

(4) If super. Protofunc() is used in the method of an object,Moreover, this is used in the protofunc method of the prototype object of the object, which does not point to the prototype object, but to the instance object

const proto = {
  x: 'hello',
  foo() {
    console.log(this.x);            // This is still bound to obj object
  },
};

const obj = {
  x: 'world',
  foo() {
    super.foo();
  }
}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

In the above code, super.foo points to the foo method of proto, but the bound this is still obj, so the output is world. The reason is simple,Because this of the ordinary function points to the execution scope, it happens that the scope of this execution is in the obj object, so this here points to the obj object.

2. Object extension operator

(1) Object deconstruction assignment is used to take values from an object, which is equivalent to assigning all the enumerable but unreadable attributes of the target object to the specified object. All keys and their values are copied to the new object.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

In the code above,The variable Z is the object of the deconstruction assignment. It gets the value to the right of the equal signAll unread keys (A and b)And copy them with the values.

Here, the deconstruction should pay attention to several points

  • Due to deconstruction assignmentTo the right of the equal sign is an objectSoIf the right side of the equal sign is undefined or null, an error will be reported because they cannot be converted to objects
let { ...z } = null; //  Runtime error
let { ...z } = undefined; //  Runtime error
  • The deconstruction assignment must be the last parameterOtherwise, an error will be reported.
let { ...x, y, z } = someObject; //  Syntactic errors
let { x, ...y, ...z } = someObject; //  Syntactic errors
  • The copy of the deconstruction assignment isShallow copyThat is, if the value of a key isComposite type values (array, object, function), then the reference of this value is used to deconstruct the assignment copy, not the copy of this value (that is to say, they actually point to the same address space).
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

Note that x.a.b is not 1, but 2, because x is actually another reference to obj and does not open up a new address space.

  • The deconstruction assignment of extension operators cannot copy properties inherited from prototype objects
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

In the code above,Object o 3 copies O 2, but only O 2’s own properties, not o 1’s prototype

  • ES6 stipulates that in variable declaration statements,If deconstruction assignment is used, the extension operator must be followed by a variable name instead of a deconstruction assignment expression,Therefore, the above code introduces the intermediate variable newobj. If it is written as follows, an error will be reported.
let { x, ...{ y, z } } = o;
// SyntaxError: ... must be followed by an identifier in declaration contexts
  • One use of deconstruction assignment isExtend the parameters of a function and introduce other operations.
function baseFunction({ a, b }) {
  // ...
}
function wrapperFunction({ x, y, ...restConfig }) {
  //Operate with X and Y parameters
  //The remaining parameters are passed to the original function
  return baseFunction(restConfig);
}

In the above code, the original function BaseFunction accepts a and B as parameters, and the function wrapperfunction is extended on the basis of BaseFunction to accept redundant parameters and retain the behavior of the original function.

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]