前端 js 经典：函数

1. 声明

function fn() {} // 正常
let fn = () => {}; // 箭头函数
let fn = function () {}; // 匿名函数

2. 使用

fn(); // 直接调用
document.onclick = fn; // 事件触发
(function () {})(); // 函数自执行

3. 传参

function fn(arg1, arg2) {} // 形参
fn(1, 2); // 实参

4. 不定参

function fn() {
  console.log(arguments);
}
fn(1, 2, 3, 4); // [1,2,3,4]

5. 返回值

// 所有函数都会有返回值，如果没有定义，默认返回undefined
// 在函数中，return之后的代码就不会再执行了
function fn1() {} // return undefined

6.闭包

函数体内的数据(变量和函数声明)都可以保存在函数作用域内，这种特性在计算机科学文献中被称为“闭包”

形式：函数嵌套函数；

作用：子函数可以访问父函数的作用域，但是父级不能访问子级的。

7.this 指向

this 永远指向最后调用它的那个对象

// 1. 指向window
function fn() {
  console.log(this);
}
fn();

// 2. 指向对象 obj
var obj = {
  fn: function () {
    console.log(this);
  },
};
obj.fn();

8. 改变 this 指向

// 1. 箭头函数
// 箭头函数的 this 始终指向函数定义时的 this，而非执行时。
// 箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined
var name = "y";

var obj = {
  name: "q",
  fn1: function () {
    console.log(this.name); // q
  },
  fn2: function () {
    setTimeout(() => {
      console.log(this.name); // q
    }, 100);
  },
  fn3: () => {
    console.log(this.name); // y
  },
};

// 2.  call、apply、bind

var obj = {
  name: "yq",
  fn: function (age, sex) {
    console.log(`${this.name} is ${age} ${sex}`);
  },
};

var obj1 = {
  name: "yy",
};

obj.fn(18, "man"); // yq is 18 man
obj.fn.call(obj1, 20, "superman"); // yy is 20 superman
obj.fn.apply(obj1, [30, "coder"]); // yy is 30 coder
obj.fn.bind(obj1, 31, "goodman")(); // yy is 31 goodman

​