Object literal syntax extension

Short for the initial value of a property

When an attribute of an object has the same name as a local variable, only the attribute name is used instead of the colon and value.

function createFunction(name, age) {
  return {
    name,
    age
  }
}
Copy the code

Short for object method

If you add methods to objects, this simplifies to eliminating the colon and function keyword.

let dog = {
  name: 'Sugary'.// getName: function () {
  // return this.name
  }, // object method syntax in ES5
  getName() {
    return this.name
  }
}
Copy the code

Name of a computable property

let suffix = 'name'

let person = {
  ['first' + suffix]: 'Sugary'['last' + suffix]: 'Nai',}console.log(person['firstname']) // Sugary
console.log(person['lastname']) // Nai
Copy the code

The new method

Object.is()

The object.is () method appears primarily to compensate for inaccuracies in the congruence operator (===). In JavaScript, +0 and -0 represent two completely different entities, but when you compare them using the congruence operator, you get the same result; NaN === NaN returns false and requires the isNaN() method to properly detect NaN.

console.log(+0= = = -0) // true
console.log(NaN= = =NaN) // false

console.log(Object.is(+0, -0)) // false
console.log(Object.is(NaN)) // false
Copy the code

Object.assign()

This method represents an object receiving properties and methods from another object. This method can accept any number of source objects and copy the properties into the receiving objects in the specified order. If multiple source objects have the same attribute, the lower-ranked source object overrides the higher-ranked one.

let receiver = {}

let supplier1 = {
  type: 'js'.name: 'file.js',}let supplier2 = {
  type: 'css',}Object.assign(receiver, supplier1, supplier2)

console.log(receiver) // { type: 'css', name: 'file.js' }
Copy the code

Own property enumeration order

ES6 strictly specifies the return order of its own attributes when they are enumerated. The basic rule for the return order is:

  1. All numeric keys are sorted in ascending order;
  2. All string keys are sorted in the order they were added to the object;
  3. All symbol keys are sorted in the order they are added to the object.
let myObj = {
  a: 1.0: 1.c: 1.2: 1.b: 1.1: 1,
}
myObj.d = 1

console.log(Object.getOwnPropertyNames(myObj).join(' ')) // 012acbd
Copy the code

Enhance the prototype of the object

Change the object’s prototype

  1. ES5 uses the object.getProtoTypeof () method to return the prototype of any specified Object;
  2. ES6 uses the object.setPrototypeof () method to change the prototype of any specified Object.

Specific methods are as follows:

let Person = {
  getGreeting() {
    return 'Hello'}},let Dog = {
  getGreeting() {
    return 'Woof'}},let friend = Object.create(Person)
console.log(friend.getGreeting()) // Hello
console.log(Object.getPrototypeOf(friend) === Person) // true

Object.setPrototypeOf(friend, Dog)
console.log(friend.getGreeting()) // Woof
console.log(Object.getPrototypeOf(friend) === Dog) // true
Copy the code

Super references to simplify stereotype access

If you want to override the method of an object instance, you need to call the prototype method with the same name. This is implemented in ES5:

let Person = {
  getGreeting() {
    return 'Hello'}},let Dog = {
  getGreeting() {
    return 'Woof'}},let friend = {
  getGreeting() {
    return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi! '}},Object.setPrototypeOf(friend, Person)
console.log(friend.getGreeting()) // Hello, hi!
console.log(Object.getPrototypeOf(friend) === Person) // true

Object.setPrototypeOf(friend, Dog)
console.log(friend.getGreeting()) // Woof, hi!
console.log(Object.getPrototypeOf(friend) === Dog) // true
Copy the code

However, this approach is problematic in the case of multiple inheritance, which leads to recursive calls until a stack overflow is triggered. At this point, we can use the new ES6 keyword super. A super reference is equivalent to a pointer to an object’s prototype.

let Person = {
  getGreeting() {
    return 'Hello'}},let Dog = {
  getGreeting() {
    return 'Woof'}},let friend = {
  getGreeting() {
    // This is the shorthand method
    // return Object.getPrototypeOf(this).getGreeting.call(this) + ', hi! '
    return super.getGreeting() + ', hi! '}},Object.setPrototypeOf(friend, Person)
console.log(friend.getGreeting()) // Hello, hi!
console.log(Object.getPrototypeOf(friend) === Person) // true

Object.setPrototypeOf(friend, Dog)
console.log(friend.getGreeting()) // Woof, hi!
console.log(Object.getPrototypeOf(friend) === Dog) // true
Copy the code

Note: You must use a Super reference in an object that uses the shorthand method, otherwise it will report a syntax error.

Formal method definitions

ES6 defines a method as a function that has an internal [[HomeObject]] property to hold the object that the method belongs to.

let Person = {
  / / method
  getGreeting() {
    return 'Hello'}},// Not the way
function shareGreeting() {
  return 'Hi! '
}
Copy the code

The getGreeting() method in the example has a [[HomeObject]] property value of Person, while shareGreeting() does not have a [[HomeObject]] property. ES6 defines this method primarily to serve Super. All references to Super are determined by the [[HomeObject]] property.