In-depth Understanding of ES6 knowledge points record

1, the default value of the function parameter

function fn(url,timeout=2000,callback){}
Copy the code
  • The second parameter is set to 2000. In this case, the default value of timeout is used only if the second parameter is not passed in or undefined is actively passed in
  • Callback (‘/demo’, callback){},callback (‘/demo’, callback){},callback (‘/demo’, callback){},callback (‘/demo’, callback){})

The effect of default parameter values on the Arguments object

Function fn(a){console.log(arguments[0]===a)//true a = 1; Console. log(arguments[0]===a)//true} fn(2,2) {"use strict" console.log(arguments[0]===a)//true  a = 1; console.log(arguments[0]===a)//false } fn(2) //es6 function fn(a,b=2) { console.log(arguments.length)//1 console.log(a===arguments[0])//true console.log(b===arguments[1])//false a = 1; console.log(a===arguments[0])//false } fn(1); Function fn(a,b=2) {console.log(arguments.length)//2 console.log(a===arguments[0])//true console.log(b===arguments[1])//true a = 1; The console. The log (a = = = the arguments [0]) / / false} fn (1, 2); // Use named parametersCopy the code
  • Es5 non-strict mode: Changes to named arguments are updated synchronously to the Arguments object
  • Es5 Strict mode: Changes to named arguments are not synchronized to the arguments object
  • Es6 uses default: Arguments objects behave the same as es5 strict mode. The existence of default argument values keeps the Arguments object separate from the named arguments

3. Default parameter expressions

function getValue(){ return 1 } function fn(a,b=getValue()){ return a+b }; fn(1); / / 2Copy the code
  • The default argument to b is the value returned by the getValue method
function getValue(){ return 1 } function fn(a,b=a){ return a+b }; fn(1); / / 2Copy the code
  • Explanation: The default parameter is evaluated at function call time, so you can use the parameter defined first as the default value of the parameter defined later

4. Indefinite parameters

Add three dots (…) to the function’s named arguments. This indicates that this is an indefinite parameter and that the parameter is an array

function fn(a,... B){} fn(1,2,3,4)//Copy the code

Restrictions on use:

  • There can only be one indeterminate parameter and it can only be written at the end
  • An indefinite parameter cannot appear in an object literal setter, because there is one and only one parameter to an object literal setter
var obj = { set name(... Val){}// can't use undefined arguments}Copy the code

Effects on arguments objects:

  • The Arguments object always contains all the arguments to the function passed in, whether or not an indefinite argument is used

5. Expand the operator

The expand operator allows you to specify an array and access it through the consolidated array, using the following example:

Var arr = [1, 2, 3, 4]; Math.max. Apply (Math,arr); Math.max(... arr); Math.max(... arr,0); // limit the minimum value returned by math.max to 0Copy the code

6. The name attribute of the function

See code demo:

function a(){} var b = function(){} var c = function d(){} var e = { f:function(){} } console.log(a.name); //a console.log(b.name); //b console.log(c.name); //d console.log(e.f.name); //fCopy the code
  • For a normal function, the name attribute is the name of the declared function
  • The name value of an anonymous function expression is the name of the variable assigned to the anonymous function
  • When a function expression has a name, its name is more important than the weight of the variable copied from the function itself

7. Multiple uses of functions

There are two different internal methods in js functions: [[Call]] and [[Construct]]

  • When a function is called with the new keyword, the [[Construct]] function is executed, which creates a new object, usually called an instance, and then executes the function body to bind this to the instance. Functions with [[Construct]] are called constructors. Not all functions have this method, such as the arrow function.
  • Without new, the [[Call]] function is executed, which directly executes the function body in the code

How do you tell if a function is called using the new keyword?

Meta-attribute (new.target) :

  • New. target A meta-attribute introduced for ES6 that refers to a non-object attribute that provides supplementary information about a non-object target (for example, new).

  • When the [[Construct]] method of a function is called, new.target is assigned to the target of the new operator, usually the newly created object instance, which is the constructor of this in the function body

  • When the [[Call]] method is called, the value of new.target is undefined

Case study:

function Person(name) { if(new.target ! == undefined) { this.name = name; } else {throw new Error(' new must be used to generate instance '); Function Person(name) {if(new.target === Person) {this.name = name; } else {throw new Error(' new must be used to generate instance '); }} var person = new person (' person '); Var notAPerson = Person. Call (Person, 'dog '); / / an errorCopy the code

Use: You can use new.target to restrict classes, such that a class cannot be directly instantiated, but can only be used by inheritance, as follows:

Constructor () {if(new.target === Shape) {throw new Error(' not instantiated '); } } } class Rectangle extends Shape { constructor(length, width) { super(); } } var shape = new Shape(); Rectangle = new rectangle (10, 25); New. Target = RectangleCopy the code

8. Arrow function

Differences with traditional functions:

  • No this, super, arguments and new.target bindings; The values of this, super, arguments, and new.target in the arrow function are determined by the nearest non-arrow function
  • Arrow functions cannot be called using the new keyword without the [[Construct]] method; Cannot be used as a constructor, and an error will be reported if the arrow function is called with the new keyword
  • No prototype; There is no need to build a prototype because the arrow function cannot be called with the new keyword, so there is no prototype attribute for the arrow function
  • You cannot change the binding of this; Be consistent throughout the life of the function
  • Arguments objects are not supported; Arrow functions have no arguments binding, so you can only access arguments as named and undefined arguments, but if an arrow function has an enclosing function, it can access arguments from the enclosing function
  • Duplicate named parameters are not supported; Arrow functions do not support duplicate named arguments in strict mode or in strict mode. In traditional function specifications, duplicate named arguments are prohibited only in strict mode.