JS ES6 箭头函式 DAY73

箭头函式

传统函式

const callName = function(someone){    return '我是' +  someone;}console.log(callName('皮杰先生'));

箭头函式

// 箭头函式// 若是程式码内容为表达式时，不需要大括号{}// 若只有一个参数 可省略括号const callName = someone => '我是' + someone;console.log(callName('皮杰先生'));

与传统函式不同之处

传统函式

var nums = function(){    console.log(arguments);}nums(1,2,3,4,50,100);

箭头函式

// arguments is no definedvar nums = () =>{    console.log(arguments);}nums(1,2,3,4,50,100);

解决方式

其余参数
原型是阵列(与 arguments 不同)

var nums = (...arg) =>{    console.log(arg);}nums(1,2,3,4,50,100);

箭头函式没有自己的 this

传统函式

var myName = '全域';var person = {    myName:'皮杰先生',    callName: function(){        console.log('1',this.myName); // 1 皮杰先生        setTimeout(function(){            console.log('2',this.myName); // 2 全域            console.log('3',this); // window        })    }}person.callName();

箭头函式

var myName = '全域';var person = {    myName:'皮杰先生',    callName: function(){        console.log('1',this.myName); // 1 皮杰先生        setTimeout(()=>{             // 这里会用外层作用域的 this            console.log('2',this.myName); // 2 皮杰先生            console.log('3',this); // person        })    }}person.callName();

var myName = '全域';var person = {    myName:'皮杰先生',    callName: ()=>{        console.log('1',this.myName); // 1 全域        setTimeout(()=>{             // 这里会用外层作用域的 this            console.log('2',this.myName); // 2 全域            console.log('3',this); // window        })    }}person.callName();

也无法透过 call，apply，bind 重新给予 this

const family = {    myName:'123',}const fn = (a,b) =>{    console.log(this,a,b); // window 小黑 小白}fn.call(family,'小黑','小白');

const fn = function(a){    this.name = a;}const ArrowFn = a =>{    this.name = a;}console.log(fn.prototype);console.log(ArrowFn.prototype); // undefinedconst a = new fn('a');console.log(a);const b = new ArrowFn('b');console.log(b);

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