在我们平时开发工作中, 跟变量打交道的频率会非常高, 但并不代表完全理解变量的脾气, 就好比去吃烧烤, 会点的一个串叫牛油, 其实这个牛油, 不是牛油果或者牛的油, 而是牛胸口极少有的肥肉.(人生一串看的)
很多字面上的意思会欺骗我们, 变量变量, 随时可变的量; 当全局变量, 局部变量, 综合参数和函数声明等等掺杂到一起, 再来调用变量, 就容易摸不着头脑. 结合网上的一些范例, 我写了如下的以一些测试, 希望能让你对变量有新的认识!
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); //y is not defined, 全局变量 y 没有定义, 故不会提升
- var c = d = 1;
- })();
- //console.log(x); //x is not defined,x 是局部变量
- console.log(d);
结果: 1.y 自动提升为全局变量 .
4, 变量提升
- (function () {
- if (typeof test4 === 'undefined') {
- var test4 = 2; // 留意此处的变量声明
- console.log(test4);
- } else {
- console.log(test4);
- }
- })();
结果: 2. 变量提升, 相当于: var test3;if (...) { test3 = 2; console.log(test3) } 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);
来源: http://www.qdfuns.com/article/25669/f41fc57e38645913230de8d4cb3be071.html