前端教程学习之ES6

最近公司由于人事流动，前端人手比较少，被拉壮丁写前端，一脸懵逼，跌跌撞撞，一个星期，前端负责的部分完成了七七八八，但是关于原理之类的不懂，都是copy其他界面或者其他项目慢慢来的。大体的语法懂一些。趁着周末，又大体看了些前端es6的语法，不得不说，应该是越来越简单了吧，也有类，继承之类的概念。

es6是JavaScript语言的标准，如你所想，有es6，当然也会有es5存在，es5是es6的上一个版本，但是这两个版本之间的差异较大，有了许多新特性，也正是这些新特性，使前端开发变得简单（相对于以前来说），学习es6之前，要对JavaScript有简单的了解掌握，可自行百度。

es6相对于与之前，新增加了两个关键字：let,const。大体描述：let定义的变量不会进行变量提升，const定义的常量不能被修改。并且，let与const都是块级作用域。一脸懵是吧，慢慢道来。

在es6之前的版本中，我们想要定义一个变量，都是通过var关键字进行定义的。可以想一下，通过var定义的话有什么比较坑的地方。我们通过var定义的变量，不管定义在哪个位置，都是视为被声明在函数的顶部。

console.log(test);
var test='study';

有如上代码的话，输出的是undefined,这段代码等同于

var test;
console.log(test);
test='1111';

这就是所谓的变量提升。也就是说，我们使用let进行定义的话不会有这种情况的存在。

至于const定义的变量不能被修改，是什么意思呢，还是拿上面代码来说，略改一下

var test='111';
console.log(test);//111
test='222';
console.log(test);//222

不用细说了吧，看下打印结果，var定义的变量是允许修改的。

import，export导入导出模块。

这两个不想细说，和后端的一样，类似于class与import导包。不过，在es6中，允许部分导入，使用部分倒入时候，使用{}，{}中的就是部分导入的内容，如下：

import {name, age} from './example' 。

在箭头函数这块，懵逼了好久，所以想具体详细的讲下箭头函数。但是，个人认为，es6相对于es5比较，最大的变化就是class，就是上文讲的import与export部分，耐于篇幅与兴趣，上部分忽略了很多东西，可自行百度下，很简单。

讲箭头函数之前，先了解下前提知识--以前让前端抓狂的this对象。关于this对象，这篇博客写的挺好https://www.cnblogs.com/kongxy/p/4581223.html，摘抄一部分：

JS中this关键字很常见，但是它似乎变幻莫测，让人抓狂。这篇文章就来揭示其中的奥秘。

借助阮一峰老师的话：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。这句话看似平常，可是要非常注意三个字：“运行时”，这说明this关键字只与函数的执行环境有关，而与声明环境没有关系。也就是这个this到底代表的是什么对象要等到函数运行时才知道，有点类似函数定义时的参数列表只在函数调用时才传入真正的对象。理解了这一点对后面this关键字规律的掌握有很大帮助。

this关键字虽然会根据环境变化，但是它始终代表的是调用当前函数的那个对象。这就引出了JS中函数调用的问题。在JS中调用函数的模式可以分为4种：方法调用模式、函数调用模式、构造器调用模式、apply调用模式。这些模式在如何初始化关键参数this上存在差异。。。

es6的箭头函数主要解决了this指针的问题。

function Person() {
  //Person（）构造器定义了`this`指针，指向了其实例本身
  this.age = 0;

  setInterval(function growUp() {
    //在non-strict模式下，growUp()方法定义了‘this’作为一个全局的对象。其
    //不同于Person()构造器生成的‘this’指针
    this.age++;
  }, 1000);
}
var p = new Person();

---------------------

本文来自 朱清云的技术博客 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/chancein007/article/details/78536460?utm_source=copy

在网上找了段这个代码，不妨分析下，方法setInterval是方法调用模式（看上文有关于this的介绍），但是在方法setInterval里面有存在一个方法growUp，最终调用方法growUp是采用函数调用模式调用的，因此，里面的this对象指的是window，我们想要在函数growUp里面使用Person的age属性应该怎么操作呢，接下来贴上具体代码

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    //这个回调函数引用了`that`变量，其值就代表的是当前对象，而不是一个全局的     //一个this对象
    that.age++;
  }, 1000);
}

---------------------

本文来自 朱清云的技术博客 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/chancein007/article/details/78536460?utm_source=copy

先把Person的this指针赋值给that，然后在growUp里面使用that对象。这就类似于将that对象绑定到Person的this对象上面。【具体代码可以看文中的链接地址】。但是，这种方式麻烦不麻烦，而且一不留神会出错。接下来是展现箭头函数的妙处了。

在箭头函数中，this指针指向的是当前的对象。也就是说上文中的代码可以改为：

function Person(){
  this.age = 0;

  setInterval(() => {
   // |this| 自动的指向当前Person的构造器生成的Person实例 
   //是不是感觉很简洁
    this.age++; 
  }, 1000);
}

var p = new Person();

---------------------

本文来自 朱清云的技术博客 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/chancein007/article/details/78536460?utm_source=copy

this的妙用有没有感受到些许，更多this详细介绍转博客https://blog.csdn.net/chancein007/article/details/78536460?utm_source=copy

前端教程学习之ES6

猜你喜欢