附录
1.动态作用域
动态作用域是javaScript另一个重要机制this的表亲。
词法作用域和动态作用域区别:
前者在写代码或者说定义时确定的
后者是在运行时确定的
function foo(){
console.log(a); //3
}
function bar(){
var a = 3;
foo();
}
var a = 2;
bar();
当foo()无法找到a的变量引用时,会顺着栈在调用foo()的地方查找,而不是在嵌套的词法作用域中向上查找。
2.块作用域的解决方案
let声明并不包含在ES6中
3.this词法
ES6中 函数声明--箭头函数(=>)
var foo = a =>{
- console.log(a);
- }
- foo(2); //2
下列代码:
var obj ={
id:"awesome",
cool: function coolFn(){
console.log(this.id);
- }
};
var id = "not awesome";
obj.cool(); //
awesome- setTimeout(obj.cool,100); //not awesome
cool() 函数丢失了同this之间的绑定
解决方:1: var self = this
var obj ={
- count:0,
cool:function coolFn(){
var self =this;
if(self.count <1){
setTimeout(function timer(){
self.count++;
console.log("awesome?");
},100);
}
}
};
obj.cool();//
awesome?
解决方法2:箭头函数:
var obj ={
count:0,
cool:function coolFn(){
if(this.count <1){
setTimeout(()=>{// 箭头函数是什么鬼东西?
this.count++;
console.log("awesome?");
},100);
}
}
};
obj.cool();//
awesome?
在涉及this绑定时的行为和普通函数的行为完全不一致。放弃了原有普通this绑定的规则,取而代之的事当前的词法作用域覆盖了this本来的值。
不好的地方:箭头函数是匿名的。
解决方法3:bind
var obj ={
count:0,
cool:function coolFn(){
if(this.count <1){
setTimeout(function timer(){
this.count++;// this 是安全的
// 因为 bind(..)
console.log("more awesome");
}.bind(this),100);// look, bind()!
}
}
};
obj.cool();// more awesome。