高级 Javascript 函数

什么是 Javascript 函数

函数是一组有组织的、可重复使用的代码，用于执行单个相关的操作。

高级函数使用

函数基础包括函数声明、传递参数和函数作用域。
查看这篇涵盖 JavaScript 函数的文章。JavaScript
函数

在本文中，我们将讨论以下内容：

新功能
立即调用函数
闭包
箭头函数
此关键字
调用方法
apply 方法
bind 方法
默认参数
剩余参数
传播参数

新功能

new 运算符允许开发人员创建用户定义对象类型或具有构造函数的内置对象类型的实例。

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('VW', 'GTI', 2017);

console.log(car1.make); // VW

立即调用函数表达式（IIFE）

IIFE 函数让我们可以对代码进行分组，使其独立运行，不受其他代码的影响。
函数定义后会立即调用。
这可以防止函数和变量污染全局对象。

(function hello() {
    console.log('Hello World'); //Hello
})();

为了使其成为函数表达式，我们将其分配给变量或在另一个表达式中使用它。

闭包

闭包是 JavaScript 中的一个特性，它允许函数内部作用域访问外部作用域。
在下面的例子中，闭包帮助将消息保持在作用域内，并且可以在 getMessage 函数中访问它。

let greeting = (function () {
    let message = 'Hello';
    let getMessage = function () {
        return message;
    };
    return {
        getMessage: getMessage
    }
})();

console.log(greeting.message); //Hello

箭头函数

箭头函数是 ES6 中引入的。指的是具有自己独特语法的匿名函数。创建函数的更简单方法。

为什么？

更短的语法
它从封闭的词法作用域中获取其值

缺点。

箭头函数没有自己的 this 值。
没有参数对象——我们不能引用参数

let greet = () => {
    return 'Hello world';
}
let message = greet();
console.log(message); //Hello World

如果有一个参数，则括号是可选的。

let greet = name => 'Hello' + name;

此关键字

指的是我们正在执行的函数的所有者，
因此，如果它是一个标准函数，则它指的是全局窗口对象；否则，它可以指的是函数作为其方法的对象。

let message = {
    name: 'john',
    regularFunction(name) {
        console.log('Hello' + this.name)
    },

    arrowFunction: () => console.log('Hi' + this.name)
}

message.regularFunction(); // Hello John
message.arrowFunction();// Hi

调用方法

call() 允许将一个对象的函数/方法赋值给另一个对象并调用。call
() 会将 this 的新值传递给该函数/方法。
使用 call()，你可以编写一次方法，然后将其继承给另一个对象，而无需为新对象重写该方法。

let car1 = { brand: 'Vw', color: 'blue' }
let car2 = { brand: 'Toyota', color: 'white' }

let returnCarBrand = function () {
    console.log('Car brand is ' + this.brand)
}

returnCarBrand.call(car1); // Car brand is Vw
returnCarBrand.call(car2); // Car brand is Toyota

apply 方法

apply() 方法使用给定的 this 值和以数组形式提供的参数来调用一个函数。
与 call 的语法相同，区别在于 call 接受一个参数列表，而 apply 接受一个参数数组。

function bookTitle(name, author) {
    console.log(name + 'is written by ' + author);
    console.log(this);
}
bookTitle.apply(['HTML & CSS: Design and Build Web Sites', 'Jon Duckett']);

bind 方法

允许复制一个函数然后更改其值。

let book = {
    author: 'Mary',
    getAuthor: function () {
        return this.author;
    }
}

let book2 = { author: 'John' };
let getAuthorcopy = book.getAuthor.bind(book2);
console.log(getAuthorcopy()); // John

默认参数

如果没有传递值或未定义，则允许使用默认值初始化命名参数。

function sayHi(message, name = 'John') {
    console.log(message + name)
}

剩余参数

剩余参数语法允许函数以数组形式接受不定数量的参数。
剩余参数应始终位于常规参数之后。

let sayHi = function greet(...names) {
    names.forEach(name => console.log('Hi ' + name))
}
greet('Welcome', 'John', 'Mary', 'James') // Hi John // Hi Mary // Hi James

扩展运算符

允许函数将数组作为参数并展开其元素，以便将它们分配给各个参数

function greet(user1, user2) {
    console.log('Hello' + user1 +' and ' + user2)
}
let names = ['John','Mary']
greet(...names); //Hello John and Mary

鏂囩珷鏉ユ簮锛�https://dev.to/luxdevhq/advanced-working-with-functions-d0b