刘新修

timing-function 作用于每两个关键帧之间，而不是整个动画

A. 学习Javascript闭包（Closure）

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。

下面就是我的学习笔记，对于Javascript初学者应该是很有用的。

第一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

另一方面，在函数外部自然无法读取函数内的局部变量。

这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

第二、如何从外部读取局部变量？

出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

其实，this的取值，分四种情况。我们来挨个看一下。

这种情况下this就是window，个人总结：this就是就近原则，谁近就是谁，不然就是window，另外有关于闭包的两个demo同时也便于大家理解this 代码如下：

 

****************************************************************************************************************

代码片段一:

 

JavaScript代码

1. var name="The Window";  
2. var object={  
3. 　　name:"My Object",  
4. 　　getNameFunc:function(){  
5. 　　　　return function(){  
6. 　　　　　　return this.name;  
7. 　　　　};  
8. 　　}  
9. };  
10. alert(object.getNameFunc()()); //返回The Window  

代码片段二:

 

JavaScript代码

1. var name="The Window";  
2. var object={  
3. 　　name:"My Object",  
4. 　　getNameFunc:function(){  
5. 　　　　var that=this;  
6. 　　　　return function(){  
7. 　　　　　　return that.name;  
8. 　　　　};  
9. 　　}  
10. };  
11. //alert(object.getNameFunc()()); //返回My Object 注：因为var that=this; 声明的为私有变量  
12. console.log((object.getNameFunc()())); //返回My Object 注：因为var that=this; 声明的为私有变量  

**********************************************************************************************************************

 

情况2：函数作为对象的一个属性

 

如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象。

JavaScript代码

1. var obj={  
2.     x:10,  
3.     fn:function(){  
4.         console.log(this);   //object {fu:function,x:10}  
5.         console.log(this.x); //10  
6.     }  
7. };  
8. obj.fn();  

以上代码中，fn不仅作为一个对象的一个属性，而且的确是作为对象的一个属性被调用。结果this就是obj对象。

注意，如果fn函数不作为obj的一个属性被调用，会是什么结果呢？

 

 

JavaScript代码

1. var obj={  
2.     x:10,  
3.     fn:function(){  
4.         console.log(this);   //Window {top: Window, location: Location, document: document, window: Window, external: Object…}  
5.         console.log(this.x); //如果this是window那this.x 自然就是 undefined  
6.     }  
7. };  
8. var fn1=obj.fn;  
9. fn1();  

情况3：函数用call或者apply调用

 

当一个函数被call和apply调用时，this的值就取传入的对象的值。至于call和apply如何使用，不会的朋友可以去查查其他资料，本系列教程不做讲解。

 

JavaScript代码

1. var obj={  
2.     x:10  
3. };  
4. var fn=function(){  
5.     console.log(this);   //Object {x: 10}  
6.     console.log(this.x); //10  
7. };  
8. fn.call(obj);  

情况4：全局 & 调用普通函数

 

在全局环境下，this永远是window，这个应该没有非议。

 

JavaScript代码

1. console.log(this===window); //true  

普通函数在调用时，其中的this全部都指向window 如下:

 

JavaScript代码

1. var x=10;  
2. var fn=function(){  
3.     console.log(this);   //window  
4.     console.log(this.x); //10  
5. };  
6. fn();  

以上代码很好理解，如果函数里套子函数this仍然指向window 如下：

 

JavaScript代码

1. var x=10;  
2. var obj={  
3.     x:10,  
4.     fn:function(){  
5.         function f(){  
6.             console.log(this);   //window  
7.             console.log(this.x); //10  
8.         };  
9.         f();  
10.     }  
11. };  
12. obj.fn();  

除非用局部变量 var that=this; 重新定义this 这时候的that 变量只能在函数内部调用，如下：

 

JavaScript代码

1. var name="The Window";  
2. var object={  
3. 　　name:"My Object",  
4. 　　getNameFunc:function(){  
5. 　　　　var that=this;  
6.     console.log(that);      //Object {name: "My Object"}  
7.     console.log(this.name); //My Object  
8. 　　}  
9. };  
10. object.getNameFunc();  

 

javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。