Javascript中的函数

学习目标

1. 函数定义有几种方式？有什么区别？
2. es5和es6中函数参数该怎么使用, 理解不同数据类型函数参数传值方式的不同
3. 不同方式调用函数的区别
4. 理解函数内部this指向的问题及如何修改this的指向
5. es6新特性-箭头函数

定义函数

定义函数的方式有两种: 函数声明和函数表达式

• 函数声明

function test(arg0, arg1){
}

函数声明有一个重要特征就是函数声明提升, 就是在执行代码之前会先读取函数声明, 
这就意味着可以把函数声明放到调用它的语句后面
test();
function test(){
}

• 函数表达式(匿名函数)

var test = function(arg0, arg1){
}

必须先定义才能调用
test(); // 报错
function test(){
}

函数参数

• arguments

1. js中的参数在内部是用一个数组来表示的
2. 在函数体内可以使用arguments对象来访问这个参数数组
3. 假如你定义的函数有两个参数，在调用的时候不一定要传递两个参数，一个，三个，不传都可以

function sayHi(){
    console.log(arguments);
}
sayHi(); //[Arguments] {}
sayHi(1, "zhangsan"); //[Arguments] { '0': 1, '1': 'zhangsan' }
sayHi(1, "zhangsan", true); //[Arguments] { '0': 1, '1': 'zhangsan', '2': true }

• rest

1. es6新特性
2. es6中不能使用arguments
3. arguments是伪数组, rest是真数组

function sayHi(...args){
    console.log(args);
}
sayHi(1, 2, 3); //[ 1, 2, 3 ]

• 传值方式

1. 基本数据类型值传递
2. 引用数据类型引用传递

调用函数方式

• 函数调用

var age = 10;
var p = {
    age: 11,
    say:function () {
        console.log(this); //this是window
        console.log(this.age); //undefined
    }
}
var p1 = p.say; 
p1();

• 方法调用

var age = 10;
var p = {
    age: 11,
    say:function () {
        console.log(this); // { age: 11, say: [Function: say] } p
        console.log(this.age); //11
    }
}
p.say();

• 构造函数

var age = 10;
function Person(age) {
    this.age = age;
    this.say = function () {
        console.log(this); //Person { age: 11, say: [Function] } 构造函数的实例
        console.log(this.age); //11
    }
}
var p1 = new Person(11);
p1.say();

• 上下文方式

// 上下文有三种调用方式，call，apply，bind
function f1() {
    console.log(this);
}
// call方法的第一个参数决定了函数内部的this值，apply可以替换call
f1.call([1,2,3]);  //[ 1, 2, 3 ]
f1.call({name:"test", age:11}); //{ name: 'test', age: 11 }
f1.call(1); //[Number: 1]
f1.call("abc") //[String: 'abc']
f1.call(true); //[Boolean: true]
f1.call(false); //[Boolean: false]
f1.call(undefined);// this指向window

call和apply的区别

1. 都可以改变函数内部this的指向
2. 传参的形式不同

函数内部this指向

调用的方式不同, this的指向不同, 一般指向我们的调用者

• 修改函数内部this的指向
  call

var o = {
    name: 'sn'
}
function fn(a, b){
    console.log(this, a+b);
}
fn(1, 2); // this的指向是window, 结果是3
fn(o, 1, 2) // this的指向是对象o, 参数使用逗号隔开, 运行结果是3

apply

var o = {
    name: 'sn'
}
function fn(a, b){
    console.log(this, a+b);
}
fn(1, 2); // this的指向是window, 结果是3
fn(o, [1, 2]) // this的指向是对象o, 参数使用数组传递, 运行结果是3

bind
不会调用函数

var o = {
    name: 'sn'
}
function fn(a, b){
    console.log(this, a+b);
}
var f = fn.bind(o, 1, 2);
f(); // this指向对象o

call、apply、bind的异同

1. 都可以修改this的指向
2. call和apply会调用函数， bind不会调用函数
3. 传参的方式不同

ES6新特性-箭头函数

• 定义箭头函数

(参数)=>{}
注:
如果只有1个参数, ()可以省略
如果只有1个语句, {}可以省略

• 箭头函数 vs 普通函数

1. 普通函数, this指向一般指向我们的调用者, 箭头函数的this指向定义时所在的对象
2. 箭头函数不可以当构建函数, 不可以new
3. 不可以使用arguments, 用rest代替