一、Decorator 修饰器
> 用来修改类的行为
// mixins.js
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js
import { mixins } from './mixins'
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'
// 用Object.assign 模拟
const Foo = {
foo() { console.log('foo') }
};
class MyClass {}
Object.assign(MyClass.prototype, Foo);
let obj = new MyClass();
obj.foo() // 'foo'
最新提案
> 1. do表达式： 返回内部最后执行的表达式的值
let x = do {
let t = f();
t * t + 1;
};
return (
<nav>
<Home />
{
do {
if (loggedIn) {
<LogoutButton />
} else {
<LoginButton />
}
}
}
</nav>
)
> 2. throw 可用于表达式了,之前只能用于命令
console.log(throw new Error());
this._id = value || throw new Error("Invalid value");
> 3. 链判断运算符
const firstName = message?.body?.user?.firstName || 'default';
a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()
> 4. 函数的部分执行：?是单个参数的占位符，...是多个参数的占位符
let obj = {
f(x, y) { return x + y; },
};
const g = obj.f(?, 3);
g(1) // 4
> 5. 管道运算符
// 传统的写法
exclaim(capitalize(doubleSay('hello')))
// "Hello, hello!"
// 管道的写法
'hello'
|> doubleSay
|> capitalize
|> exclaim
// "Hello, hello!"
> 6.BigInt数据类型：大于或等于2的1024次方的数值，JavaScript 无法表示，会返回Infinity；BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。
const a = 2172141653n;
const b = 15346349309n;
// BigInt 可以保持精度
a * b // 33334444555566667777n
// 普通整数无法保持精度
Number(a) * Number(b) // 33334444555566670000
> 6. BigInt对象
BigInt(123) // 123n
BigInt('123') // 123n
BigInt(false) // 0n
BigInt(true) // 1n
// BigInt()构造函数必须有参数，而且参数必须可以正常转为数值，下面的用法都会报错。
BigInt('123n') // SyntaxError
BigInt('abc') // SyntaxError
module加载规则
> 默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到script标签就会停下来，等到执行完脚本，再继续向下渲染。<br/>
> 异步加载：给script加defer和async属性；渲染引擎遇到这步就会开始下载，同时页面继续渲染；defer是等到页面正常渲染完后执行。async一旦下载完脚本，浏览器就会中断渲染，立即执行此脚本
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
> ES6 将script的type属性设置为module，所以浏览器知道了这是es6模块；便执行异步加载，页面渲染完在执行，不会造成浏览器拥堵。
<script type="module" src="./foo.js" async></script>
> 对于ES6模块，有几点默认：
* 1. 代码在模块作用域之中运行，而不是在全局作用域运行，模块内的变量，外部不可见。
* 2. 脚本自动采用严格模式， 不管有没有声明use strict。
* 3. 模块中顶层的this返回undefined，而不是指向window
> ES6模块与commonJS模块的差异
* 1. commonJS模块输出的是一个值得拷贝，不会被后面修改，ES6模块输出的是值得引用，可被重新赋值。
* 2. commonJS模块是运行时加载，ES6模块是编译时输出接口。因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
class 类
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function(){
return '(' + this.x + ',' + this.y + ')';
}
var p = new Point(2,4);
> 类似 class类相当于构建了一个构造函数
class Bar {
doStuff(){
console.log('stuff');
}
constructor(props) {
super(props); //super作为一个关键字，指向原型对象时 可直接调用 super.XXX
//....
}
}
var b = new Bar();
b.doStuff() //stuff
b.constructor === Bar.prototype.constructor(直接指向类的本身Bar) //这些类的方法都定义在prototype上面
> 由于类的方法都定义在prototype上，可以通过Object.assign()向原型链上添加方法
Object.assign(Point.prototype,{
toString(){},
toLower(){}
})
> 类的内部所有定义的方法都是不可枚举的
Object.keys(Point.prototype) // []
Object.getOwnPropertyNames(Point.prototype) // ['constructor','toString']
> constructor(){}
> constructor()方法是类的默认方法，1.new生成的实力对象的同时就自动调用constructor方法<br/>
>2.其默认返回的是实力对象本身（this），而不是原型对象的属性
class Self {
constructor(x,y){
this.x = x; //this默认指向 类的实例，若单独提出来则指向当前运行环境，采取绑定或尖头函数
this.y = y;
}
toString(){
return '('+this.x + ',' + this.y + ')';
}
}
var self1 = new Self(2,3);
self1.toString(); //(2,3)
self1.hasOwnProperty('x') //true 判断x是否为self1实力对象的自身属性
self1.hasOwnProperty('y') //true
self1.hasOwnProperty('toString') //false
self1.__proto__.hasOwnProperty('toString') //true toString方法属于其原型链上的方法
obj instanceof Self //判断obj是否为self对象的实例
> 静态方法
> 父类的静态方法可以被子类继承，但不会被实例继承
class Foo{
static classMethod(){
return 'hello';
this.propMethod(); //this指向的是类Foo，而不是实例
}
propMethod(){
console.log('hello')
}
}
Foo.classMethod() //'hello' ,静态方法可以直接在Foo类上调用；其他的方法是定义在原型上不能直接调用
Foo.propMethod() //typeError
* 实例函数 不能继承静态方法
var foo = new Foo();
foo.classMethod() //typeError 静态方法不能被实例继承
foo.propMethod(); //hello
* 子类 可以调用父类的静态方法
class Bar extends Foo{
static classMethod(){
return super.classMethod() + ',too'
}
}
Ber.classMethod() //hello,too
> 私有属性和私有方法新提案
class Foo {
#a;
#b;
constructor(a, b) {
this.#a = a;
this.#b = b;
}
#sum() {
return #a + #b;
}
printSum() {
console.log(this.#sum());
}
}
async
>async的实现原理：就是将 Generator函数和自动执行器，包装在一个函数里
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
* 优点：1 内置执行器。2 更好的语义。3.返回Promise。
* 注意点：
* 1. await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。
* 2.多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
// 改写成
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;