ES6--Class、Module及常用特性

十八、Class

示例：ES5

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
};
var p = new Point(1, 2);

示例：ES6的等价写法

class Point{
  constructor(x, y){

    this.x = x;
    this.y = y;
  }
  toString(){
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}
var p = new Point(1, 2);

实际上，类的所有方法都定义在类的prototype属性上面；在类的实例上面调用方法，其实就是调用原型上的方法。

p.constructor === Point.prototype.constructor; // true

注意：类中定义的方法，都是带有作用域的普通函数，而不是箭头函数。

当然属性名支持表达式方式

let methodName = "toString";
class Point{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  [methodName](){
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}
var p = new Point(1, 2);

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Ponit{}
new Ponit();

类的实例对象

必须通过new调用，否则会报错！

var point = Point(2, 3); // 报错
var point = new Point(2, 3); // 正确

不存在变量提升

/* function */
new Foo();
function Foo(){}

/* class */
new Bar();  // Unexpected identifier
Class Bar{};

class表达式

和函数一样，class可以使用表达式的形式定义。通过表达式可以实现立即执行的class。

let person = new class{
  constructor(name){
    this.name = name;
  }
  sayName(){
    console.log(this.name);
  }
}(‘ligang‘);
person.sayName();

继承

class Point2D{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
}
class Point3D extends Point2D{
  constructor(x, y, z){
    super(x, y);
    this.z = z;
  }
  toString() {
    return `$(this.x}, $(this.y}, $(this.z}`;
  }
}
console.log(new Point3D(1, 2, 3));  // Point3D { x: 1, y: 2, z: 3 }

注意：一个子类继承了一个父类，那么在子类的constructor中必须使用super调用父类构造函数后才能在子类的constructor中使用this。

class Point2D{}
class Point3D extends Point2D{
  constructor(x, y, z){
    // super();
    this.x = x;
    this.y = y;
    this.z = z;
  }
  toString() {
    return `$(this.x}, $(this.y}, $(this.z}`;
  }
}
console.log(new Point3D(1, 2, 3));  // 报错：this is not defined

取值函数（getter）和存值函数（setter）

在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class Person{
  constructor(name){
    this.name = name;
  }
  set username(newName){
    this.name = newName;
  }
  get username(){
    return this.name;
  }
};
var p = new Person(‘x‘);
console.log(p.username);  // ‘x‘
p.username = "ligang";
console.log(p.username);  // ‘ligang‘

私有方法

ES6中并没有支持，但是可以通过一些约定方式去实现

方式一：通过命名区分，如函数名增加”_”

方式二：通过Symbol值的唯一性

const method = Symbol(‘sayName‘);
class Person{
  constructor(name){
   this.name = name;
  }
  [method](){
     console.log(this.name);
  }
  say(){
   this[method]();
  }
};
var p = new Person(‘ligang‘);
p.say();  // ‘ligang‘
p.sayName();  // p.sayName is not a function

静态方法

方法前加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Person{
 constructor(name){
   this.username = name;
 }
 static sayHello(){
   return ‘hello‘;
 }
 static sayName(){
   return this.username;
 }
};
console.log(Person.sayHello()); // ‘hello‘
console.log(Person.sayName());  // undefined

注意：静态方法中，this的指向问题！！

问题

（1）不支持私用属性，只能通过一些约定实现

（2）不支持实例属性，只能通过Getter/Setter实现

（3）不支持多重继承

十九、Module

? ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。注意，ES6的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;。模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

导出模块

? 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

（1）导出单一接口

Sybtax：export <statement>

// module.js
export function method(){}
export class Foo{}

// app.js
import {method, Foo} from ‘module.js‘

export语句需要具有声明部分和赋值部分。

const foo = ‘bar‘;
export foo; // Error

（2）导出模块默认接口

Sybtax：export default <value>

// module.js
export default function() {}

// app.js
import customName from ‘module.js‘
customName();

（3）混合使用导出接口语句

// module.js
export default class Client{}
export const foo = ‘bar‘

// app.js
import Client, {foo} from ‘module.js‘

（4）导出一个模块的所有接口

Sybtax：export * from ‘module-name‘

// module.js
export function foo(){}

// app.js
export * from ‘module.js‘

（5）导出一个模块的部分接口

Sybtax：export {member} from ‘module-name‘

export {foo, bar} from ‘my_module‘;

// 等价于
import {foo, bar} from ‘my_moudle‘;
export {foo, bar};

（6）导出一个模块的默认接口

Sybtax：export {default} from ‘module‘

export {es6 ad default} from ‘my_module‘;

// 等价于
import {es6} from ‘my_module‘;
export default es6;

引入模块

（1）引入默认模块

import namespace from ‘module-name‘
import http from ‘http‘

（2）引入模块部分接口

import {member1, member2} from ‘module-name‘
import {isEmpty} from ‘lodash‘

（3）引入全部接口到指定命名空间

import * as namespace from ‘module-name‘
import * as lib from ‘module‘

（4）混入引入默认接口和命名接口

import {default as <default name>, method1} from ‘module-name‘
import {default as Client, utils} from ‘module‘
import <default name>, {<named modules>} from ‘module-name‘
import Client, {utils} from ‘module‘

（5）不引入接口，仅运行模块代码

import ‘module-name‘

ES6中提供的模块机制，可以“模块内容选择性引入”，其意味着可以通过Rollup和webpack2利用ES6模块化机制只压缩必要代码，最大程度地精简JavaScript引用的体积，避免了昂贵的网络带宽和较慢的页面加载速度。

总结：

写到这里，ES6的所有语法基本已全部描述，有彩蛋、也有单纯的语法糖。里面大多数的语法也可用通过ES5去shim（除了Proxy）。在Node6+以上，几乎所有的ES6语法被支持，前端可通过Babel6工具进行转换。在使用ES6过程中，有几个很爽的小特性，特整理如下：

设置对象变量键值的语法

ES6之前，不能在对象字面量里设置变量键值，必须要在对象初始化后增加键/值：

var myKey = ‘name‘;
var person = {
  ‘age‘: 25
};
person[myKey] = ‘ligang‘;

ES6中新增了[]方式，完美解决：

let myKey = ‘name‘;
let person = {
  [myKey]: ‘ligang‘,
  ‘age‘: 25
};

模板字符串

ES6之前创建多行字符串必须使用\作连接符。模板字符串的出现，让字符串拼接变得简单可维护。

let person = { name: ‘ligang‘, age: 26 };
console.log(`My name is ${person.name}.
My age is ${person.age}.`);
/* 结果：
My name is ligang.
My age is 26.
*/

### find/findIndex

JavaScript 提供了 Array.prototype.indexOf方法，用来获取一个元素在数组中的索引，但是 indexOf只能用来查找确切的值，不可以指定查询条件。find和 findIndex可以设置查询条件，在数组中查找到第一个满足条件的值。从而避免了循环处理！

let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

扩展运算符：…

扩展运算符表示一个数组或者一个可迭代对象可以在一次调用中将它们的内容分割为独立的参数。

// 传参给需要多个独立参数的函数 arguments
// 很像 Function.prototype.apply()
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// 将节点列表转换成数组
let divsArray = [...document.querySelectorAll(‘div‘)];

// 将参数转换成数组
let argsArray = [...arguments];

它能把可迭代对象（NodeList, arguments等等）转化为真正的数组，不再需要使用 Array.from 或Array.prototype.slice.call()方法。

默认参数值

function greet(name = ‘ligang‘, callback = function(){}) {
  console.log(`Hello ${name}!`);
  // 不再需要条件判断“callback && typeof callback === ‘function‘”啦
  callback();
}
时间： 2024-10-19 02:15:20

ES6--Class、Module及常用特性的相关文章

AngularJS 的常用特性（五）

13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务来定义这样的一种东西:对于浏览器所指向的特定 URL,Angular 将会加载并显示一个模板,并实例化一个控制器来为模板提供内容. 在应用中可以调用 $routeProvider 服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可.伪代码如下: 1 var someModule

C#网络程序设计(1)网络编程常识与C#常用特性

