ES6箭头函数

1.箭头函数的写法

如果函数内有返回值

var fn = v => v + 1

返回值如果不是表达式(是对象)，用()括号返回

var fn = v => ({ obj: v })

返回值如果不是表达式(也不是对象)方法体内按正常写

var fu = () => {
    var a = 1;
    var b = a+1;
    return b;
}

2.箭头函数和普通函数的区别

• this指向不同：箭头函数的this指向继承自其上一层作用域的this，无法通过call和apply改变this指向。箭头函数的this指向由函数定义位置所决定而不是函数调用位置决定
• 不能作为构造函数(不能new) ，也没有prototype属性
• 箭头函数没有arguments参数，但是可以使用...rest剩余参数
• 箭头函数不能使用yield命令，所以箭头函数不能用作Generator函数

1. this指向的问题

箭头函数本身是没有this的，他的this是从他作用域链的上一层继承来的，并且无法通过call和apply改变this指向

箭头函数的this，是看箭头函数定义位置所在的作用域，而不是函数调用的位置（也可以说继承上一级作用域的this）

2. 不能作为构造函数(不能new) 没有prototype属性

3. 没有arguments对象(函数传入的实参的集合)，可以利用rest参数：...arguments

4. 不能使用yield命令，因此箭头函数不能用作 Generator 函数

function* fn(){
  yeild 1;
  yeild 2;
  return 3;
}
var f = fn();
f.next();// Generator 函数调用

5.箭头函数新扩展的方法——给函数的参数指定默认值；与解构赋值默认值配合使用；通过rest参数获取函数的多余参数

1.箭头函数使用默认值

普通函数： 使用短路运算来给默认值

箭头函数使用默认值

function fn (x, y) {
  y = y || 1
  console.log('合计：'x + y)
}
//箭头函数
function fn (x, y = 1) {
  console.log('合计：'x + y)
}

2.与解构赋值默认值配合使用

// 与解构赋值默认值配合使用
function fn1 ({x, y = 1}) {
  console.log('合计：'x + y)
}
fn1({x: 1})

3.通过rest参数获取函数的多余参数 （rest参数只能放在末尾，不能再首位或中间）

function fn (x, ...y) {
  console.log(x)
  console.log(y)
}
fn(1, 2, 3, 4)

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
console.log(m1())
console.log(m2())
console.log(m1({x: 3}))
console.log(m2({x: 3})) // 3, undefined

6.箭头函数的实际运用

vue项目中的实际运用：点击按钮时，打开msgbox的窗口。在普通函数和this函数下不同写法

7.箭头函数相关面试题

面试题1

        var name = 'window'
        var obj = {
            name: 'obj',
            methods: () => {
                console.log(this.name)
            },
            fn: function (cb) {
                cb()
            }
        }
        obj.fn1 = function () {
            // 定义时的作用域
            obj.fn(() => { console.log(this.name) })
        }
        var fn1 = obj.fn1
 
        // VO:{
        //     name: undefined->window,
        //     obj: undefined->{},
        //     fn1:undefined->bj.fn1->function () {obj.fn(() => { console.log(this.name) })
        // }
 
        obj.methods()//window 箭头函数定义在obj中this指向window
        obj.fn(() => { console.log(this.name) }) // window 此处箭头函数定义在全局所以指向window
        fn1() //window fn1定义时在window下，又调用obj.fn，obj.fn也在window下
        obj.fn1()//obj 定义时的作用域在obj.fn下所以指向obj

面试题2

var fn = function () {
  return () => { console.log(this.name) }
}
var obj1 = {
  name: '张三'
}
var obj2 = {
  name: '李四'
}
var name = '王五'
obj1.fn = fn
obj2.fn = fn
obj1.fn()()
obj2.fn()()
fn()()

分析：

        // VO: {
        //     fn: function () {
        //         // fn为普通函数
        //         return () => { console.log(this.name) }
        //     }
        //     obj1: undefined -》'张三',
        //         obj2: undefined -》'李四',
        //             name: undefined -》王五
        // }
        
            var obj1 = {
                name: '张三'，
                fn: function () {
                    return () => { console.log(this.name) }
                }
            }
        
                
            var obj2 = {
                name: '李四',
                fn: function () {
                    return () => { console.log(this.name) }
                }
            }
        
 
         obj1.fn()() //'张三' obj1.fn()普通函数指向obj，里面箭头函数也指向obj
         obj2.fn()() //'李四'
        fn()() //'王五' fn指向全局，window，所以里面箭头函数指向window

 

面试题3

        var user = {
            name: '张三',
            fn: function () {
                var obj = {
                    name: '李四'
                }
                var f = () =>console.log(this.name);
                return f.call(obj)
            }
        }
 
        var res = user.fn();
 
// VO:{
//     user:undefined->{},
//     res: undefined->user.fn()执行结果f箭头函数
// }
 
// f箭头函数定义在fn下面，fn由user调用，所以指向user,箭头函数执行时就是，'张三'，返回箭头函数为obj改变不了

8.****实际面试题中注意：

1. 如果箭头函数定义在对象中(methods)，对象本身不存在作用域，只有全局作用域和函数作用域，所以箭头函数this指向window。

2.如果上面这种情况，对象下面定义了一个普通方法fn，普通方法里面又定义了一个箭头函数。此时箭头函数的this指向普通方法，而普通方法是谁调用指向谁，箭头函数this跟着普通方法改变。所以打印obj

3.箭头函数定义在对象下的对象中和1情况一样

4.箭头函数this指向不能通过call\apply等方法改变，所以obj.pro.proFn.apply(this);打印结果仍然是window

        var name = "window";
        var obj = {
            name: 'obj',
            // 箭头函数
            methods: () => {
                console.log(this.name)//箭头函数定义在obj对象内部，由于对象不存在作用域，所以在全局作用域，所以此时箭头函数的作用域为window
            },
            // 普通函数里面再定义箭头函数
            fn: function(){
                return ()=> console.log(this.name);
            },
            pro: {
                proFn: ()=>console.log(this.name)
            }
 
        }
        obj.methods(); //window
        obj.fn()(); //obj fn()为普通函数，obj调用fn所以this指向obj，里面的箭头函数也指向obj
        obj.pro.proFn(); //window proFn是箭头函数，this由定义位置作用域决定，定义在对象pro中，pro对象本身不存在作用域，所以指向window
        obj.pro.proFn.apply(this); //window  proFn是箭头函数,箭头函数不能通过call/apply等改变其this指向，所以仍然指向window