Extension de fonctions dans ES6 (exemple de code)

Le contenu de cet article concerne l'extension des fonctions (exemples de code) dans ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Valeurs par défaut pour les paramètres de fonction

ES6 permet de définir des valeurs par défaut pour les paramètres de fonction, qui sont écrites directement après la définition du paramètre.

Avant ES6 :

function makeRequest(url,timeout,callback) {
    timeout=(typeof timeout!=="undefined")?timeout:2000;
    callback=(typeof callback!=="undefined")?callback:function(){};
                //    函数的剩余部分
}

//ES6 
function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

Les variables de paramètres sont déclarées par défaut, elles ne peuvent donc pas être déclarées à nouveau avec let ou const.

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

Lors de l'utilisation des valeurs par défaut des paramètres, la fonction ne peut pas avoir de paramètres portant le même nom.

// 不报错
function foo(x, x, y) {
  // ...
}
// 报错
function foo(x, x, y = 1) {
  // ...
}
// SyntaxError: Duplicate parameter name not allowed in this context

La valeur par défaut du paramètre n'est pas transmise par valeur, mais la valeur de l'expression de la valeur par défaut est recalculée à chaque fois. Autrement dit, les valeurs par défaut des paramètres sont évaluées paresseusement.

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}
foo() // 100
x = 100;
foo() // 101

Vous pouvez spécifier la valeur par défaut de n'importe quel paramètre dans la déclaration de fonction, même si le paramètre est classé avant les paramètres qui ne spécifient pas de valeur par défaut.

function makeRequest（ur1，timeout=2000，callback）{
//函数的剩余部分
}
//    使用默认的    timeout
makeRequest("/foo",    undefined,    function(body)    {
    doSomething(body);
});
//    使用默认的    timeout
makeRequest("/foo");
//    不使用默认值
makeRequest("/foo",    null,    function(body)    {
    doSomething(body);
});

Dans cet exemple, la valeur par défaut du délai d'attente ne sera utilisée que si le deuxième paramètre n'est pas passé, ou si la valeur du deuxième paramètre est explicitement spécifiée comme non définie.

Utilisé en conjonction avec la valeur par défaut de l'affectation de déstructuration

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

Le code ci-dessus utilise uniquement la valeur par défaut de l'affectation de déstructuration de l'objet, et n'utilise pas la valeur par défaut de la fonction paramètre. Ce n'est que lorsque le paramètre de la fonction foo est un objet que les variables x et y seront générées par affectation de déstructuration. Si aucun paramètre n'est fourni lors de l'appel de la fonction foo, les variables x et y ne seront pas générées et une erreur sera signalée. Cette situation peut être évitée en fournissant des valeurs par défaut pour les paramètres de fonction.

function foo({x, y = 5} = {}) {
  console.log(x, y);
}
foo() // undefined 5
function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}
fetch('http://example.com', {})
// "GET"
fetch('http://example.com')
// 报错
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}
fetch('http://example.com')
// "GET"

affectera l'attribut de longueur de la fonction

Une fois la valeur par défaut spécifiée, l'attribut de longueur de la fonction renverra le nombre de paramètres sans valeur par défaut spécifiée. En d’autres termes, lorsqu’une valeur par défaut est spécifiée, l’attribut length sera déformé.

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

Dans le code ci-dessus, la valeur de retour de l'attribut length est égale au nombre de paramètres de la fonction moins le nombre de paramètres avec les valeurs par défaut spécifiées. Par exemple, la dernière fonction ci-dessus définit 3 paramètres, dont un paramètre c spécifie une valeur par défaut, donc l'attribut length est égal à 3 moins 1, et finalement nous obtenons 2.
En effet, la signification de l'attribut length est le nombre de paramètres censés être transmis à la fonction. Une fois qu'un paramètre reçoit une valeur par défaut, le nombre de paramètres censés être transmis n'inclut pas ce paramètre. De la même manière, le paramètre rest ne sera pas inclus ultérieurement dans l'attribut length.

