js作用域问题

<script type="text/javascript">

            alert(i);//Uncaught ReferenceError: i is not defined

            i=11;

           </script>

<script type="text/javascript">

            alert(i);//undefined

            var i=11;

            alert(i);//11

            </script>

代码1：

var name="hello"

function f1(){

    console.info(name);

    var  name="world";

    console.info(name);

}

f1();

输出结果：

undefined；

world；

代码2：

var name="hello"

function f1(){

    console.info(name);

}

f1();

输出结果：

hello

var param = 1;

function main()

{

    console.log(param);

    var param = 2;

    console.log(this.param);

    this.param = 3;

}

//下面两条语句分别会在控制台打印什么？

main();

var m = new main();

讲解如下：

1. main() ，打印的结果为： undefined ， 1

a. > 来看第一个打印的值为什么是 undefined。在js中，方法和变量的声明都是会提前的。也就是说不管你在何处声明的方法或者变量，在js解析时，都会将其提前，具体看代码

demo(); //此处能正常弹出 similar

function demo()

{

    alert("similar");

}

按照js的语句执行顺序，应该是从上自下依次执行的。也就是说会先执行demo(), 然而这个时候demo()还没有声明，并不存在，应该报错才对，为什么还能正常弹出similar呢？这就前面说的方法声明在js解析时会提前。所以上面的代码，经过解析之后，就相当于

function demo()

{

    alert("similar");

}

demo(); //此处能正常弹出 similar

所以才会正常弹出 similar。那么对于变量的声明也是一样的，会提前。我们上面的代码，经过解析之后实际上等同于下面的代码

var param; //声明提前

param = 1;

function main()

{

    var param; //声明提前

    console.log(param); //因为此时 param 只是进行了声明，并未赋值，所以 打印的是 undefined

    param = 2;

    console.log(this.param);

    this.param = 3;

}

这里你或许会感到疑惑。我们在main()方法外面不是已经赋值为1了吗？这是因为，我们在main()方法里面也定义了一个同名的 param。就近原则，js会先查找自己有没有这个变量，如果有，就用自己的，如果没有就向上级查找，上级还是没有就到上上级去查找，如此循环，在哪找到，就在哪停止。如果全都没有，就返回undefined。【这里涉及到一个知识点： js作用域链及变量查找，之后我会写一篇于此相关的讲解文章】

b. > 现在我们再来看看第二打印的值为什么是1。我将代码再做一次等价转换，这样或许大家就更容易明白缘由了，转换后代码如下

window.param = 1; //全局变量 param

// 全局方法 main()

window.main = function () {

    console.log(param);

    var param = 2;

    console.log(this.param);  //此时的this指代的就是 window, 因此 this.param = window.param = 1

    this.param = 3;

}


//调用全局方法main()

window.main();

看到这里，大家是否有些明白了呢？因为 main() 方法和 main() 方法外面的 param 都是定义在最外层的（没有包裹在其他对象里面），因此他们都是全局对象window下的成员。当我们调用 main() 方法时，实际上就是调用的 window.main(); 而通过这样的方式调用时， this 指代的就是全局对象 window。所以第二个打印的值为 1。【这里涉及到一个知识点： js中让人迷糊的this，之后我会写一篇于此相关的讲解文章】

2. var m = new main()，打印的结果为： undefined， undefined

a. > 第一个打印的值为 undefined 的原因和上面的原因是一样的，都是因为变量声明提前导致的。

b. > 那么第二个打印的值也为 undefined 的原因是什么呢？ Js也是支持面向对象式编程的语言，然而js中却没有类的概念，而是使用基于原型(prototype)的继承。因此呢，js中的构造函数也很特别，一般情况下它和普通方法没什么区别，只有通过 new 关键字来调用的时候才能体现出其作为构造函数的功能。而此处正是把 main() 和 new 关键字一起使用，说明此时的main()是一个构造函数。而构造函数中的 this 指代的就是新创建的对象，那么也就是 m 。

var param = 1;

function main()

{

    var param; //声明提前

    console.log(param); //因为此时 param 只是进行了声明，并未赋值，所以 打印的是 undefined

    param = 2;

    console.log(this.param); //构造函数中的this指代的是新创建的对象，我们这里新创建的对象是 m , 所以 this.param = m.param , 而此时 this.param 尚未赋值，所以打印的是 undefined （此处我自己也有一个疑问： 构造函数中的属性的声明会提前吗？也就是 this.param 的声明会提前吗？ 求解）

    this.param = 3;

}

var m = new main();

巴特西

js作用域问题

最新文章

热门文章