The main knowledge points are object category, attribute shorthand, method abbreviation, attribute name to be computed, Object.is() method, Object.assign() method, repeatable attributes, enumeration order of own attributes, Object. setPrototype Of () method, super reference, method definition.
1. Object Categories
Objects fall into the following categories:
- Ordinary object: Has all default internal behavior of JS object;
- Singular object: Its internal behavior is different from the default behavior in some aspects.
- Standard Objects: Objects defined in ES6, such as Array,Date, etc.
- Built-in Objects: Objects provided by the JS runtime environment at the beginning of the script run. All standard objects are built-in objects.
2. Extension of object literal grammar
Shorthand for Attribute Initialization
Attribute initializer shorthand can be used to eliminate duplication of attribute names and local variables, and variable values in scope can be used to assign attributes with the same name:
function createPerson(name,age){ return { name:name, age:age } } //Because the attribute name is the same as the local variable name, you can use the //Shorthand for attribute initializers, equivalent to function createPerson(name,age){ return { name, age } }
Method shorthand
In object literal writing, adding a method to an object requires specifying the attributes of the object and specific function declarations. ES6 provides a way to abbreviate the grammar, by omitting the function keyword, it can make the grammar of adding methods to objects more concise. One important difference is that method abbreviations can use super, while non-abbreviated methods cannot use super.
//Method abbreviation let person = { sayName:function(){ return name; } } //Equivalent to let person = { sayName(){ return name; } }
Property name to be computed
The rule for calculating attribute names allows attribute names in literal quantities of objects to be variables, string literals, or calculated by variables, specifically written in square brackets [].
//Property name to be computed let person = {}; let firstName = 'first name'; let suffix = '@github.com' let email = 'email'; //variable person[firstName] = 'hello'; //string literal person['last name']= 'world'; //The result of variable calculation person[email+suffix] = 'example@github.com'
Object.is()
Comparing the two values in JS will use strictly equal operator ==, but using strict operator, +0 and -0 will think that the two are equal, and NaN===NaN is not equal, using Object.is() method to judge the two cases will be different from using strict equality, other cases and using strict equality operation is basically the same;
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'); //false console.log(Object.is(5,'5')) //false
Object.assign()
An object obtains attributes and methods from another object, which is a typical Mixin mode. Object.assign() method can achieve object mixing more concisely. This method needs a recipient object and several supplier objects. Receivers receive their attributes in order of the supplier's parameters, which means that the second supplier may override the same attributes of the first supplier.
let person={ name:'hello', age:18 } let car ={ brand:'BWM', age:5 } let obj = {}; Object.assign(obj,person,car); console.log(obj); //{name: "hello", age: 5, brand: "BWM"}
The Object.assign() method does not create accessor attributes on the recipient, even if the provider has accessor attributes. Because the Object.assign() method uses an assignment operator, the accessor attributes of the provider are converted into the data attributes of the recipient.
let receiver = {}, supplier = { get name() { return "file.js" } }; Object.assign(receiver, supplier); let descriptor = Object.getOwnPropertyDescriptor(receiver, "name"); console.log(descriptor.value); // "file.js" console.log(descriptor.get); // undefined
Allow duplicate attributes
In ES5 strict mode, the properties in the literal quantities of objects are checked for duplication, and an error is thrown if duplication occurs. In ES6, whether in strict or non-strict mode, it is no longer checked whether the attributes are duplicated. When the attributes are duplicated, the latter attributes will override the former attributes.
//Repeated attributes let person = { name:'hello', name:'world' } console.log(person.name); //world
Enumeration Order of Ownership Attributes
ES6 specifies the enumeration order of its own attributes, which follows the enumeration order of numeric type keys - > string type keys - > symbol type keys in turn:
- All numeric type keys are arranged in ascending order.
- All string type keys are arranged in the order in which they are added to the object.
-
All symbol types are also arranged in order of addition.
// Enumeration Order of Ownership Attributes
var obj = {
a: 1,
0: 1,
c: 1,
2: 1,
b: 1,
1: 1
};
obj.d = 1;
console.log(Object.getOwnPropertyNames(obj).join(""));//012acbd
3. Stronger prototypes
Modifying Object Prototype
In ES6, the prototype of an object can be modified by the Object. setPrototype OF () method, which contains two parameters: one is the object of the modified prototype, the other is the prototype to be specified;
let person = { getName(){ return 'hello'; } } let dog ={ getName(){ return 'world'; } } let friend = Object.create(person); console.log(friend.getName()); //hello console.log(Object.getPrototypeOf(friend)===person); //true Object.setPrototypeOf(friend,dog); console.log(friend.getName()); //world console.log(Object.getPrototypeOf(friend)===dog); //true
Use super references
The ability to use super references to access methods in the prototype, if you need to override the method with the same name in the object, can do this:
let person = { getName(){ return 'hello'; } } let dog ={ getName(){ return super.getName()+' world'; } } Object.setPrototypeOf(dog,person); console.log(dog.getName()); //hello world
If super references are used, they can only be used in method abbreviations, otherwise errors will be reported:
let dog ={ getNanem:function (){ return super.getName()+' world'; } } //Error: Uncaught SyntaxError:'super'keyword unexpected here
Method definition
Before ES6, the concept of method was never formally defined, but in ES6, a formal definition was made: the method has a function of [[HomeObject]] internal attributes, which point to the object to which the method belongs;
//Method let person = { getName(){ return 'hello'; } } //Not method function getName(){ return 'hello world'; }
4. summary
ES6 makes ES6 easier to use and more powerful by expanding object functions. There are some specific improvements in object functions.
For object literals:
- Shorthand attributes make it easier to assign variables in scope to the same-name attributes.
- It is more convenient to compute attribute name rules, such as variables, string literals and the results computed by variables as attributes.
- Method abbreviation can omit function keywords and colons: to make the definition of method more concise;
- The checking of duplicate attributes is abandoned and the attribute values of the same name attributes are overwritten by the latter attributes.
- Specifies the enumeration order of the object's own properties for numeric type keys - > string type keys - > symbol type keys.
For object prototypes:
1. Object.assign() method can integrate the attributes of multiple provider objects into recipient objects, which can facilitate the implementation of object blending mode.
2. Object.is() method is safer than strict comparator when dealing with special values.
3. The Object. setPrototypeOf () method makes it easier to change the prototype of an object.
4. Provide super keywords to access methods on the prototype.