ES6 学习笔记

alogy 发布于2019-08-21 10:33 / 423人阅读

摘要：类的属性和属性在上一篇面向对象编程中我们已经了解到一个实例化对象会有一个指向构造函数的属性。子类的属性，表示构造函数的继承，总是指向父类。完成构造函数继承的实质如下第二条对原型链完成方法的继承，实质如下另外还有还有三种特殊情况。

介绍

ECMAScript 6 在接下来的一段时间内将成为 ECMAScript的一个标准。这个标准预计在今年的时候就会被签署，不管在Github,还是在很多社区，javascript爱好者已经早已开始拥抱变化，享受ES6 带来的美好,这篇文章将介绍ES6的一些新特性。由于ES6 还没有很好地被浏览器支持，所以这篇文章的ES6代码将使用 Babel 进行编译。

ECMAScript 6 的新特性 箭头（Arrow）

=> 是function的简写形式，支持expression 和 statement 两种形式。同时一点很重要的是它拥有词法作用域的this值，帮你很好的解决this的指向问题，这是一个很酷的方式，可以帮你减少一些代码的编写，先来看看它的语法。

([param] [, param]) => {
   statements
}

param => expression

然后再来看看例子，以及babel 编译后的结果。

ES6:

babel编译后结果：

类（class）

ES6 引入了class（类），让javascript的面向对象编程变得更加容易清晰和容易理解。类只是基于原型的面向对象模式的语法糖。

  class Animal {
    // 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString 是原型对象上的属性
    toString() {
      console.log("name:" + this.name + ",color:" + this.color);

    }
  }
   
 var animal = new Animal("dog","white");
 animal.toString();

 console.log(animal.hasOwnProperty("name")); //true
 console.log(animal.hasOwnProperty("toString")); // false
 console.log(animal.__proto__.hasOwnProperty("toString")); // true

 class Cat extends Animal {
  constructor(action) {
    // 子类必须要在constructor中指定super 方法，否则在新建实例的时候会报错.
    // 如果没有置顶consructor,默认带super方法的constructor将会被添加、
    super("cat","white");
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat("catch")
 cat.toString();
 
 // 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

类的 prototype 属性和 __proto__ 属性

在上一篇 javascript面向对象编程中我们已经了解到一个实例化对象会有一个 __proto__ 指向构造函数的 prototype 属性。在 class 中。同时具有 __proto__ 和 prototype 两个属性，存在两条继承链。

子类的 __proto__ 属性，表示构造函数的继承，总是指向父类。

子类的 prototype 的 __proto__ 属性表示方法的继承，总是指向父类的 prototype 属性。

  class Cat extends Animal {}
  console.log(Cat.__proto__ === Animal); // true
  console.log(Cat.prototype.__proto__ === Animal.prototype); // true

我们先来看第一条 Cat.__proto__ === Animal 这条原型链。完成构造函数继承的实质如下：

 class Cat extends Animal {
   construcotr() {
     return Animal.__proto__.call(this);
  }
 }

第二条对原型链 Cat.prototype.__proto__ === Animal.prototype 完成方法的继承，实质如下：

 Cat.prototype.__proto__ = Animal.prototype

另外还有还有三种特殊情况。

 class A extends Object {}
 console.log(A.__proto__ === Object); // true
 console.log(A.prototype.__proto__ === Object.prototype);

A继承Object，A的__prototype__ 指向父类Object. A的 prototype.__proto__ 指向父类Object的prototype。

从上篇文章中的函数对象的原型中我们可以了解到，函数是一种特殊的对象，所有函数都是 Function 的实例。

 class Cat {}
 console.log(Cat.__proto__ === Function.prototype); //true
 console.log(Cat.prototype.__proto__ === Object.prototype); //true

由于Cat不存在任何继承，就相当于一个普通函数，由于函数都是Function 的实例，所以 Cat.__proto__指向 Function.prototype. 第二条继承链指向父类（Function.prototype）的prototype属性，所以 Cat.prototype.__proto__ === Object.prototype. Cat调用后会返回Object实例，所以 A.prototype.__proto__ 指向构造函数（Object）的prototype。

 class Cat extends null {};
 console.log(Cat.__proto__ === Function.prototype); // true;
 console.log(Cat.prototype.__proto__ === null); //true

Cat是一个普通函数，所以继承 Function.prototype .第二条继承链不继承任何方法，所以 Cat.prototype.__proto__ == null.

Module

到目前为止,javascript (ES5及以前) 还不能支持原生的模块化，大多数的解决方案都是通过引用外部的库来实现模块化。比如遵循CMD规范的 Seajs 和AMD的 RequireJS 。在ES6中，模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成.每一个模块都有自己多带带的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

export,import 命令

  //test.js
  export var name = "Rainbow"

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

 //test.js
 var name = "Rainbow";
 var age = "24";
 export {name, age};

定义好模块的输出以后就可以在另外一个模块通过import引用。

  //index.js
 import {name, age} from "./test.js"

整体输入，module指令

 //test.js
  
  export function getName() {
    return name;
  }
  export function getAge(){
   return age;
  }

通过 import * as 就完成了模块整体的导入。

 import * as test form "./test.js";

通过指令 module 也可以达到整体的输入。

 module test from "test.js";
 test.getName();

export default

不用关系模块输出了什么，通过 export default 指令就能加载到默认模块，不需要通过花括号来指定输出的模块,一个模块只能使用 export default 一次

  // default 导出
  export default function getAge() {} 
 
  // 或者写成
  function getAge() {}
  export default getAge;

  // 导入的时候不需要花括号
  import test from "./test.js";

一条import 语句可以同时导入默认方法和其它变量.

  import defaultMethod, { otherMethod } from "xxx.js";

GPU云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85751.html

es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0
ES6学习笔记

摘要：本笔记为阅读阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。字符串的遍历器接口新增判断字符串的包含情况返回值，表示是否找到了字符串。返回值表示参数字符串是否在原字符串的头部。本笔记为阅读http://es6.ruanyifeng.com/ 阮老师的文章自己的总结，仅作自用，感谢阮老师的技术分享。 1.超过uFFFF的字符ES5无法正确显示，会显示成前面的uFFFF的码点符号加...

zxhaaa 2019-08-26 11:58 评论0 收藏0
《深入理解ES6》笔记——导读

摘要：最近买了深入理解的书籍来看，为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序，作为一个粉丝，还是挺看好这本书能给我带来一个新的升华，而且本书的作者也非常厉害。使用ES6开发已经有1年多了，以前看的是阮一峰老师的ES6教程，也看过MDN文档的ES6语法介绍。最近买了《深入理解ES6》的书籍来看，为什么学习ES6这么久还要买这本书呢？主要是看到Daniel A...

Godtoy 2019-08-20 18:01 评论0 收藏0
React学习笔记3：用es2015（ES6）重写CommentBox

摘要：新搭建的个人博客，本文地址学习笔记用重写在一开始的时候配置中我们就加入了的支持，就是下面的配置，但之前的学习笔记都使用的完成，所以专门作一篇笔记，记录使用完成创建相关文件修改，增加该入口文件修改，引入该文件做个简单的测试，看下浏览器全部用来新搭建的个人博客，本文地址：React学习笔记3：用es2015（ES6）重写CommentBox在一开始的时候webpack配置中我们就加入了e...

selfimpr 2019-08-19 17:30 评论0 收藏0
ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0