欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
你不得不学的es6
2017-09-26 10:08:19   来源:   评论:0 点击:

在没有学习 ES6 之前,学习 React,真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础,包括闭包、函数、原型链和继承,但是 React 中已经普遍使用 ES6 的语法,包括 modules、class、箭头函数等,还有 JSX 语法。所以,在学习 React 之前一定要先学习 ES6。

关于 ES6 你必须要知道的一个教程,ECMAScript 6入门。这本书对于 ES6 的讲解非常详细,一步一步跟着来,绝对会对 ES6 的语法都了解到。

学习 ES6,还要知道一个 ES6 的语法编译器,Babel。ES6 出来很久了,并不是所有浏览器都支持,Babel 就可以把 ES6 代码转换成 ES5,让所有浏览器都支持你写的代码。Babel 内嵌了对 JSX 的支持,学习 React 必备。在线实验是一个 Babel 的在线编译器,可以用来练习 ES6 语法,并实时观测转换成 ES5 的代码效果。

准备工作做完了,接下来开始今天的主题,你不得不学的 ES6!

箭头函数

讲真,自从出了箭头函数之后,再也不用担心 this 问题了,而且就简化代码这一方面来说,箭头函数可谓是装逼神器。

箭头函数有几点需要注意,如果 return 值就只有一行表达式,可以省去 return,默认表示该行是返回值,否则需要加一个大括号和 return。如果参数只有一个,也可以省去括号,两个则需要加上括号。比如下面的例子:

var f = v => v*2;
// 等价于
var f = function(v){
  return v*2;
}

// 判断偶数
var isEven = n => n % 2 == 0;

// 需要加 return
var = (a, b) => {
  if(a >= b)
    return a;
  return b;
}

还有 this 的问题,我觉得这篇文章说的非常好。普通函数的 this 是可变的,我们把函数归为两种状态,一种是定义时,一种是执行时,如果仔细研究会发现,函数中的 this 始终是指向函数执行时所在的对象。比如全局函数执行时,this 执行 window,对象的方法执行时,this 执行该对象,这就是函数 this 的可变。而箭头函数中的 this 是固定的,看下面的例子:

function obj(){
  setTimeout(()=>console.log(this.id), 20);
}
var id = 1;
obj.call({id: 2}); // 2

执行的结果是 2 而不是全局的 1,表示 setTimeout 函数执行的时候,this 指向的不是 window,这和普通函数是有区别的。

实际上,箭头函数并没有 this 对象,将箭头函数转成 ES5 会发现:

// ES6
function obj() {
  setTimeout(()=>console.log(this.id), 20);
}

// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log(_this.id);
  }, 20);
}

通过 call aply 等方法是无法绑定 箭头函数中的 this:

var f = () => this.x;
var x = 1;
f.call({x: 2}); // 1

对 this 的一个总结就是 在对象的方法中直接使用箭头函数,会指向 window

相关热词搜索:

上一篇:如果要学习web前端开发,需要学习什么?
下一篇:分享一个目前可用的翻墙方法

收藏