• 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() , 打印的结果为: undefined1

    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(), 打印的结果为: undefinedundefined

    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();
    复制代码
     
  • 相关阅读:
    哈利波特买书事件
    闹钟类app构想
    梦断代码(7-尾)
    梦断代码(3-6)
    梦断代码(0-2)
    环形二维数组求最大子矩阵
    数组问题
    电梯考察
    四则运算的三张计划表
    团队开发用户需求调研
  • 原文地址:https://www.cnblogs.com/wlf-919874006/p/5274913.html
Copyright © 2020-2023  润新知