附录

1.动态作用域

动态作用域是javaScript另一个重要机制this的表亲。

词法作用域和动态作用域区别：

前者在写代码或者说定义时确定的

后者是在运行时确定的

1. function foo(){
2.    console.log(a); //3

3. }
4. function bar(){
5.    var a = 3;

6.   foo();

7. }
8. var a = 2;
9. bar();

当foo()无法找到a的变量引用时，会顺着栈在调用foo()的地方查找，而不是在嵌套的词法作用域中向上查找。

2.块作用域的解决方案

   let声明并不包含在ES6中

 

3.this词法

ES6中  函数声明--箭头函数（=>）

1. var foo = a =>{
2.    console.log(a);
   
3. }
4. foo(2); //2

下列代码：

1. var obj ={
2.    id:"awesome",

3.    cool: function coolFn(){
4.        console.log(this.id);
5. }
6. };
7. var id = "not awesome";
8. obj.cool(); // awesome
9. setTimeout(obj.cool,100); //not awesome

cool()  函数丢失了同this之间的绑定

解决方:1： var self = this

1. var obj ={
2. count:0,
3. cool:function coolFn(){
4. var self =this;
5. if(self.count <1){
6. setTimeout(function timer(){
7. self.count++;
8. console.log("awesome?");
9. },100);
10. }
11. }
12. };
13. obj.cool();// awesome?

 

解决方法2：箭头函数：

1. var obj ={
2. count:0,
3. cool:function coolFn(){
4. if(this.count <1){
5. setTimeout(()=>{// 箭头函数是什么鬼东西？
6. this.count++;
7. console.log("awesome?");
8. },100);
9. }
10. }
11. };
12. obj.cool();// awesome?

在涉及this绑定时的行为和普通函数的行为完全不一致。放弃了原有普通this绑定的规则，取而代之的事当前的词法作用域覆盖了this本来的值。

 

不好的地方：箭头函数是匿名的。

 

解决方法3：bind

1. var obj ={
2. count:0,
3. cool:function coolFn(){
4. if(this.count <1){
5. setTimeout(function timer(){
6. this.count++;// this 是安全的
7. // 因为 bind(..)
8. console.log("more awesome");
9. }.bind(this),100);// look, bind()!
10. }
11. }
12. };
13. obj.cool();// more awesome。

 

 

 

 

 

 

null