    网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网络编程. 2)网络编程的层次 现实中的互联网是按照"TCP/IP分层协议栈"的体系结构构建的,因此程序员必须搞清楚自己要做的是哪个层次上的编程工作. TCP/IP协议体系的实现情况: 其中,网络接口层已经被大多数计算机生产厂家集成在了主板上,也就是经常所说的网卡(NIC).windows操

MVC常用特性

MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将继续介绍一些在开发中非常有用的MVC特性,如下: BindAttribute Remote HandleError HiddenInput BindAttribute 使用BindAttribute的目的是限制用户在提交form表单时使用合适且正确的值.当我们提交一个表单时,就会检查每一个实体上绑定的特

ES6之module

一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,module随之而来. ES6module的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入.输出变量.简而言之就是‘编译时加载’. ES6module相对来说实现得还是比较简单,易上手. ES6module提倡一个js文件就是一个模块的概念,主要包括两个命令:export和import,用于模块向外提供接口(export)和引入其他模块接口(import). 好了,下面就说下我说理解的expo

amd cmd commonjs 模块规范 和 es6 的 module 语法

js的模块化 在前端开发的原始时期,只要在script标签中嵌入js代码就能实现一些基本的交互效果,但是随着时代的进步.js扮演的角色变得重要起来,js应用的场景页越来越复杂,.然而,js都没有类的概念,更不用说模块了. 为什么要有模块化 当一个项目变得复杂的时候,会出现问题,比如:命名冲突:开发中重复命名,导致命名冲突.文件依赖:项目开发中,依赖的js文件,引入遗漏,引入顺序错误. 使用模块化开发可以避免类似情况,而且利于项目的维护:提升开发效率:代码方便重用,能直接引入,避免重复开发.方便后

前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理复杂系统分解为更好的可管理模块的方式.简单来说就是解耦,简化开发,一个模块就是实现特定功能的文件,可以更方便地使用别人的代码,想要什么功能,就加载什么模块.模块开发需要遵循一定的规范 CommonJS规范 CommonJS就是一个JavaScript模块化的规范,是用在服务器端的node的模块规范,

Vue的常用特性

Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 <input type="radio" id="male" value="1"

ES6常用特性

以下是ES6排名前十的最佳特性列表(排名不分先后): Default Parameters(默认参数) in ES6 Template Literals (模板文本)in ES6 Multi-line Strings (多行字符串)in ES6 Destructuring Assignment (解构赋值)in ES6 Enhanced Object Literals (增强的对象文本)in ES6 Arrow Functions (箭头函数)in ES6 Promises in ES6 Blo

ES6的一些常用特性

Default Parameters(默认参数) 还记得我们以前不得不通过下面方式来定义默认参数: var link = function (height, color, url) { var height = height || 50; var color = color || 'red'; var url = url || 'http://azat.co'; ... } 但在ES6,我们可以直接把默认值放在函数申明里: var link = function(height = 50, col