文档章节

ES6中箭头函数,var,class详解

lemonzoey
 lemonzoey
发布于 2017/08/28 16:16
字数 2510
阅读 6
收藏 0
点赞 0
评论 0

一,箭头函数和普通函数的区别

箭头函数简介:箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式第一种,省略{}和rerurn。第二种可以包含多条语句,这时候就不能省略{ ... }和return,如果参数不是一个,就需要用括号()括起来:

//第一种
 x => x * x
//第二种
x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

等同于

//第一种
function (x){
return x*x
}
//第二种
function (x){
    if(x)>0{
        return  x*x
        }
      else{
        return  -x*x
        }
}

区别:

1、首先箭头函数作为匿名函数,是不能作为构造函数的,不能使用new

2、this,普通函数构造函数的 this 指向了一个新的对象;如果函数是作为对象的方法被调用的,则其 this 指向了那个调用它的对象;但是箭头函数的则会捕获其所在上下文的 this 值,作为自己的 this 值。在使用call或apply绑定时,相当于只是传入了参数,对this没有影响

3、箭头函数不绑定arguments,取而代之用rest参数…解决

4、箭头函数当方法使用的时候没有定义this绑定

var obj = {
  i: 10,
  a: () => console.log(this.i, this),
  b: function() {
    console.log( this.i, this)
  }
}
obj.a(); //undefined, Window
obj.b(); // 10, Object {...}

5、箭头函数不能当做Generator函数,不能使用yield关键字

6、不能简单返回对象字面量

7、箭头函数不能换行

二.用户上传图片,图片存储的地址

图片保存在服务器上,数据库存储的是图片的链接地址,数据库是不会真的把一个文件存进去的 他只是把这个文件存储的地址保存起来

三.let,var 的区别

1.var的作用于是函数作用于,而let是块级别(大括号括起来的内容),for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

2.不存在变量提升,let所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.log(lemon); // undefined
var lemon= 1;

// let 的情况
console.log(zoey); // 报错
let zoey= 1;

3.暂时性死区

es6中规定,区域块中存在let和const命令,这个区块对这些命令声明的变量,最开始就是一个封闭的作用域,在申明之前就使用这些变量就报错,在let命令声明变量之前使用该变量都是不可以的。

var a = 1;
if(2>1){
    a = 3,//报错
    let a 
}

还有一些暂时性死区隐藏得比较深比如下面代码

//第一种
function sum(x=y,y=1){
    return [x,y]
}
sum()//报错,因为x=y时,y还没有赋值
//但是这样就没毛病
function sum(x=1,y=x){
    return [x,y]
}
sum()//[1,1]

//第二种
var x = x//不报错
    console.log(x);//undefined

let x = x;//报错:x is not defined

4.不允许重复声明

 // 报错
    function fn() {
        let a = 1;
        let a = 2;//Identifier 'a' has already been declared
    }
    fn()

 // 报错
    function fn1() {
        let a = 1;
        var a = 2;//Identifier 'a' has already been declared
    }
    fn1()

function fn2(arg) {
  let arg; // 报错
}

function fn3(arg) {
  {
    let arg; // 不报错
  }
}

5.let实际上为 JavaScript 新增了块级作用域

  • ES6 允许块级作用域的任意嵌套,内层作用域可以定义外层作用域的同名变量。
  • ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。
  • ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

四.利用generator完成fibnaqi数列

1.什么是generator

Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行)。

整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield语句注明。

在 ES6 中定义一个生成器函数很简单,在 function 后跟上「*」即可:

function* foo1() { };
function *foo2() { };
function * foo3() { };

foo1.toString(); // "function* foo1() { }"
foo2.toString(); // "function* foo2() { }"
foo3.toString(); // "function* foo3() { }"
foo1.constructor; // function GeneratorFunction() { [native code] }

调用生成器函数会产生一个生成器(generator)。生成器拥有的最重要的方法是 next(),用来迭代:

function* foo() { };
var bar = foo();
bar.next(); // Object {value: undefined, done: true}

上面第 2 行的语句看上去是函数调用,但这时候函数代码并没有执行;一直要等到第 3 行调用 next 方法才会执行。next 方法返回一个拥有 value 和 done 两个字段的对象。

生成器函数通常和 yield 关键字同时使用。函数执行到每个 yield 时都会中断并返回 yield 的右值(通过 next 方法返回对象中的 value 字段)。下次调用 next,函数会从 yield 的下一个语句继续执行。等到整个函数执行完,next 方法返回的 done 字段会变成 true。下面看一个简单的例子:

function* list() {
    for(var i = 0; i < arguments.length; i++) {
        yield arguments[i];
    }
    return "done.";
}

var o = list(1, 2, 3);
o.next(); // Object {value: 1, done: false}
o.next(); // Object {value: 2, done: false}
o.next(); // Object {value: 3, done: false}
o.next(); // Object {value: "done.", done: true}
o.next(); // Error: Generator has already finished

每次调用 next 方法,都会得到当前 yield 的值。函数执行完之后,再调用 next 方法会产生异常。

 function* gen(x) {
        var y = yield x + 2;
        return y;
    }

    var g = gen(1);
    console.log(g.next()); // { value: 3, done: false }
    console.log(g.next()); // { value: undefined, done: true }

上面代码中,调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句,上例是执行到x + 2为止。

换言之,next方法的作用是分阶段执行Generator函数。每次调用next方法,会返回一个对象,表示当前阶段的信息(value属性和done属性)。value属性是yield语句后面表达式的值,表示当前阶段的值;done属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。

2.用generater完成fibnaqi数列

