• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ES6语法入门——上

ES6语法入门——上

作者:送你一个大西瓜 字体:[增加 减小] 来源:互联网 时间:2017-08-14

送你一个大西瓜通过本文主要向大家介绍了es6,javascript等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments

这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

//let为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

let name = 'zach'
while (true) {
    let name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  //zach
//const用来声明变量,常量的值就不能改变
const monent = require('moment')
//类
class Animal {
    //构造函数
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}
let animal = new Animal()
animal.says('hello') //animal says hello

//继承
class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}
let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

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

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

//arrow function
function(x, y) { 
    x++;
    y--;
    return x + y;
}//es5
(x, y) => {x++; y--; return x+y}//es6
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}

 var animal = new Animal()
 animal.says('hi')  //undefined says hi

//第一种是将this传给self,再用self来指代this
   says(say){
       var self = this;
       setTimeout(function(){
           console.log(self.type + ' says ' + say)
       }, 1000)

//第二种方法是用bind(this),即
   says(say){
       setTimeout(function(){
           console.log(this.type + ' says ' + say)
       }.bind(this), 1000)
//es6解决方法
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解webpack es6 to es5支持配置
  • ES6下React组件的写法示例代码
  • ES6中参数的默认值语法介绍
  • ES6学习教程之对象的扩展详解
  • Javascript ES6中数据类型Symbol的使用详解
  • 详解webpack 配合babel 将es6转成es5 超简单实例
  • ES5 ES6中Array对象去除重复项的方法总结
  • JS ES6中setTimeout函数的执行上下文示例
  • JS ES6多行字符串与连接字符串的表示方法
  • JS实现禁止高频率连续点击的方法【基于ES6语法】

相关文章

  • 2017-05-11touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
  • 2017-05-11利用jQuery解析获取JSON数据
  • 2017-05-11BootStrap组件之进度条的基本用法
  • 2017-05-11Vue中使用vux的配置详解
  • 2017-05-11jQuery编写网页版2048小游戏
  • 2017-05-11JS完成画圆圈的小球
  • 2017-05-11jquery实时获取时间的简单实例
  • 2017-05-11JQ中$(window).load和$(document).ready区别与执行顺序
  • 2017-08-02处理冒泡的两种方式
  • 2017-05-11详解NodeJS框架express的路径映射(路由)功能及控制

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • BootStrap Datepicker 插件修改为默认中文的实现方法
    • JS字符串false转boolean的方法(推荐)
    • AngularJs表单校验功能实例代码
    • 浅析Angular2子模块以及异步加载
    • 基于bootstrap按钮式下拉菜单组件的搜索建议插件
    • nodejs个人博客开发第五步 分配数据
    • JS排序之快速排序详解
    • 详解angularJs模块ui-router之状态嵌套和视图嵌套
    • canvas绘制表盘时钟
    • JS实现移动端实时监听输入框变化的实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有