函数进阶篇

函数定义

1.函数声明

function add(num1, num2) {
  return num1 + num2;
}

2.函数表达式

let sub = function (num1, num2) {
  return num1 - num2;
};

3.箭头函数（ES6新增）

let mul = (mun1, num2) => num1 * num2;
let mul = (mun1, num2) => {
  return num1 * num2;
};
let f1 = () => {
  console.log("arrow function");
};
let f2 = x => x ** 2;
let xx = ((x) => x ** x)(4);

4.Function构造函数（不推荐）

这个构造函数接收任意多个字符串参数，最后一个参数始终会被当成函数体，而之前的参数都是新函数的参数。

 let sum = new Function(
    "num1",
    "num2",
    "let result=num1+num2; return result;"
  );

arguments对象

一个类数组对象（但不是 Array 的实例），因此可以使用中括号语法访问其中的元素。

如，第一个参数是 arguments[0]，第二个参数是 arguments[1]。

 

function likes(name, fav1, fav2) {
    console.log(`${name}喜欢${fav1}、${fav2}。`);
    let output = `${name}喜欢`;
    let argCount = arguments.length;
    for (let i = 1; i < argCount - 1; i++) {
      output += `${arguments[i]}、`;
    }
    output += `${arguments[argCount - 1]}。`;
    console.log(output);
  }
likes("小明", "读书", "篮球");
likes("小明", "读书", "篮球", "游泳", "骑车");

剩余参数

  function sum1(name) {
    let r = 0;
    for (let i = 1; i < arguments.length; i++) {
      r += arguments[i];
    }
    console.log(`${name}总分为：${r}。`);
  }
  sum1("Tom", 80, 90, 100);

//对比
function sum2(name, ...scores) {
    let r = scores.reduce((x, y) => x + y, 0);
    console.log(`${name}总分为：${r}。`);
  }
  sum2("Tom", 80, 90, 100);

注：

1.箭头函数不支持arguments对象。

2.箭头函数支持剩余函数。

3.arguments对象包含了剩余参数值。 剩余参数没有接收到实参值时，为空数组。

4.剩余参数必须位于参数列表的末尾。

函数调用

构成函数主体的JavaScript代码在定义之时并不会执行，只有调用该函数时，它们才会执行。

有4种方式来调用JavaScript函数： 

1.作为函数

2.作为方法

3.作为构造函数

4.通过它们的call()和apply()方法间接调用

回调函数

被作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数

let arr = [1, 22, 13, 4, 5];
arr.sort(function (a, b) {
  return a - b;
});
arr.sort((a, b) => b - a);

let data = {
  x: 10,
  y: 20,
  show: function (how) {
    how(this.x, this.y);
  },
};
data.show(function (a, b) {
  console.log(`(${a},${b})`);
});
data.show((a, b) => {
  console.log(`${a}->${b}`);
});

call( )和apply( )方法

通过调用方法的形式来间接调用函数。

call()和apply()的第一个实参是要调用函数的主体对象，它是调用上下文，在函数体内通过this来获得对它的引用。

bind( )方法 

将函数绑定至某个对象，且可以绑定参数值。

当在函数f()上调用bind()方法并传入一个对象o作为参数，这个方法将返回一个新的函数。

(以函数调用的方式)调用新的函数将会把原始的函数f()当做o的方法来调用。

传入新函数的任何实参都将传入原始函数。

通过bind()为函数绑定调用上下文后，返回的函数不能通过call和apply修改调用上下文对象。

let obj = {
    x: 10,
    show: function (y) {
      let r = "";
      for (let i = 0; i < y; i++) {
        r += this.x + " ";
      }
      console.log(r);
    },
  };
  obj.show(4);
  let ss = obj.show.bind({ x: 1000 });
  ss(3);
  ss.call({ x: 2000 }, 3);