一、let\const\var的区别
let只在命令所在的代码块内有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
不存在变量提升
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
不允许重复声明
// 报错
function func() {
let a = 10;
var a = 1;
}
const实际上保证的是变量指向的内存地址不变，对于简单类型，值就保存在那个内存地址，因此等同于常量；
但是对于复合类型，const指向的内存地址只是保存指向实际数据的指针，只能保证指针是固定的，但是不能保证指针指向的数据结构是不变的，所以声明对象常量需要特别小心这一点
const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
二、变量的解构赋值
解构赋值时 ES6 内部使用严格相等运算符（===）判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null，null不严格等于undefined。
三、箭头函数
如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
this的指向问题
箭头函数没有自己的this对象，永远指向外层对象的this（外层对象根据自己所在的作用域来确定this的指向）即使使用call,apply,bind这些方法也不能改变它的this的指向
以下是h5实现的箭头函数
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
以下无论return了多少回箭头函数，他总是指向外层对象的this，这里在foo全局声明就是指全局的this，
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
//这里通过call让foo的this指向了对象{id: 1}
var f = foo.call({id: 1});
//此时在改变哪个输出return的this指向都不会改变箭头函数的this了
var t1 = f.call({id: 2})()();
var t2 = f().call({id: 3})();
var t3 = f()().call({id: 4});
不适合用箭头函数的场景
1、定义对象的方法，且该方法内部包括this
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}
这里因为jumps是箭头函数，所以this的指向不会指向cat，而是定义对象的作用域，此刻是指全局
2.需要动态this的时候，也不应使用箭头函数
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
上面代码运行时点击按钮会报错，因为 button的监听函数是一个箭头函数，导致里面的this就是全局对象，如果改成普通函数，this就会动态指向被点击的按钮对象
网友评论