JS函数详解

1.函数四种定义方式

1.声明方式定义：

funciton f(参数){}

2.函数表达式定义：

var f = function(){}
var f = function f2(){}

3.箭头函数：

var f = () => {}

4.Function构造函数：

# 不推荐使用，因为这段代码会被解释两次
var f = new Function();

> 注：第一种属于声明方式，解释器会将声明提升在顶部，而后三种是把函数复制给了变量 f 不会被解释器提升

2.函数的调用

/* 1. 普通函数 */
function fn() {
	console.log('人生的巅峰');
}
 fn(); 
/* 2. 对象的方法 */
var o = {
  sayHi: function() {
  	console.log('人生的巅峰');
  }
}
o.sayHi();
/* 3. 构造函数*/
function Star() {};
new Star();
/* 4. 绑定事件函数*/
 btn.onclick = function() {};   // 点击了按钮就可以调用这个函数
/* 5. 定时器函数*/
setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次
/* 6. 立即执行函数(自调用函数)*/
(function() {
	console.log('人生的巅峰');
})();
/* 7.通过call()、apply()方法调用

3.函数自带的属性与方法

1.属性

• length：命名参数的个数
• prototype：指向原型对象

2.方法

• apply(this, 参数数组)：参数数组可以是Array实例，也可以是argumengts对象

function sum(num1, num2) { 
 return num1 + num2; 
} 
function callSum1(num1, num2) { 
 return sum.apply(this, arguments); // 传入 arguments 对象
}
function callSum2(num1, num2) { 
 return sum.apply(this, [num1, num2]); // 传入数组
} 
console.log(callSum1(10, 10)); // 20 
console.log(callSum2(10, 10)); // 20

• call(this, 参数1, 参数2)：作用同上

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
sayColor(); // red 
sayColor.call(this); // red 
sayColor.call(window); // red 
sayColor.call(o); // blue

• bind(this, 参数)：调用该方法并传入对象会创建一个新的函数实例，并将this 值指向为传入的对象，但是并不会调用函数

window.color = 'red'; 
var o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
let objectSayColor = sayColor.bind(o); 
objectSayColor(); // blue

注：call、apply都可以修改 this 对象的指向，全局下 this 指向全局 window 对象

4.参数

1. 函数参数在内部表现为一个数组
2. 函数内部通过访问 arguments对象获取传进来的参数值
3. 箭头函数不能使用 arguments 对象访问

5.作用域链

1.执行上下文：变量或函数的上下文决定了哪些数据或行为可以被访问，就是代码的执行环境
全局上下文：在浏览器中为window对象，通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法，let 和 const 不会，关闭窗口或浏览器时则会销毁变量和函数
局部上下文：每调用一个函数，就会创建一个局部上下文
2.作用域链：代码在一个环境中执行时，会创建变量对象的一个作用域链
内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数

6.闭包

一个作用域可以访问另外一个函数内部的局部变量

作用：延申了变量的作用范围