(function(...args) {}).length // 0

Si le paramètre avec une valeur par défaut n'est pas le paramètre tail, l'attribut length ne sera plus inclus dans les paramètres suivants

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

La portée de la valeur par défaut du paramètre

Une fois la valeur par défaut du paramètre définie, le paramètre formera une portée (contexte) distincte lorsque la fonction est déclarée et initialisée. Une fois l'initialisation terminée, cette portée disparaîtra. Ce comportement de syntaxe n'apparaîtra pas lorsque la valeur par défaut du paramètre n'est pas définie.

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1

L'initialisation du paramètre sera effectuée lorsque la fonction est appelée, qu'une valeur soit transmise au paramètre ou que la valeur par défaut du paramètre soit utilisée.
Dans le code ci-dessus, lorsque la fonction f est appelée, le paramètre y = x forme une portée distincte. Dans cette portée, la variable x elle-même n'est pas définie, elle pointe donc vers la variable globale externe x. Lorsque la fonction est appelée, la variable locale x à l'intérieur du corps de la fonction n'affecte pas la variable de valeur par défaut x. Si la variable globale x n'existe pas à ce moment, une erreur sera signalée.

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}
foo() // 3
x // 1

Dans le code ci-dessus, les paramètres de la fonction foo forment une portée distincte. Dans cette portée, la variable x est d'abord déclarée, puis la variable y est déclarée. La valeur par défaut de y est une fonction anonyme. La variable x à l'intérieur de cette fonction anonyme pointe vers le premier paramètre x dans la même portée. La fonction foo déclare une variable interne x à l'intérieur. Cette variable et le premier paramètre x ne sont pas dans la même portée, ce ne sont donc pas la même variable, donc après avoir exécuté y, les valeurs de la variable interne x et du global externe. la variable x n'a pas changé.
Si la var de var x =3 est supprimée, la variable interne x de la fonction foo pointe vers le premier paramètre x, qui est cohérent avec le x à l'intérieur de la fonction anonyme, donc la sortie finale est 2, et le global externe la variable x reste inchangée.

var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}
foo() // 2
x // 1

Zone morte temporaire pour les valeurs par défaut des paramètres

Similaire à la déclaration 1et, chaque paramètre de la fonction crée une nouvelle liaison d'identifiant, dont l'accès n'est pas autorisé avant son initialisation, sinon une erreur sera générée. L'initialisation du paramètre se produit lorsque la fonction est appelée, qu'une valeur soit transmise au paramètre ou que la valeur par défaut du paramètre soit utilisée.

function    getValue(value)    {
    return    value    +    5;
}
function    add(first,    second    =    getValue(first))    {
    return    first    +    second;
}
console.log(add(1,    1));//    2
console.log(add(1));//    7

L'appel de add(1, 1) et add(1) exécute en fait le code suivant pour créer les valeurs de paramètres​​du premier et du deuxième :

//JS调用add(1,1)可表示为
let    first    =    1;
let    second    =    1;
//JS调用add(1)可表示为
let    first    =    1;
let    second    =    getValue(first);

Réécrire it

function    add(first    =    second,    second)    {
    return    first    +    second;
}

console.log(add(1,    1));//    2
console.log(add(undefined,    1));//    抛出错误

Dans cet exemple, l'appel de add(1, 1) et add(undefined, 1) correspondent au code de fond suivant :

//    JS    调用    add(1,    1)    可表示为
let    first    =    1;
let    second    =    1;

//    JS    调用    add(1)    可表示为
let    first    =    second;
let    second    =    1;

Dans cet exemple, l'appel de add (indéfini, 1) throws Une erreur s'est produite car second n'avait pas encore été initialisé lorsque first a été initialisé. La seconde existe ici dans la zone morte temporaire, et la référence à la seconde génère une erreur.
Les paramètres de fonction ont leur propre portée et une zone morte temporaire, qui sont séparées de la portée du corps de la fonction, ce qui signifie que la valeur par défaut du paramètre ne permet pas d'accéder aux variables déclarées à l'intérieur du corps de la fonction.

