JavaScript基础（四）

JS回调函数

将A函数作为B函数的参数，那么A函数就是回调函数

function fx(variable, callback) {
  callback();
}
fx('', ()=>{});

// sort(cb)
const arr = [1, 2, 3];
arr.sort((x, y) => x - y); //实现升序
arr.srot((x ,y) => y - x); //实现降序

// forEach(cb)
const arr = [1 ,3 ,4];
arr.forEach((element, index, array) => {});

// filter(cb)
const arr = [1 ,3 ,4];
const arr2 = arr.filter((element, index, array) => { return true; });

// map(cb)
const arr = [1, 2, 3];
const arr2 = arr.map((element, index, array) => element);

// reduce(cb, initNum)
const arr = [1, 2, 3];
const ret = arr.reduce((x, y) => { return x + y; });

JS高阶函数

一个函数的参数或返回是函数，那么这个函数就是高阶函数

function fx(variable, callback) {
  callback();
}
fx('', ()=>{});

// 定义一个公共的，不应被修改的函数
function fn() {
  console.log('fn');
  return 'fn';
}
// 定义一个高阶函数，其返回值是一个函数
function fx(callback) {
  console.log('fx');
  return () => {
    console.log('cb');
    let result = callback();
    return result;
  }
}
// 调用高阶函数，并接收一个函数
let f = fx(fn);
// 调用返回函数
let result = f(); // fx cb fn

JS函数闭包

闭包就是能够访问外部函数作用域变量的函数；
在函数定义时，函数的作用域就已确定，这个作用域称作词法作用域；
在函数调用时，闭包中的作用域与调用函数的位置无关，而是由词法作用域决定。

// 一个函数调用计数器
function counter() {
  let count = 0; // 函数作用域变量
  return ()=> {
    count++; // 调用时计数
    console.log(count);
  } // 闭包
}
const fn = counter(); // fn闭包函数

// 在调用时，箭头函数中count处于外层counter()函数作用域中
// 作用域的位置在函数定义时就已确定
fn(); // 1
fn(); // 2

闭包生命周期

• 在外部函数调用时，闭包创建
• 在内部函数没有引用时，闭包销毁（垃圾回收机制）

JS递归函数

function fn() {
  fn();
}
fn();

JS可变参数

arguments是函数的一个隐藏参数，是一个类数组对象；
函数调用时传递的实际参数会存到arguments中；
arguments允许for...of...循环遍历或使用索引arguments[index]访问参数；
但由于arguments并非数组，所以无法使用数组相关函数。

function fn() {
  console.log(arguments);
}
fn(); // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]

可变参数使用...标识，可变参数中的参数以数组结构存储；

function fn(...args) {
  console.log(args);
}
fn(); // []

JS 函数对象方法call/apply

函数可以通过call()/apply()方法执行调用函数

function fn() {}
fn.call();
fn.apply();

call()/apply()中传递的第一个参数作为this

function fn() {
  console.log(this);
}
fn.call(); // window
fn.apply(); // window
fn.call({}); // {}
fn.apply({}); // {}

call()/apply()的区别在于apply()在传递参数时需要以数组形式传递

function fn(x, y) {
  console.log(this, x, y);
}
fn.call({}, 1, 2); // {} 1 2
fn.apply({}, [1, 2]); // {} 1 2

JS 函数对象方法bind

bind()用于创建新函数，并且可以为新函数绑定this

// 创建新函数
function fn() {}
const f = fn.bind();
f();

// 绑定this
function fn() {
  console.log(this);
}
const f = fn.bind({});
f(); // {}

// 绑定this及参数
function fn(x, y) {
  console.log(this, x, y);
}
const f = fn.bind({}, 10); // 绑定this={} 第一个参数x=10
f(20); // {} 10 20