js:补充内容

最新推荐文章于 2024-08-15 09:33:26 发布

前端小王*

最新推荐文章于 2024-08-15 09:33:26 发布

阅读量77

点赞数 1

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_48493160/article/details/109995076

版权

js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

for循环中绑定事件的i

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            width: 100px;
            text-align: center;
            float: left;
            height: 50px;
            border: 2px solid #ccc;
            list-style: none;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 获取元素
        var lis = document.querySelectorAll("li");

         for (var i = 0; i < lis.length; i++) {
             lis[i].onclick = function () {
                 console.log(i); // 如果这里直接访问i 那么并不是记住了在循环时候的i 当这个函数执行的时候，才会去寻找i的值 这时候就会遵循寻找变量的规则 当前作用域有就用没有就向上找 于是找到外层作用域 也就是全局中的i 而此时i已经是循环完毕的i
                 // 已经是5了

             }
             console.log(i)
             lis[i].onclick();
         }

         console.log(i)




        // 第一种解决方案 添加元素的JS属性
         for (var i = 0; i < lis.length; i++) {
             lis[i].idx = i;
             lis[i].onclick = function() {
                 console.log(this.idx)
             }
         }



         //第二种解决方案 利用IIFE 生成作用域
         for (var i = 0; i < lis.length; i++) {
             (function (j) {
                 lis[j].onclick = function () {
                     console.log(j, "jjjjj")
                 }
             })(i);
         }


        // 第三种解决方案 利用ES6
         for (let i = 0; i < lis.length; i++) {
             lis[i].onclick = function() {
                 console.log(i)
             }
         }

        
    </script>

</body>

</html>

call和apply

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // call 和 apply它们的作用都是改变函数中的this
        function demo(a, b, c) {
            console.log(this, a, b, c);
        }
         demo(); // window
         var obj = {
             name: "王老五",
             demo: demo,
             son: {
                 name: '王老六',
                 demo: demo
             }
         }
         obj.demo(); // obj

         obj.son.demo(); // son
        
         //call和apply都是函数的方法 只有函数才可以调用

        // call 方法第一个参数是调用函数的this 
        // 往后的每一个参数都是调用函数所需的参数 都会传递给调用函数
        // demo.call({}, 1, 2)
        // demo.call(document)
        // demo.call(document.body, 1, 2, 3)
        

        // apply 方法与call方法一致 都可以改变函数中的this 
        // 第二个参数是一个数组 里面装的是原函数所需的参数
        // demo.apply({}, [1, 2, 3])
    </script>
</body>
</html>

函数传参的规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数传递参数： 引用类型和值类型
        var a = 10;
        var obj = {};

        // function demo(arg) {
        //     arg = 11;
        // }
        // demo(a);
        // console.log(a); // 10  因为传递值类型的时候是按值传递

        // function demo(arg) {
        //     arg.name = "张三";
        // }
        // demo(obj);
        // console.log(obj); // {name: "张三"} 因为传递引用类型的时候是按地址传递

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