JavaScript中遇到的问题（待回答）

咕噜一口温开水

已于 2022-02-13 20:53:07 修改

阅读量89

点赞数 1

分类专栏：其他文章标签： javascript 开发语言 ecmascript

于 2022-02-09 10:21:19 首次发布

本文链接：https://blog.csdn.net/qq_47286790/article/details/122836251

版权

其他专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、问题合集

（一）for、点击事件和传参

for循环的一点杂乱分析（不完善）_咕噜一口温开水的博客-CSDN博客https://blog.csdn.net/qq_47286790/article/details/122808941（1）下面两段代码为什么控制台输出的全是4？

代码1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>for循环</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
 
    <script>
        p = document.querySelectorAll('button');
        let i=0  //情况1与情况3一样
        for(;i<4;i++){
            p[i].onclick = function(){
                console.log(i);
            }
        }
    </script>
 
</body>
</html>

代码2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>for循环</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
 
    <script>
        p = document.querySelectorAll('button');
        for(var i=0;i<4;i++){
            p[i].onclick = function(){
                console.log(i);
            }
        }
    </script>
 
</body>
</html>

（2）为什么下面代码控制台输出的是 0,1,2,3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>for循环(难死我了)</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
 
    <script>
        p = document.querySelectorAll('button');
        for(let i=0;i<4;i++){ 
            p[i].onclick = function(){
                console.log(i);
            }
        }
    </script>
 
</body>
</html>

（3）下面代码输出什么

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>for循环(难死我了)</title>
</head>
<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
 
    <script>
        btn = document.querySelectorAll('button');//let i=0  //情况1与情况3一样
        /*---------------------------------demo1---------------------------------------*/
 
        // for(var i=0;i<4;i++){   // 换成let试试,情况2     //var i=0是情况3
        //     btn[i].onclick = function(){
        //         console.log(i);     
        //         // [native code] 意思已经很明确了：是 native 的代码实现的 built-in 函数，而不是 JavaScript 代码
        //         // 已被编译为特定于处理器的机器码的代码。
        //     }
        // }
        
        /*----------------------------------demo2--------------------------------------*/
        let i = 0;
        for(let p=0;p<1;p++){
            let i = 3;
            btn[i].onclick = function(){
                let i = 99;
                console.log(i);
            }
        }
    </script>
 
</body>
</html>

（二）闭包问题

（1）控制台输出数字 101

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        let a = 10;
        let b = 20;

        function outerFun(){
            let a = 100;
            function check(){
                console.log(a);    // this.a就输出100，好像有一个隐藏的a，好像自己定义了一个a
            }
            function add(){
                console.log("加了一次");
                a++;
            }
            return {
                a,
                check,
                add
            };//返回一个对象
        }

        let fn = outerFun();
        console.log(fn);
        fn.add();
        fn.check();
    </script>
</body>
</html>

（2）控制台输出数字 100

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        let a = 10;
        let b = 20;

        function outerFun(){
            let a = 100;
            function check(){
                console.log(this.a);
            }
            function add(){
                console.log("加了一次");
                a++;
            }
            return {
                a,
                check,
                add
            };//返回一个对象
        }

        let fn = outerFun();
        console.log(fn);
        fn.add();
        fn.check();
    </script>
</body>
</html>

（三）var

var a = 10;

function fn(){
    var a = 100;
    a++;
    cosole.log(a);
}

fn();//输出101
console.log(a);//输出10

var不是定义全局变量的吗？为什么这里就像局部变量一样？

二、变量查找、类、原型对象、原型链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Foo(){
            Foo.a = function(){
                console.log(1);
            }
            this.a = function(){
                console.log(2);
            }
        }
        Foo.prototype.a = function(){
            console.log(3);
        }
        Foo.a = function(){
            console.log(4);
        }
        Foo.a(); // 4
        let obj = new Foo();
        obj.a(); // 2
        Foo.a(); // 1
        Foo.prototype.a(); // 3

    </script>
</body>
</html>