js系列-函数Function

先思考几个问题：

1.函数是什么

2.怎么定义函数

函数是对象

函数是Function的实例对象，函数名是指针，通过下面这种方式定义函数很容易理解这句话：

let fun = new Function('a','b','c','return a+b+c');

Function是构造函数，括号内为参数，最后一个参数始终会被解析为函数体。

定义函数

//函数声明方式
function user(){
    console.log('user')
}
//声明变量方式
let user = function() {
    console.log('user')
}

注意：标准声明优先级高于赋值声明

//标准声明优先级高于赋值声明
user('WoNiuJun');//function:WoNiuJun
//函数声明方式
function user(name){
    console.log('function:' + name)
}
//声明变量方式
var user = function(name) {
    console.log('var:' + name)
}

匿名函数

经常用到

let arr = [1, 2, 3].filter((item,index) => item > 1);
console.log(arr);//[2,3]

立即执行函数

函数定义时立即执行

默认参数

//以前我们需要在函数中使用管道符||赋值
function add(a,b){
    b = b || 3;
    console.log(a+b);
}
add(1);//4
//现在我们可以使用默认值
function total(a,b=3){
    console.log(a+b);
}
total(1);//4

arguments

arguments 是函数参数集合(类数组)

//以前我们可以通过arguments获取传递的多个参数
function add() {
   return [...arguments].reduce((total,item) => total + item,0);
}
console.log(add(1,2,3));
//现在我们可以用展开语法接收多个参数
function add1(...args) {
   return args.reduce((total,item) => total + item,0);
}
console.log(add1(1,2,3));

箭头函数

箭头函数是函数声明的简写形式，有下面几种情况表现形式。

无参数时使用空扩号即可

let sum = () => {
	return 1 + 2;
}
console.log(sum()); //3

函数体为单一表达式时不需要 return 返回处理，系统会自动返回表达式计算结果。

let sum = () => 1 + 2;
console.log(sum()); //3

只有一个参数时可以省略括号 

let small = [1, 2, 3, 5].filter(item => item <= 3);
console.log(small);

this指向

调用函数时 this 会隐式传递给函数指函数调用时的关联对象，也称之为函数的上下文。其实结合上面讲的arguments,我们可以知道调用函数时会默认传递两个对象一个是this，一个是arguments。

函数调用

'use strict'
function user(){
    console.log(this);//非严格模式下：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
    console.log(this);//严格模式下：undefined
    console.log(arguments);//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
user();

箭头函数

箭头函数中的this指向定义函数时的所在的上下文

let user = {
  name: 'Tom',
  getName: ()=>{
      console.log(this.name);//Tom
  }
}

call

改变this，即改变函数上下文。

有这样一个场景，有一个Tom对象，他需要一个计算年龄的方法，但他自身没有，刚巧有一个User函数有这个计算年龄的方法，Tom就想借用User的方法，这时call就派上用场了，用代码实现就是：

function User(age){
    this.age = age;
    this.getTenAfterAge = ()=>{
        return this.age + 10
    }
}

let Tom = {name:'Tom'};

User.call(Tom,20);//改变User中的this上下文，即this指向Tom
console.log(Tom.getTenAfterAge());//30

call和apply

call与apply 两个方法作用一样都是改变this指向，只是在传递参数上不同。

• apply 用数组传参
• call 需要分别传参

bind和call/apply

bind()是将函数绑定到某个对象

• 与 call/apply 不同bind不会立即执行
• bind 是复制函数形为会返回新函数