超级详解javascript变量引入、作用域与this指向

一、在javascript中，我们变量引入的方式有五种：

1. 直接声明

winVar = 'winVar';   //大家都晓得，这种情况下，变量都是window的属性，全局变量。

2. 用var 声明

var var_x = "var_x";  

3. 在函数内部用this关键字

this.var = 'this.var'；

4. 作为对象属性

var obj = {

objVar:"objVar"

};

5.函数形参

function func(argsVar){}

二、变量的使用，我们会有两种方式

1. 直接使用

console.log(var);

2. this.var

console.log(this.var);

变量的作用域，或者说，变量标识符的解析也分为这两种情况进行。

--------------------------------------------------------------------------------------------------------------------

三、函数的定义方式：直接定义（window下，内部函数），对象的方法，原型对象的方法。

注：1函数作为变量定义，则与变量引入方式一致。

      2.对象的方法内容定义的函数，也属于直接定义的函数

四、函数的调用方式有三种： 直接调用，call/apply，with。

五、变量的作用域

1.直接定义的函数，直接调用

var L = console.log;
var testVar = 'winVar1';

L('this==window ?:' + (this == window));

function winScope(args){
L('winScope this==window ?:' + (this == window));
this.testVar = 'winVar2';
var testVar = 'funVar1';
// L(this.testVar);

function funScope(args){
L('funScope this==window ?:' + (this == window));
this.alert('ddd');
// var testVar = 'fun1Var1';
this.testVar = 'fun1Var2';
L(this.testVar);
L(testVar);

(function(){
L('匿名函数 this==window ?:' + (this == window));
})();
}

funScope();
}

winScope();

L(this.testVar);浏览器运行环境，执行结果：
this==window ?:true
winScope this==window ?:true
funScope this==window ?:true
fun1Var2
funVar1
匿名函数 this==window ?:true
fun1Var2在第二部分，我们已经了解到，变量的使用的两种方式，直接使用和 this.var。
同过以上例子可以看到，直接定义函数，无论有多少嵌套，即使是匿名函数，其函数内部，this都指向window。所以，这种情况下：

（1）this.var 只会在this中查找，且内部函数声明的this.var会覆盖外部函数的this.var（这个容易理解咯~~）。可以想象，内部函数使用了this.var，而没有定义，它会向外查找最近的外部函数定义的this.var，并使用。

（2）直接使用变量，沿着内部函数->外部函数->...->windows下函数->全局变量的路径查找。

（3）只有window环境下var定义的变量会放到this中。

2. 对象方法，直接调用
var obj = {
testVar:"objVar",
objFunc:function(){
L('obj this==window ?:' + (this == window));
L('this.testVar : ' + this.testVar);
L('testVar : ' + testVar);
}
}
obj.objFunc()执行结果：

obj this==window ?:false
this.testVar : objVar
Uncaught ReferenceError: testVar is not defined
at Object.objFunc (createjs-demo.htm:113)
at createjs-demo.htm:132

可以看到，对象方法，直接调用时，方法的this是指向对象的。且对象的属性必须通过this.var，这种方式使用。
在看下面这个例子:

var obj = {
testVar:"objVar",
objFunc:function(){
L('obj this==window ?:' + (this == window));
L('this.testVar : ' + this.testVar);
L('testVar : ' + testVar);
},
objVar:{
//testVar:"objVarVar",
objVarFunc:function(){
L('obj this==window ?:' + (this == window));
L('this.testVar : ' + this.testVar);
}
}
}
obj.objVar.objVarFunc();运行结果：
objVar this==window ?:false
this.testVar : undefined可以看到，对象的属性是没有传递性的。
最后看一个例子: 

var obj = {
testVar:"objVar",
objFunc:function(){
L('obj this==window ?:' + (this == window));
L('this.testVar : ' + this.testVar);

L("--------------------------------------------------------");
function funScope(args){
L('funScope this==window ?:' + (this == window));
this.alert('ddd');
// var testVar = 'fun1Var1';
this.testVar = 'fun1Var2';
L(this.testVar);
L(testVar);

(function(){
L('匿名函数 this==window ?:' + (this == window));

})();
}

funScope();
},
objVar:{
//testVar:"objVarVar",
objVarFunc:function(){
L('objVar this==window ?:' + (this == window));
L('this.testVar : ' + this.testVar);
}
}
}
obj.objVar.objVarFunc();
L("--------------------");
obj.objFunc.call(); 运行结果：
objVar this==window ?:false
this.testVar : undefined
--------------------
obj this==window ?:true
this.testVar : undefined
--------------------------------------------------------
funScope this==window ?:true
fun1Var2
fun1Var2
匿名函数 this==window ?:true