美文网首页ES6学习笔记
ES5函数与ES6箭头函数比较(javascript基础)

ES5函数与ES6箭头函数比较(javascript基础)

作者: Chaos_YM | 来源:发表于2019-02-21 00:01 被阅读0次

    1,ES5函数

    例 function test() {},函数分为四个部分:

    第一部分,保留字function;

    第二部分,函数名,可以省略(function(){}..这是一个匿名函数anonymous);

    第三部分,一对圆括号,中间为参数,可为空,附带两个隐藏参数,this和arguments;

    第四部分,执行的代码块;

    这部分只有一对括号,作用却很大。比如调用一个函数:var ss = aa; 和 var ss = aa(); 是不一样的。前面的是把函数的指针赋给了ss,ss也就是这个函数,后面的是把aa函数执行的结果赋给了ss  , ss是它的返回值。

    第五部分,最后还可以加一对圆括号,为调用函数。

    2,ES6箭头函数

    例 () => {},函数仅保留两个部分:

    第一部分,一对圆括号,传参;

    第二部分,执行的代码块。

    第三部分,最后还可以加一对圆括号,为调用函数。

    以上,仅为结构的简单差别,用法上要做中注意的是this的指向问题:

    ES5中,this指向函数执行时的上下文环境对象,this的指向有三种情况:

    1,如下,b()是C对象以属性的形式调用的,c.b(),此时 b 函数中的this指向的是this.c这个对象;

    注意:此种调用方式经常会出现this绑定丢失的情况,比如函数作为参数传递的时候(存在隐式赋值,这时候虽然形式上是obj.fn,实际上等于var a = obj.fn,与直接调用fn是一样的,另比如settimeout等js内置函数,也是一样)

    隐式绑定

    2,普通函数的调用,b(),此时this指向window;

    默认绑定。

    3,c.b().call({ name: "B"}),call会使this指向改变。

    显式绑定

    以此原理,衍生出了硬绑定:用一个函数包含对象c和函数b(),内部调用b.call(c),重复使用外部函数,实现b的this绑定。

    es5提供了api,b.bind(c)


    4,第四种是new操作符创建新对象的四个步骤中,会修改this指向:

    1),创建一个新对象

    2),原型继承

    3),绑定this

    4),return,如无return值,返回本身


    以上四中优先级:

    new > 显式 > 隐式 > 默认


    console打印结果为a+

    ES6中,箭头函数this的指向,是定义时,this的指向对象。此处指向factory构造函数的实例。

    console打印结果为a

    以上,欢迎大家借鉴与指正!

    相关文章

      网友评论

        本文标题:ES5函数与ES6箭头函数比较(javascript基础)

        本文链接:https://www.haomeiwen.com/subject/kaohyqtx.html