JS 变量与变量提升

        在我们平常写 JS 的时候，变量恐怕是出镜率最高的演员；不但出镜多，而且戏路广，生旦净末丑，都能切换自如；尤其当全局变量、局部变量、综合参数、函数声明等，这些戏精凑一块的时候，再来看变量，难免有像双兔傍地走， 难辨雄雌的感觉。

       结合网上的一些范例，我写了如下的以一些测试，清楚变量的套路后，就只用配合她演出，不用在乎她设计那些情节了。

1、变量与参数

var a = 1;
function test1a(a){
	console.log(window.a,this.a,a);	
};	
test1a(2);

function test1b(a){    
	window.a=4;
	console.log(window.a,this.a,a); 
};
test1b(3);

结果：1，1，2 和 4，4，3。参数 name 等同于局部变量，此时 this 指向 window

2、重复声明变量

function test2a(b) { 
	var b; 
	return b;
};
console.log(test2a(1));

function test2b(b) { 
	var b = 2; 
	return b;
};
console.log(test2b(1))

结果：1，2。一个变量在同一作用域中已经声明过，会自动移除 var 声明，但是赋值操作依旧保留

3、自动提升为全局变量

(function(){  
	//console.log(d);	//d is not defined,全局变量 d 没有定义,故不会提升
	var c = d = 1;
})();
//console.log(c);	//c is not defined,c是局部变量
console.log(d);

结果：1。d 自动提升为全局变量 。

4、变量提升

(function () {		
    if (typeof test4 === 'undefined') {
      var test4 = 2; 	//留意此处的变量声明
      console.log(test4);
    } else {
      console.log(test4);
    }
})();

结果：2。变量提升，相当于：var test4；if (...) { test4= 2; console.log(test4) } else{...}

5、普通函数

var e = 1; 
function test5(){	
	console.log(e,this.e,window.e,this === window);
	var e = 2;
	console.log(e,this.e,window.e);
	this.e = 3;
	console.log(e,this.e,window.e);
};
test5();

结果：undefined，1，1，true 和 2，1，1 和 2，3，3

6、构造函数

var f = 1; 
function Test6(){	
	_this = this;
	console.log(f,this.f,window.f,this === window);
	var f = 2;
	console.log(f,this.f,window.f);
	this.f = 3;
	console.log(f,this.f,window.f);
};
var test6 = new Test6();
console.log(_this === test6);	

结果：undefined，undefined，1，false 和 2，undefined，1 和 2，3，1 和 true。构造函数 this 指向实例 test6

7、函数声明、函数表达式 和变量

var g = 1;
function test7a(g) {
	console.log(g);
	var g = 3;
	function g(){ return 4 };	//函数声明	
	console.log(g);
};
test7a(2);// var g; g=2; function g(){};console.log(g);  g=3; console.log(g);

function test7b(){
	console.log(g);	
	var g = function(){ return 1}; //函数表达式		
	function g(){ return 2};
	console.log(g);
};
test7b();

结果：function g(){ return 4 }，3 和 function g(){ return 2 }，function(){ return 1};

8、函数声明、函数表达式 和变量的延展

function test8a(){			
	return h;
	function h() { return 1}; 				
	var h = 2;  			
	var h = function(){ return 3};	  	
};
console.log(test8a());	
//相当于： function test8a(){ var h; function h() { return 2}; return h; }

function test8b(){	 
	var h = 1; 
	return h;
	var h = 2; 
	function h() { return 3}; 					 			
	var h = function(){ return 4};	  	
};
console.log(test8b());	
//相当于：function test8b(){	var h; function h() { return 2}; h = 1; return h; ...}	

结果： function h() { return 1} 和 1

9、函数声明、函数表达式 和变量的延展

var i = 1;
function test9(){
	if(i in window){  //undefined in window 结果:true
		var i = 2;
	}
	console.log(i);
};
test9();
//相当于：function test9(){ var i;  if(i in window){ i = 2}; console.log(i); 

结果： 2

如果有幸帮到你，帮忙到个人主页 Star 一下 ：https://github.com/mark-tang/js---context/blob/master/context.html

听说 Star  的人马上升职加薪！Skr - skr !