function* fab(max) {
    var count = 0, last = 0, current = 1;

    while(max > count++) {
        yield current;
        var tmp = current;
        current += last;
        last = tmp;
    }
}

var o = fab(10), ret, result = [];

while(!(ret = o.next()).done) {
    result.push(ret.value);
}

console.log(result); // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

ES6 也规定了类似的语法「for ... of」用来迭代

function fab(max) {
    var count = 0, last = 0, current = 1;

    while(count++ < max) {
        yield current;
        var tmp = current;
        current += last;
        last = tmp;
    }
}

for(var i of fab(10)) {
    console.log(i);
}

五.ES6 中class

1.定义

ES6提出了类(Class)的概念,让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象,默认具有constructor方法和自定义方法。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已.

  • 类的数据类型就是函数,类本身就指向构造函数。使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
  • 类和模块的内部,默认就是严格模式

2.基本语法

function Point (x,y){
            this.x=x;
        this.y=y;
        }
        Point.prototype.toString= function(){
            return this.x+this.y;
        }

注意:constructor方法对应ES5的构造函数;创建类的方法不需要使用function关键字,方法之间不需要逗号分隔。

ES5中定义对象时组合使用构造函数模式和原型模式,构造函数模式用于定义实例属性,原型模式用于定义共享方法和共享属性,节省内存,而且支持向构造函数传递参数。

        function Point (x,y){
            this.x=x;
        this.y=y;
        }
        Point.prototype.toString= function(){
            return this.x+this.y;
        }

构造函数的原型(prototype)属性在ES6中依旧存在,这一点和ES5一样:类的方法都定义在类的原型(prototype)上,在类的实例上面调用方法,其实就是调用原型上的方法。

    //实例的constructor方法就是类的原型(prototype)的constructor方法
    class B{
      constructor(){}
    }
    let b = new B();
    console.log(b.constructor === B.prototype.constructor);//true   

3.ES6 Class的继承

Class通过extends关键字实现继承

class ColorPoint extends Point{}

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }
      toString() {
        return this.color + ' ' + super.toString(); // super代表父类原型,调用父类的toString()
      }
    }

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。

super这个关键字,既可以当作函数使用,也可以当作对象使用。第一种情况,super作为函数调用时,代表父类的构造函数,只能用在子类的构造函数中。ES6 要求,子类的构造函数必须执行一次super函数。第二种情况,super作为对象时,指代父类的原型对象。

如果子类没有定义constructor方法,这个方法会被默认添加。在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。

        class Point {
          constructor(x, y) {
            this.x = x;
            this.y = y;
          }
        }
        
        class ColorPoint extends Point {
          constructor(x, y, color) {
            this.color = color; // ReferenceError
            super(x, y);
            this.color = color; // 正确
          }
        }

六.egg框架学习

© 著作权归作者所有

共有 人打赏支持
lemonzoey
粉丝 0
博文 11
码字总数 54195
作品 0
ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。 ...

木亦Sam ⋅ 06/10 ⋅ 0

ES6常用特性

1、什么是ECMAScript6?和JavaScript什么关系? 1.1 什么是ECMAScript6? 首先说一下什么是ECMA(European Computer Manufacturers Association)欧洲计算机制造商协会。 如果说ECMA是一种组...

方千竹 ⋅ 2017/12/15 ⋅ 0

快速了解ES6

ECMAScript6(简称ES6),是JavaScript的下一代标准,因为ES6是在2015年发布的,所以又称ECMAScript2015(ES6 === ECMAScript2015) 目前不是所有的浏览器都完全兼容ES6,但很多程序猿已经开始使...

阿振 ⋅ 2016/04/15 ⋅ 0

es6基本语法

ES6是javascript的下一个版本,也叫做ECMAScript 2015,相对于es5,es6添加了许多新的特性,语言语法更加规范了,es6的出现使javascript步入了编程语言的正规军行列里,很多公司都逐渐使用es6...

马大哈tt ⋅ 2017/12/23 ⋅ 0

前端面试之ES6篇(高产似母猪)

这也是前端面试经常询问的问题,经常问你es6出现了哪些新的特性,平时又使用过那些。在编写此教程的时候,第一句话往往就是面试常常问到的地方,然后后面就是他的详细解释,面试要求的内容我...

skychenbo ⋅ 2017/09/25 ⋅ 0

ES6的学习(一)

箭头函数 与函数表达式相比,箭头函数有更短的语法。

黑天很黑 ⋅ 2017/02/20 ⋅ 0

WEB前端学习:学会ES6的函数新功能,少写10000行代码

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/31 ⋅ 0

ES6中箭头函数的作用

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数。类似于下面的写法: let test1=() => “abc”; let test2=() => { return “abc”}; let sum=(a,b) => a+b; 比如上面的3个E...

chancein007 ⋅ 2017/11/14 ⋅ 0

JavaScript深入浅出

怎样使用 this 因为本人属于伪前端,因此文中只看懂了 8 成左右,希望能够给大家带来帮助....(据说是阿里的前端妹子写的) this 的值到底是什么?一次说清楚 原载于前端开发指南,喜欢请关注...

掘金官方 ⋅ 2017/12/27 ⋅ 0

ES6最棒的新特性

ES6中的默认参数 ES5的写法 在ES6中,我们可以把默认值直接放进函数签名 ES6中的模板表达式 ES5的写法 在ES6中,在反引号包裹的字符串中使用${NAME}语法来表示模板字符: ES6中的多行字符串 ...

_Dot大师兄 ⋅ 2017/11/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 19分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 31分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部