ES6 笔记

时间:2023-03-08 21:38:20

箭头函数

箭头函数里的this会引用 定义 箭头函数时,外部作用域 的 this 。箭头函数只是 引用 外部作用域的 this ,本身不存在 this。同时因为没有 this ,所以 无法用new生成实例,例:

var name = 'window';
function test(){
//实际等同于这样
//var _this = this;
this.name = 1;
this.method = ()=>{
//console.log(_this.name);
console.log(this.name);
}
}
var b = new test();
setTimeout(b.method, 500);  //1

这个例子中,箭头函数的 this 在定义 method 方法时,引用了test的上下文,而不是执行时引用 this ,所以 setTimeout 方法执行的 method 方法时,this 还是指向了 test 。

function test(){
this.method = ()=>{
function foo(){
console.log(this); //Window
console.log(this instanceof Window); //true
}
foo();
}
}
var b = new test();
setTimeout(b.method, 500);   //1

这个例子中,这个例子中 this 之所以没有引用箭头函数外层,是因为 foo 函数里的 this 作用域此时属于Window,也就不用往 foo 函数外层查找this了,所以 this 指向了 Window。

参数默认值

ES6之前,参数不能给定默认值,只能通过下面的形式给参数设定默认值。

function a(x){
x? x: x = 1;
//或者
if(typeof x === 'undefined'){
x = 1;
}
}

ES6只要下面的形式就能给参数设定默认值

function a(x = 1){
console.log(x); //1
}

如果给参数赋予一个默认的函数,就会出现特殊情况。例1:

var x = 0;
function a(x, y = ()=> {x = 1; console.log(x); /* 1 */ }){
var x = 10;
y();
console.log(x); //10
}
a();
console.log(x); //0

参数y里的代码执行之后,函数 y 里的 x 确实已经被赋值了 1,但是函数体内的 x 值还是10,同时全局变量 x 也还是0。

假如把例1里的函数 y 从默认值里放到函数 a 内部,则会变成这样。

var x = 0;
function a(x, y){
if(typeof y === 'undefined'){
y = ()=> {
x = 1;
}
}
var x = 10;
y();
console.log(x); //1
}
a();
console.log(x); //0

结果是 x = 1 把前面的 x = 10 给覆盖了,当然全局变量依然没有变化。

这两个例子看似一样,但实际上,ES6的机制是:参数默认值是一个函数时,会生成一个参数级作用域。导致这两个例子本质上有所差别,同时函数体内部是函数级作用域,函数外部是外部作用域。三个作用域互相独立,又由作用域链引用。从内往外的顺序是:

函数级作用域 => 参数级作用域 => 外部作用域

函数a => 参数 x, y 所在的括号部分 => 全局变量        (以例1为例)

注意下面这种情况:

function a(x, y = ()=> {var b = 10; console.log(b)}){
y(); //10
console.log(b); //报错 b is not defined
}
a();

参数级作用域只是参数声明的括号部分,而参数 y 内部的作用域对参数级作用域不可见。

也就是变量 b 被函数 y 的作用域隔离开了,不属于参数级作用域,也就无法给函数 a 所捕获。

而例1 中在声明函数的时候,会同时(也许是执行的时候,暂不清楚)声明变量 x 与 函数 y。由于已经声明了变量 x,同时 x 和 y 同属块级作用域。以及作用域链的存在,外部作用域无法查找内部作用域里的变量,只能往外查找变量。按照 函数级作用域 => 块级作用域 => 外部作用域 的顺序,参数部分的块级作用域无法调用函数内部的变量。

所以例子中的 x 实际上被定义了3次,每一个作用域各1次,也就导致了每个作用域中的 x 的值互相独立赋值。

所以实际上例1编译成ES5的代码是下面这样的:

var x = 0;
function a(x, y){
y = function() {
x = 1; //参数里已经声明了变量x,所以不是全局里的x
console.log(x); //1
}
return function(){
var x = 10;
y();
console.log(x); //10
}()
}
a();
console.log(x); //0

ES6里实现则是:

var x = 0;
function a(x, y){
y = function() {
x = 1; //参数里已经声明了变量x,所以不是全局里的x
console.log(x); //1
}
{
let x = 10; //用let声明一个块级变量
y();
console.log(x); //10
}
}
a();
console.log(x); //0

假设把例1改成下面这样:

var x = 0;
function a(x, y = ()=> {x = 1; console.log(x); /* 1 */ }){
x = 10; //去掉var
y();
console.log(x); //1
}
a();
console.log(x); //0

在去掉了函数级作用域里的 var 关键字后,变量 x 和 参数 x 都处于同一作用域(chrome控制台显示为local,也就是函数级作用域,可能是为了兼容ES5)。此时 y 里的 x = 1 就覆盖了 x = 10。

Generator 函数与异步

Generator函数的yield没有本身不会有返回值,除非在next方法里带上参数,这个参数会变成上一个yield语句的返回值。

例:

function* f() {
for(var i = 0; true; i++) {
var reset = yield i;
console.log(reset, i);
if(reset) { i = -1; }
}
} var g = f(); g.next()
//undefined, 0
// { value: 0, done: false } g.next()
//undefined, 1
// { value: 1, done: false } g.next(true)
//true, 0
// { value: 0, done: false }

如果内部有return一个值, 那么无论后面是否还有yield,直接返回对象。对象中的value属性就是那个值,done值为true,也即完成。