首页 > 代码库 > JavaScript的this用法

JavaScript的this用法

1. 作用域

      先看以下代码:

1)var in_window = "a" in window; console.log(in_window); 

2)var in_window = "a" in window; console.log(in_window); if(!("a" in window)) { var a = 1; }

3)var a; var in_window = "a" in window; console.log(in_window); if(!("a" in window)) { a = 1; }

      控制台输出的结果分别是:false true true。如何解释? 这是由于在js的变量作用域中有个规则:所有变量申明都在范围作用域的顶部!也就是说,在2)代码中,if语句块内的申明的变量a,会自动提到上面去申明。其等价于3)。

      由上述的分析可知,可以理解下面代码的输出结果是undefined。

      if(!("a" in window)) { var a = 1; } console.log(a); //undefined  该代码其实相当于:var a; if(!("a" in window")) { a = 1; } console.log(a);

      再试一次:

var s = ‘‘;
if (false) {
    var a = 1;
}

      浏览器中的调试结果如下:

      有图有真相。变量a的申明的确提前了。

      变量申明提升的情况,总结如下:

1)简单变形

      var s = ‘‘; while(false) { var a = 1; }

      if(!("a" in window)) { a = 1 } console.log(a); //1

      console.log(a); //报错,"ReferenceError: a is not defined."

2) 碰上函数

      定义函数有两种方式:一种是函数申明,另一种是函数表达式。函数申明形式:function functionName(arg0, arg1, arg2) { //函数体 },函数表达式形式:var functionName = function(arg0, arg1, arg2) { //函数体 } 。关于函数申明,它有一个重要特征就是函数申明提升,看下面的例子。

sayHi();
function sayHi() {
    console.log("hi");
}

      浏览器中的调试结果如下: 发现函数sayHi已经被申明了,并且其值为sayHi函数。第一行代码执行后,输出hi。

 

      若采用函数表式的形式,此时我们能看到变量提升的效果。

sayHi();
var sayHi = function() {
    console.log("hi");
}

      在浏览中的调试效果如下:发现变量sayHi提升了,它的值是undefined,第一行代码执行的话,会报错:"TypeError:undefined is not a function"。

      接下来的例子就很好理解。

      if(!("a" in window)) { var a = function() { window.a = 1; } } console.log(a); //undefined 该代码等价于: var a; if(!("a" in window)) { a = function() { window.a = 1; } } console.log(a); 其实无论if语句块中的a被定义成何种类型的值,a的申明都提前了。(变量提升)

      将上述代码变形如下:

      if(!("a" in window)) { function a() { window.a = 1; }} console.log(a); //function a() { window.a = 1;}(函数申明提升)

 

JavaScript的this用法