美文网首页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

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

相关文章

  • arguments用法

    es5 es6箭头函数

  • 箭头函数介绍

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。箭头函数与传统的JavaScript函数主...

  • ES6 写法示例

    匿名函数调用 ES5 ES6 箭头函数 将数组的内容 * 2 ES5 ES6 默认参数 ES5 ES6 不定参数 ...

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

    1,ES5函数 例 function test() {},函数分为四个部分: 第一部分,保留字function; ...

  • ES6基础笔记二

    ES6 箭头函数、函数扩展 ES5: function add(a,b){return a+b;}console....

  • 箭头函数:我只是this的搬运工

    箭头函数与传统JavaScript的不同 先来谈谈ES5中的this 在ES5中,每个函数在被调用时都会自动取得t...

  • babel转码器

    npm install--save-dev @babel/core es6=>es5 箭头函数转为普通函数 bab...

  • es6箭头函数

    es5: var sum = function (a,b){ return a+b; } es6箭头函数:...

  • ES6基本语法

    ES6是什么? JavaScript的第六版,在ES5的基础上增加了许多特性:箭头函数、字符串插值、代理、生成器、...

  • JS新特性

    ES ES5 ES6 箭头函数 Promise Symbol属性 Iterator Generator async...

网友评论

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

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