Application

En utilisant les valeurs par défaut des paramètres, vous pouvez spécifier qu'un certain paramètre ne doit pas être omis. S'il est omis, une erreur sera générée.

function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo()
// Error: Missing parameter

rest 参数

ES6 引入 rest参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。rest参数就是一个真正的数组，数组特有的方法都可以使用。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

rest 参数的限制条件

一是函数只能有一个剩余参数，并且它必须被放在最后。

// 报错
function f(a, ...b, c) {
  // ...
}

第二个限制是剩余参数不能在对象字面量的    setter    属性中使用，这意味着如下代码同样会导致语法错误：

1et object={
//语法错误：不能在setter中使用剩余参数
set name（...value）{
//一些操作
}；

存在此限制的原因是：对象字面量的setter被限定只能使用单个参数；而剩余参数按照定义是不限制参数数量的，因此它在此处不被许可。    
前面有讲函数的length属性，不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

严格模式

从 ES5 开始，函数内部可以设定为严格模式。

function doSomething(a, b) {
  'use strict';
  // code
}

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}
// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};
// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};
const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

这样规定的原因是，函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方，只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。  
把函数包在一个无参数的立即执行函数里面可以规避这种限制。

const doSomething = (function () {
  'use strict';
  return function(value = 42) {
    return value;
  };
}());

在代码块中声明函数

在ES3或更早版本中，在代码块中声明函数（即块级函数）严格来说应当是一个语法错误，但所有的浏览器却都支持该语法。可惜的是，每个支持该语法的浏览器都有轻微的行为差异，所以最佳实践就是不要在代码块中声明函数（更好的选择是使用函数表达式）。

严格模式下

为了控制这种不兼容行为，ES5的严格模式为代码块内部的函数声明引入了一个错误。  
然而ES6会将    doSomething()函数视为块级声明，并允许它在定义所在的代码块内部被访问。块级函数与    let    函数表达式相似，在执行流跳出定义所在的代码块之后，函数定义就会被移除。关键区别在于：块级函数会被提升到所在代码块的顶部；而使用let的函数表达式则不会 。

"use    strict";
if    (true)    {

    console.log(typeof doSomething);//"function"
    function    doSomething()    {
        //    ...
    }
    doSomething();
}
console.log(typeof    doSomething);//    "undefined

非严格模式下

ES6    在非严格模式下同样允许使用块级函数，但行为有细微不同。块级函数的作用域会被提升到所在函数或全局环境的顶部，而不是代码块的顶部。

//    ES6    behavior
if    (true)    {
    console.log(typeof    doSomething);//"function"
    function    doSomething()    {
        //    ...
    }
    doSomething();
}
console.log(typeof    doSomething);//    "function"

name 属性

函数的name属性，返回该函数的函数名。

function foo() {}
foo.name // "foo"

getter函数，因此它的名称是    "get    firstName"    ，以标明它的特征；同样，setter函数也会带有"set"的前缀（getter与setter函数都必须用Object.getOwnPropertyDescriptor()来检索）。另外，使用bind（）创建的函数会在名称属性值之前带有"bound”前缀；而使用Function构造器创建的函数，其名称属性则会有“anonymous”前缀，如果将一个匿名函数赋值给一个变量，ES5的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

new.target元属性

JS为函数提供了两个不同的内部方法：[[Call]]与[[Construct]]。当函数未使用new进行调用时，[[Call]]方法会被执行，运行的是代码中显示的函数体。而当函数使用new进行调用时，[[Construct]]方法则会被执行，负责创建一个被称为新目标的新的对象，并且使用该新目标作为this去执行函数体。拥有[[Construct]]    方法的函数被称为构造器。记住并不是所有函数都拥有[[Construct]]方法，因此不是所有函数都可以用new来调用。

