发表于： 2021-07-27 23:30:36
2 1894
今天完成的事情：了解一些项目的源代码（看的不是太懂，加油！！）箭头函数
明天计划的事情：JS执行环境与作用域的关系；；有限状态机
收获：
// 基础语法 :
(参数1, 参数2, 参数n) => { 函数声明 }; // 简化： (参数1, 参数2, 参数n) => 表达式（单一的）
// 例：
var f = (num1, num2) => {
return num1 * num2
};
console.log(f(2, 4)); // 8
// 简写：
var f = (num1, num2) => num1 * num2;
console.log(f(3, 4)); // 12
// 当只有一个参数时，圆括号可省略
(单一参数) => { 函数声明 };
单一参数 => { 函数声明 };
// 例：
var f = num => num * num;
console.log(f(3)); // 9
// 没有参数的函数应该写成一对圆括号：
() => { 函数声明 }
// 例:
var f = () => 'hello world';
console.log(f()); // hello world
// 引入箭头函数有两个方面的作用：简化函数和不需要绑定 this。
// 简化函数: 我们使用 map 方法一次输出一个数组各元素的长度，使用以下方法：
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
var f = materials.map(function (material) {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
// 使用箭头函数简化：
var f = materials.map(material => {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
// 进一步简化：
var f = materials.map(material => material.length);
console.log(f) // [8, 6, 7, 9]
// 不绑定 this
// 在 ECMAScript 3/5中，通过将 this 值分配给封闭的变量，可以解决 this 问题。
function Person() {
this.age = 0;
var self = this;
setInterval(function growUp() {
self.age++;
console.log(self.age);
}, 1000);
}
var p = new Person();
// 使用箭头函数则不用绑定 this：
function Person() {
this.age = 0;
// var self = this;
setInterval(() => {
this.age++;
console.log(this.age);
}, 1000);
}
var p = new Person();
// 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
x => {
if (x > 0) {
return x * x;
} else {
return -x * x
};
};
// 如果参数不是一个，就需要用括号()括起来：
// 两个参数:
(x, y) => x * x + y * y;
// 无参数:
() => 3.14;
// 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i = 0; i < rest.length; i++) {
sum += rest[i];
}
return sum;
};
// 如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
// SyntaxError:
x => { foo: x };
// 因为和函数体的{ ... }有语法冲突，所以要改为：
x => ({ foo: x })
// this 箭头函数看上去是匿名函数的一种简写，其不然，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是语法作用域，有上下文决定。
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
console.log(obj);
console.log(obj.getAge);
console.log(obj.getAge.fn);
// 箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
console.log(obj.getAge()); // 25
// this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({ birth: 2000 }, year);
}
};
console.log(obj.getAge(2015)); // 25
// 使用箭头函数排序：
var arr = [15, 12, 66, 23, 14, 235, 2, 1,]
arr.sort((x, y) => {
return x - y;
});
console.log(arr);
返回列表
评论