ES6学习总结-Class

标签： Es6 分类： Javascript 创建时间：2019-03-04 07:55:30 更新时间：2026-05-27 11:42:28

1.Class语法中关于原型链上的属性。

ES6中定义类属性，可以在构造函数中通过直接在this上指定属性的方法实现，也可以通过在类的顶端通过直接定义属性实现。
例一：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

例二：

class foo {
  bar = 'hello';
  baz = 'world';

  constructor() {
    // ...
  }
}

这是在实例上的属性，每一个实例有不同的属性。但是对于公共的数组属性，或者公用属性，应该像ES5一样，定义在原型链上，这样避免每一个实例都有新的数组地址。

class TMap{
    constructor(){
        this.array=[1,2,3]
    }
}
let t1=new TMap();
let t2=new TMap();
console.log(t1.array);
console.log(t2.array);
t1.array.push(10);
console.log(t1.array);
console.log(t2.array);

通过上面的例子可以看出，每一个类实例的属性都不是共享的。ES6的类像ES5中的构造函数模式和原型模式的组合，属性定义在实例上，方法定义在原型链上。所以要想让实例共享属性，应通过在类的属性的原型链上添加。

class TMap{
    constructor(){
        this.array=[1,2,3]
    }
}
TMap.prototype.array2=[4,5,6];
let t1=new TMap();
let t2=new TMap();
console.log(t1.array);
console.log(t2.array);
console.log(t1.array2);
console.log(t2.array2);
t1.array.push(10);
t1.array2.push(9);
console.log(t1.array);
console.log(t2.array);
console.log(t1.array2);
console.log(t2.array2);

t1和t2的属性array2就共享一个内存地址了。

2.export和import

（1）方法一：
导出：

1 2	export class TM { }

导入：

1	import {TM} from 'path'

(2)方式二：
导出：

1 2	export default class TM { }

导入：

1	import TM from 'path'

3.导入导出语法

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name"); // This is a stage 3 proposal.
import {fileName, folderName} from './'; // new proposal unsure where to request this change

参考文章：
1.ES6模块化之export和import的用法
2.Module 的语法

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。