在ES5中判断函数如何被调用

在ES5中判断函数是不是使用了new来调用（即作为构造器），最流行的方式是使用instanceof，例如：

function    Person(name)    {
    if    (this    instanceof    Person)    {
            this.name    =    name;//    使用new
    }    else    {
            throw    new    Error("You    must    use    new    with    Person
    }
}

var    person    =    new    Person("Nicholas");
var    notAPerson    =    Person("Nicholas");//抛出错误

可惜的是，该方法并不绝对可靠，因为在不使用    new    的情况下this仍然可能是    Person    的实例。

var    notAPerson    =    Person.call(person,    "Michael");    //    奏效了！

在ES6中判断函数如何被调用

为了解决这个问题，ES6引入了new.target 元属性。元属性指的是“非对象”（例如new）上的一个属性，并提供关联到它的目标的附加信息。当函数的[[Construct]]方法被调用时，new.target 会被填入new运算符的作用目标，该目标通常是新创建的对象实例的构造器，并且会成为函数体内部的this值。而若[[Call]]被执行，new.target的值则会是undefined。    
通过检查new.target是否被定义，这个新的元属性就让你能安全地判断函数是否被使用new 进行了调用。

function    Person(name)    {
    if    (typeof new.target    !==    "undefined")    {
            this.name    =    name;//    使用new
    }    else    {
            throw    new    Error("You    must    use    new    with    Person
    }
}
var    person    =    new    Person("Nicholas");
var    notAPerson    =    Person("Nicholas");//抛出错误

警告：在函数之外使用new.target会有语法错误。

箭头函数

ES6 允许使用“箭头”（=>）定义函数。但它的行为在很多重要方面与传统的JS函数不同：

区别

• 没有this、super、arguments，也没有new.target 绑定：this、super、arguments、以及函数内部的new.target的值由所在的、最靠近的非箭头函数来决定。

• 不能被使用new调用：箭头函数没有[[Construct]]方法，因此不能被用为构造函数，使用new调用箭头函数会抛出错误。

• 没有原型：既然不能对箭头函数使用new，那么它也不需要原型，也就是没有prototype 属性。

• 不能更改this：this的值在函数内部不能被修改，在函数的整个生命周期内其值会保持不变。

• 没有arguments对象：既然箭头函数没有arguments绑定，你必须依赖于具名参数或剩余参数来访问函数的参数。

• 不允许重复的具名参数：箭头函数不允许拥有重复的具名参数，无论是否在严格模式下；而相对来说，传统函数只有在严格模式下才禁止这种重复。

• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

下面是一种特殊情况，虽然可以运行，但会得到错误的结果。

let foo = () => { a: 1 };
foo() // undefined

上面代码中，原始意图是返回一个对象{a:1}，但是由于引擎认为大括号是代码块，所以执行了一行语句a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;，然后函数就结束了，没有返回值。  
如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。  
所以，箭头函数转成 ES5 的代码如下。

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

箭头函数的this看外层的是否有函数

如果有，外层函数的this就是内部箭头函数的this。

 function Person() {
     this.obj = {
         showThis : () => {
             console.log(this);//person
         }
     }
 }
    let fun5 = new Person();
    fun5.obj.showThis();

如果没有，this值就会是全局对象（在浏览器中是window，在nodejs中是global）。

    let obj = {
        name : 'kobe',
        age : 39,
        getName : () => {
            btn2.onclick = () => {
                console.log(this);//window
            };
        }
    };
    obj.getName();

不适用的场合

由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数。  
第一个场合是定义函数的方法，且该方法内部包括this。

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

第二个场合是需要动态this的时候，也不应使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。  
另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。

双冒号运算符

箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以现在有一个提案，提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。  
函数绑定运算符是并排的两个冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
  return obj::hasOwnProperty(key);
}

如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面。

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!