JS函数详解

最新推荐文章于 2023-04-13 07:25:59 发布
最新推荐文章于 2023-04-13 07:25:59 发布
阅读量467 收藏
点赞数 2
分类专栏： js 函数 文章标签： javascript 前端
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161908834616780261920689%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161908834616780261920689&biz_id=0&utm_med
版权
js 同时被 2 个专栏收录
19 篇文章 2 订阅
订阅专栏
函数
12 篇文章 0 订阅
订阅专栏

函数的基本概念、声明及调用；函数作用域、作用域链、闭包；this指向及修改和绑定this指向等。

1.函数概念，声明及调用

JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。

声明方式：严格意义上两种方式，但还有匿名函数

  • 方式一：
    function 方法名(){
         //要执行的代码
    }

  • 方式二：ES6中声明方式箭头函数，()=>{}

  • 方式三：匿名函数，将函数存到变量里 var func = function(){};
    函数调用：两种方式调用

  • 调用方式一：名字(); 函数可以多次调用

    //函数声明
    function fn(){
        console.log(1);
    }
     
    //函数的调用
    fn();

调用方式二：在事件中调用，直接写函数名，不使用括号

    //函数声明
    function fn(){
        console.log(1);
    }
     
    //函数在事件中的调用
    document.onclick = fn;

2.函数表达式（匿名函数）

函数表达式：就是把函数存到变量里。

匿名函数：没有名字的函数；

匿名函数在使用时只有两种情况：

  • 匿名函数自执行：声明后不需要调用就直接执行
    (function(){
        console.log("匿名函数自执行");
    })();
  • 函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或数组对应位置进行调用。调用时需要写括号。
//2，函数表达式：把函数存到变量或数组等里，调用时通过变量进行调用
var fn = function(){
    console.log("函数表达式：将函数存到变量里");
};
fn();//调用时需要写括号
 
//2，函数表达式：把函数存到数组第0位，调用时通过数组第0位进行调用
var arr = [];
arr[0] = function(){
     console.log("函数表达式：将函数存到数组的对应位置");
};
arr[0]();//调用时需要写括号要写括号
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：
在这里插入图片描述
事件函数扩展：给元素添加事件的说法是不正确的。事件时元素本身就具有的特征，只是触发事件后，默认没有相关的一些处理。这种操作其实就是给元素的某个事件添加一个事件处理函数。当事件被触发后，判断到属于该事件类型，就触发该事件函数的处理函数。

可以通过console.dir()把对象的所有属性和方法打印出来，查看对象或元素本身具有的事件。

<script>
       //事件时元素本身就具有的特征，只不过，触发事件后，默认没有相关的一些处理。事件函数其实就是给元素的某个时间添加一个事件处理函数。
       //可以通过console.dir()把对象的所有属性和方法打印出来
       document.onclick = function(){
           console.log("事件的处理函数");
       };
       //当被触发后，判断到属于该事件类型，就触发该事件函数的处理函数
       if(typeof document.onclick == "function"){
         document.onclick();
       }
</script>

结果：
在这里插入图片描述

3.函数传参

获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱。

  • 形参：形式上的参数——给函数声明一个参数；
  • 实参：实际的参数——在函数调用时给形参赋的值
    function func(形参1,形参2){
        //函数执行代码
    }
     
    func(实参1,实参2);//调用时传参

什么时候使用到传参？当有两段代码本身的功能极其相似，只有个别地方不一样时，就可以把两段代码合并成一个函数，然后把两段代码中不一致的内容通过传参传进去。

案例：自定义（多个模块）选项卡封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../index.js"></script>
    <title>选项卡封装</title>
    <style>
        body { margin: 0; padding: 0; }
        .tab .active { background: red; }
        .cont div { display: none; }
        .cont .show { background: #000; font-size: 60px; color: white; width: 220px; height: 220px; display: block;  }
    </style>
</head>
<body>
<div id="wrap1" class="wrap">
    <div class="tab">
        <button class="active">选项卡一</button>
        <button>选项卡二</button>
        <button>选项卡三</button>
    </div>
    <div class="cont">
        <div class="show">内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</div>
 
<div id="wrap2" class="wrap">
        <div class="tab">
            <button class="active">选项卡一</button>
            <button>选项卡二</button>
            <button>选项卡三</button>
        </div>
        <div class="cont">
            <div class="show">内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
</div>
<div id="wrap3" class="wrap">
        <div class="tab">
            <button class="active">选项卡一</button>
            <button>选项卡二</button>
            <button>选项卡三</button>
        </div>
        <div class="cont">
            <div class="show">内容一</div>
            <div>内容二</div>
            <div>内容三</div>
        </div>
</div>
<script>
 
    //通过id获取元素
    /*
    var wrap1 = _id("wrap1");
    var wrap2 = _id("wrap2");
    var wrap3 = _id("wrap3");
    
    tab(wrap1);
    tab(wrap2);
    tab(wrap3);
    */
   //通过数组方式获取一组
    var wraps = _selectorAll(document,".wrap");//注意这里的parent父级已经是body了， 所以最好使用document
    for (var i = 0; i < wraps.length; i++) {
        tab(wraps[i]);
    }
    function tab(wrap){
        var btn = _selectorAll(wrap,".tab button");
        var divs = _selectorAll(wrap,".cont div");
 
        var num = 0;//记录当前样式
        for (var i = 0; i < btn.length; i++) {
            btn[i].index = i;
            btn[i].onclick = function(){
                //清除当前样式
                btn[num].classList.remove("active");
                divs[num].classList.remove("show");
 
                this.classList.add("active");
                divs[this.index].classList.add("show");
 
                num = this.index;
            };
        }
    }
</script>
</body>
</html>

index.js:

function _id(idName){
    return document.getElementById(idName);
}
function _selector(parent,selector){
    return parent.querySelector(selector);
}
function _selectorAll(parent,selectors){
    return parent.querySelectorAll(selectors);
}

结果：
在这里插入图片描述

4.修改input的值

value和innerHTML都可以用来获取和修改元素的值（或内容）；value只能获取特定的textarea和input的值，但是innerHTML可以获取所有HMTL元素的值。

不同之处如下：
1）value可以用来修改（获取）textarea和input的value属性的值或元素的内容；
2）innerHTML用来修改（获取）HTML元素（如div）html格式的内容。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../index.js"></script>
    <title>修改input的值</title>
    <style>
        .wrap input, .wrap button { display: none; }
        li { height: 30px; line-height: 30px; }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <span id="first">这是第一个列表</span>
                <a href="javascript:;">修改</a>
                <input type="text">
                <button>确定</button>
            </li>
            <li>
                <span>这是第二个列表</span>
                <a href="javascript:;">修改</a>
                <input type="text">
                <button>确定</button>
            </li>
            <li>
                <span>这是第三个列表</span>
                <a href="javascript:;">修改</a>
                <input type="text">
                <button>确定</button>
            </li>
            <li>
                <span value="asf">这是第四个列表</span>
                <a href="javascript:;">修改</a>
                <input type="text">
                <button>确定</button>
            </li> 
        </ul>
    </div>
    <script>
        var lis = _selectorAll(document,"li");
        for (var i = 0; i < lis.length; i++) {
            modify(lis[i]);
        }
        function modify(li){
            var modify = _selector(li,"a");
            var span = _selector(li,"span");
 
            var input = _selector(li,"input");
            var btn = _selector(li,"button");
            //1.点击修改，“这是第一个列表”span标签隐藏，“修改”标签隐藏；input和确定按钮显示
            modify.onclick = function(){
                span.style.display = "none";
                this.style.display = "none";
                input.style.display = "inline-block";
                btn.style.display = "inline-block";
 
                //注意：span标签只能通过.innerHTML获取元素的值，而不能通过.value
                //2.将span标签的文字内容赋值给input输入框
                input.value = span.innerHTML;
            };
            //3.点击确定按钮，先验证是否为空；再还原会span标签和修改a标签
            btn.onclick = function(){
                var txt = input.value;
                if(txt === ""){
                    alert("请输入内容");
                }else{
                    input.style.display = "none";
                    this.style.display = "none";
                    span.style.display = "inline-block";
                    modify.style.display = "inline-block";
 
                    //4.将修改后的值赋给span标签
                    span.innerHTML = txt;
                }
            };
        }
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：
在这里插入图片描述在这里插入图片描述在这里插入图片描述

5.函数的不定参（可变参）—关键字arguments

案例：购物车商品累计。事先不知道用户买多少商品

不定参（可变参）使用关键字：arguments，代表所有实参的集合。通过下标获取参数的每一位；通过length获取实参的个数；

集合是类数组，可以使用下标，但是没有数组中的各种方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可变参（不定参）：arguments</title>
</head>
<body>
    <script>
        //arguments 代表所有实参的集合（类数组），可以通过下标获取各个实参，通过length获取集合长度
        function args(){
            console.log(arguments);
            console.log("arguments的各个参数为：");
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        } 
        
        args(23,45,999,10.90,"can","不定参");
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：

在这里插入图片描述

6.函数返回值

函数返回值即函数执行之后的返回结果。

  1. 所有函数都会有函数返回值即函数执行后一定会返回一个结果，如果没有定义默认返回undefined；
  2. 在函数中，return后定义返回值；
  3. 在函数中，return之后的代码就不会再执行了
  4. return只能用于函数中，用在其他地方会报错
<script>
        function func1(){
           console.log("函数func1执行内容");
        } 
        function func2(){
           console.log("函数func2执行内容");
           return 1;
           var a = 2;
           console.log(a);
        } 
        //如果没有定义默认返回undefined
        console.log("func1返回结果："+func1());//undefined
        console.log("func2返回结果"+func2());//1
</script>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：发现return后的代码没有继续执行
在这里插入图片描述

7.封装获取元素的方法

封装通过id/CSS选择器获取（一般在父级下获取，所以传入父级和选择器名字）获取多个元素的方法，然后返回获取到的值

//通过id名获取元素
function _id(idName){
    return document.getElementById(idName);
}
 
//通过CSS选择器获取一个元素
function _selector(parent,selector){
    return parent.querySelector(selector);
}
 
//通过CSS选择器获取一组元素
function _selectorAll(parent,selectors){
    return parent.querySelectorAll(selectors);
}
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

使用：

var wrap1 = _id("wrap1");
var wrap2 = _id("wrap2");
var wrap3 = _id("wrap3");
 
var wraps = _selectorAll(document,".wrap");
 
var btn = _selectorAll(wraps,".tab button");
var divs = _selectorAll(wraps,".cont div");
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

8.获取计算后样式—getComputedStyle(el)

点击时获取box的宽度，在原有基础上+100

  • 从style中获取的是行间样式，但是通常样式不会写在行间；
  • 获取计算后样式：getComputedStyle(el)获取元素的计算后样式。属于window的方法，即window.getComputedStyle(el)。在JS中使用window下的方法时，window可以不写；
  • getComputedStyle(el)方法不兼容IE6,7,8；
  • 计算后样式：优先级最高的样式，即当前显示出来的样式
  • 使用getComputedStyle(el)是获取window下所有的样式，getComputedStyle(el)[‘样式名’]即可获取到特定样式
  • 写样式名时，使用驼峰样式的名字（否则IE下会有兼容问题），如margin-left必须写成marginLeft。
  • IE下获取元素的计算后样式，需要使用el.currentStyle[‘样式名’]
  • 兼容IE和其他浏览器：判断el.currentStyle返回true即表示IE，否则就是其他浏览器，然后在对应浏览器下使用对应方法
  • 获取计算后样式会经常使用，因此可以封装成方法，进行复用
  • getComputedStyle(el)和el.currentStyle获取不到伪元素的样式，因为伪元素不是DOM的内容
  • 伪类样式计算后样式可以获取到，伪元素获取不到

标准浏览器下：transition:.5s;设置过渡效果的时间，否则div会直接变到从100+100的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../index.js"></script>
    <title>getComputedStyle(el)</title>
    <style>
        #box { width: 100px; height: 100px; background: red; transition:.5s; }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //需求：点击div，div的width在原有基础上+100px
        var box = _id("box");
        var ss = 0;
        box.onclick = function(){
            //直接获取box.style.width是获取不到的，因为样式时写到style标签，而非行间样式
            //console.log(box.style.width);//获取不到值
 
            //使用getComputedStyle(el)['样式名']即可获取到当前显示出来的样式
            var curStyle = getComputedStyle(box)['width'];
            //获取到的结果是“100px”，需要将其进行转为数字。width最后有可能会有小数点，所以最好使用parseFloat()。大多数情况下parseInt()亦可
            //但是parseInt(curStyle);才能去掉px进行相加
            //注意px前面的数字千万不要加引号
            this.style.width = parseInt(curStyle) + 100 + 'px';
        };
    </script>
</body>
</html>

结果：
在这里插入图片描述
不断点击后：
在这里插入图片描述
兼容问题：发现在IE6,7，8下并不支持getComputedStyle(el)方法：
在这里插入图片描述
解决：通过el.currentStyle判断返回true代表在IE浏览器下，为false就不是在IE浏览器下。在IE浏览器下必须使用el.currentStyle才行

//解决浏览器兼容问题：通过el.currentStyle判断返回true代表在IE浏览器下，为false就不是在IE浏览器下。在IE浏览器下必须使用el.currentStyle才行
function currStyle(el,styleName){
    // var curStyle = '';
    // if(el.currentStyle){
    //     curStyle = el.currentStyle[styleName];
    // }else{
    //     curStyle = getComputedStyle(el)[styleName];
    // }
    // return curStyle;
    //使用三元获取返回值
    return el.currentStyle?el.currentStyle[styleName]:getComputedStyle(el)[styleName];
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../index.js"></script>
    <title>getComputedStyle(el)</title>
    <style>
        #box { width: 100px; height: 100px; background: red; transition:.5s; }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //需求：点击div，div的width在原有基础上+100px
        var box = _id("box");
 
        box.onclick = function(){
            //直接获取box.style.width是获取不到的，因为样式时写到style标签，而非行间样式
            //console.log(box.style.width);//获取不到值
 
            //使用getComputedStyle(el)['样式名']即可获取到当前显示出来的样式
            // var curStyle = getComputedStyle(box)['width'];
            var curStyle = currStyle(box,'width');
            //获取到的结果是“100px”，需要将其进行转为数字。width最后有可能会有小数点，所以最好使用parseFloat()。大多数情况下parseInt()亦可
            //但是parseInt(curStyle);才能去掉px进行相加
            //注意px前面的数字千万不要加引号
            this.style.width = parseInt(curStyle) + 100 + 'px';
        };
    </script>
</body>
</html>

结果：
在这里插入图片描述在这里插入图片描述

8.JS预解析机制（变量提升Hoisting）

JS预解析机制（变量提升（Hoisting））：JS在读取到一个script标签（或者一个函数作用域）时，会先进行一个预解析的过程，在这个过程中，会把var声明的变量和function声明的函数体，提升到整个scriptt标签（或者一个函数作用域）最前边去。在预解析完之后，JS才会从上到下一行一行解析代码并执行。

  • var在预解析时，会把声明提升到最前边（赋值前打印返回undefined）。只提升声明，不会把赋值过程进行提升。
  • function的函数体在预解析时，会把整个函数体提升至最前边。（函数体：function fn(){ console.log(1);}）
  • 函数表达式（函数表达式：var fn = function(){};）只会提升函数表达式的声明，不会执行（真正执行函数表达式前调用会返回undefined）
  • 在预解析时，会先预解析var（包括变量声明和函数表达式的变量声明），把var放在最前面，然后再预解析function，所以当var和function重名时，function会覆盖var;
   //JS var变量的预解析
    console.log("var变量的预解析："+a);//undefined
    var a = 0;
 
    //JS函数体的预解析
    console.log("函数体的预解析:"+fn);
    function fn(){
        console.log("函数");
    }
    //JS函数表达式的预解析
    console.log("函数表达式的预解析:"+fnn);
    var fnn = function(){
        console.log("函数表达式");
    };

结果：
在这里插入图片描述
在预解析时，会先预解析var，把var放在最前面，然后再预解析function，所以当var和function重名时，function会覆盖var：

    /*
        解析过程：先预解析var声明的a,再预解析函数体a，后面覆盖前面，所以最后结果是function函数体
        var a;
        function a(){console.log("函数a");};//此函数体解析后会覆盖变量a
    */
    console.log(a);
    var a = 0;
    function a(){
        console.log("函数a");
    }

结果：
在这里插入图片描述
JS预解析示例：

    //JS预解析过程：遇到Script标签或一个函数作用域，会先进行预解析，先预解析var声明的变量(包括普通变量声明和函数表达式声明)，再声明function函数体，如果有重名function声明会覆盖var声明
    /*
        预解析之后代码：
        var a;//变量a
        var a;//函数表达式a(函数表达式也是var声明)
        function a(){//函数体
            console.log(1);
        };
        console.log(a);//打印函数体a
        var a = 10;
        console.log(a);//10
        console.log(a);//10
        a = function(){
            console.log(2);//打印函数表达式a
        };
        console.log(a);
    */
    console.log(a);
    var a = 10;
 
    console.log(a);
    function a(){
        console.log(1);
    };
 
    console.log(a);
    var a = function(){
        console.log(2);
    };
 
    console.log(a);

结果：
在这里插入图片描述
JS预解析机制不是良好的编码习惯，不利于代码维护，建议不要使用，编码时建议先声明，再使用。

扩展：从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

ES6之后就不能像JS预解析这么编写JS代码了。

9.作用域

在这里插入图片描述
通常来说一段程序代码中使用的变量和函数并不总是可用的，限定其可用性的范围即作用域，作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

通俗的说，作用域：数据起作用的范围（某条数据可以在什么范围内使用）

前端权威官方MDN：https://developer.mozilla.org/en-US/docs/Glossary/Scope

作用域的分类：

  1. -全局作用域：通过var或function声明在全局（声明在任意函数之外和代码块之外）中的数据，在全局的任意地方都可以调用或修改（即全局变量）和在window下的属性
  2. 局部作用域：
  3. 函数作用域：声明在函数内部的某个数据（var，function，参数）,就只能在函数内部使用（函数的局部作用域）
  4. 块级作用域（ES6新增）

全局作用域：

    //声明在全局中的变量
    var a = 0;
    console.log(a);//可在全局任意地方调用
    function fn(){
        console.log(a);//可在函数中调用
        a = 10;//可在任意地方修改全局中的变量
    }
    fn();
    console.log(a);

结果：
在这里插入图片描述

10.window

  • 在JS中，默认情况下 var声明的全局变量和function声明的全局函数会挂载在window上(所以要避免声明全局变量和全局函数)
  • 在JS中，默认全局数据都会保存在window下（ES6之前）
  • 另外window是JS在浏览器里的顶层对象，所以window的属性和方法也都是全局的
  • 在JS中，调用window下的属性和方法，默认可以不写window，所以如果在函数里面声明变量没有写var，会把其当做window的一个属性；（不规范写法，要避免）
    //var声明的全局变量和function声明的全局函数，都默认挂载在window上
    var a = 0;
    console.log(window);
 
    function fn(){
        b = 10;
        console.log(1);
    }
    fn();
    console.log(b);//此处b没有写声明的var所以，b=10即为window.b = 10;相当于挂载在window上的全局变量
 
    //在JS中，默认全局数据都会保存在window下
    //window是浏览器的最顶层对象，所以默认window下的属性和方法都是全局的。所以window下的方法和属性，默认可以不写window

结果：全局变量a和全局函数fn()都默认挂载在window上。而且，此处b没有写声明的var，所以，b=10即相当于window.b = 10;也是挂载在window上的全局变量：
在这里插入图片描述

11.全局污染（命名冲突问题）

全局变量污染：大家都在全局中写代码，很容易造成命名冲突，导致代码冲突。ES6中代码冲突会直接报错。所以要养成好的习惯不要在全局去声明变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全局污染</title>
</head>
<body>
    <div id="list"></div>
    <div class="memulist"></div>
    <script>
        var list = document.getElementById("list");
        var list = document.querySelector(".memulist");
        console.log(list);
    </script>
</body>
</html>

结果：发现最后获取的只有一个元素，所以很容易造成代码冲突
在这里插入图片描述
解决：不要声明全局变量

(function(){
     var list = document.getElementById("list");
     console.log(list);
})();
 
(function(){
      var list = document.querySelector(".memulist");
      console.log(list);
})();
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：
在这里插入图片描述
JS中提供了id使用的简便方法，直接调用id名即可：但尽量不要这么写，不规范：

console.log(list);

匿名函数：匿名函数自执行本身就是为了避免在全局写代码，避免冲突的。匿名函数自执行也叫开启一个新的命名空间。即开启新的作用域，此作用域和其他的不会冲突。

12.作用域链（scope chain）

作用域链决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。

作用域链：JS中数据的查找规则。

作用域链查找过程：在JS中我们调用一条数据时，会先在当前作用域进行查找，如果找不到，就从向上找父作用域的数据，还找不到就接着向上，一直找到全局作用域（window对象），window都找不到就报错。

    //调用fn()时，在其子函数fn2()被调用时，首先会在fn2()自己的作用域内找变量a
    //找不到就在其父级作用域即fn()作用域中找，即a=10，然后打印a=10
    function fn(){
        var a = 10;
        function fn2(){
            console.log(a);
        }
        fn2();
    }
    fn();

结果：在这里插入图片描述
作用域链查找关系图：
在这里插入图片描述
作用域链示例：

<script>
    function fn(){
        var b = 0;
        return function(){
            b++;
            console.log(b);
        };
    }
    var f = fn();
    console.log(f);//ƒ (){ b++; console.log(b); }
    f();//1
    f();//2
    f();//3
    fn()();//1
</script>

结果：
在这里插入图片描述
解析（函数拆分）三个f()：

注意：这里的var f = fn();是将函数fn()的返回值函数体f(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体。f此时是fn的子函数，那它可以访问和更改父级fn的作用域中的b。

b变量会一直赋值，是因为JS的垃圾回收机制决定的，只要检测都有引用存在，就不会释放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作用域链示例-函数拆分</title>
</head>
<body>
<script>
    // function fn(){
    //     var b = 0;
    //     return function(){
    //         b++;
    //         console.log(b);
    //     };
    // }
    // var f = fn();
    // f();//1
    // f();//2
    // f();//3
    // fn()();//1
    //这里的var f = fn();是将函数fn()的返回值函数体function(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体
    //即这里的三个f()相当于，在函数fn()中写了三个子函数，再进行调用
    //由于b变量对于fn1(),fn2(),fn3()都是父级变量，所以每次b++都会将b的值+1,所以最后得到的值即1，2，3
    function fn(){
        var b = 0;
        function fn1(){
            b++;
            console.log(b);
        }
        fn1();
        function fn2(){
            b++;
            console.log(b);
        }
        fn2();
        function fn3(){
            b++;
            console.log(b);
        }
        fn3();
    }
 
    fn();
</script>    
</body>
</html>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：所以执行三个f();和执行三个fn();得到的结果是不一样的。
在这里插入图片描述
以上进一步分解：

<script>
    // function fn(){
    //     var b = 0;
    //     return function(){
    //         b++;
    //         console.log(b);
    //     };
    // }
    // var f = fn();
    // f();//1
    // f();//2
    // f();//3
    // fn()();//1
    //这里的var f = fn();是将函数fn()的返回值函数体function(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体
    //即这里的三个f()相当于，在函数fn()中写了三个子函数，再进行调用
    //由于b变量对于fn1(),fn2(),fn3()都是父级变量，所以每次b++都会将b的值+1,所以最后得到的值即1，2，3
    function fn(){
        var b = 0;
        // function fn1(){
        //     b++;
        //     console.log(b);
        // }
        // fn1();
        // function fn2(){
        //     b++;
        //     console.log(b);
        // }
        // fn2();
        // function fn3(){
        //     b++;
        //     console.log(b);
        // }
        // fn3();
        function fnn(){
            b++;
            console.log(b);
        }
        fnn();
        fnn();
        fnn();
 
    }
    fn();
</script>

结果：所以调用三次f()和再fn()函数里执行三次fnn()是一样的
在这里插入图片描述
函数拆分fn()():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作用域链示例——函数拆分fn()()</title>
</head>
<body>
<script>
    // function fn(){
    //     var b = 0;
    //     return function(){
    //         b++;
    //         console.log(b);
    //     };
    // }
    // var f = fn();
    // f();//1
    // f();//2
    // f();//3
    // fn()();//1
 
    //此处的fn()();第一个括号表示执行fn()函数，第二个括号表示执行fn()函数中返回值中的函数，所以fn()()相当于整个fn函数再执行一次
    //函数每次调用，都相当于把这个代码复制出来执行了一遍。所以fn()();每次执行都是重新执行一遍代码，相当于以下：
    function fn(){
        var b = 0;
        return function(){
            b++;
            console.log(b);
        };
    }
    function fnA(){
        var b = 0;
        return function(){
            b++;
            console.log(b);
        };
    }
    fn()();//1
    fnA()();//1
</script>
</body>
</html>

结果：
在这里插入图片描述
函数每次调用，如fn()和fnA()之间没有任何关联，都相当于把这个代码复制出来执行了一遍。

13.闭包

闭包是对作用域链的一种表现和使用。

函数对象可以通过作用域链相互关联起来，函数体内的数据(变量和函数声明)都可以保存在函数作用域内，这种特性在计算机科学文献中被称为“闭包”。既函数体内的数据被隐藏于作用于链内，看起来像是函数将数据“包裹”了起来。从技术角度来说，js的函数都是闭包：函数都是对象，都关联到作用域链，函数内数据都被保存在函数作用域内。

fn()();调用函数后的返回值还是一个函数，也对其进行执行

函数的每次执行之间没有任何关系。每次执行都相当于在JS内部吧代码重新写了一遍。

面试时：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包：

  • 形式：函数嵌套函数；
  • 作用：子函数可以访问父函数的作用域，但是父级不能访问子级的。
    闭包示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闭包</title>
</head>
<body>
<script>
    function fn(){
        var a = 0;
        function fn2(){
            console.log(a);//fn2是fn的子函数，所以可以访问父级作用域的a
        }
        fn2();
    }
    fn();
    console.log(a);//在fn函数作用域外，不能访问其子级作用域fn中的变量a
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：
在这里插入图片描述
闭包应用：i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闭包应用</title>
</head>
<body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <script>
        var btns = document.querySelectorAll("button");
        for (var i = 0; i < btns.length; i++) {
            fn(i);
        }
        //i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i
        function fn(index){
            btns[index].onclick = function(){
                console.log(index);
            };
        }
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「黎小小咩~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

结果：按钮进行循环后会将当前index传参给fn函数，当点击按钮时，再通过父级作用域获取到父级的index
在这里插入图片描述
闭包应用二：（匿名函数自执行方式）页面刷新时解析for循环并将index传给fn，并且立即执行fn函数，当点击按钮时，再通过父级作用域fn获取到index

<script>
        var btns = document.querySelectorAll("button");
        for (var i = 0; i < btns.length; i++) {
            (function fn(index){
                btns[index].onclick = function(){
                    console.log(index);
                };
            })(i);
        }
        //i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i
        // function fn(index){
        //     btns[index].onclick = function(){
        //         console.log(index);
        //     };
        // }
    </script>

结果：
在这里插入图片描述
闭包应用三：点击按钮后，再立即执行一个匿名函数自执行。匿名函数自执行后，得到的是一个函数返回值，当点击时再执行该函数中的内容

    <script>
        var btns = document.querySelectorAll("button");
        for (var i = 0; i < btns.length; i++) {
            //匿名函数自执行后，得到的是一个函数返回值，当点击时再执行该函数中的内容
            btns[i].onclick = (function fn(index){
                return function(){
                    console.log(index);
                };
            })(i);
        }
    </script>

结果：
在这里插入图片描述

14.this当前执行代码的环境对象

默认情况下：

  • 函数外：window
  • 函数内：函数中的this指向谁，取决于这个函数是怎么调用的
  • 严格模式下，默认为undefined
  • 作为对象的属性（方法，事件（方法的一种））调用，指向当前对象
  • 其余情况执行window
<script>
//函数外：window
// 函数内：函数中的this指向谁，取决于这个函数是怎么调用的
    // 作为对象的属性（方法）调用，指向当前对象
    // 其余情况执行window
 
function fn(){
    console.log(this);
}
//直接调用函数，this代表window
console.log("没有作为对象的属性进行调用，而是直接调用:");
fn();//this指向window 
 
//作为对象的属性或方法调用
//作为对象的属性进行调用
console.log("作为对象的属性进行调用:");
document.fn = fn;
document.fn();//this 执行document
 
//事件里，把this绑定在事件上
console.log("作为对象的属性(事件)进行调用:");
document.onclick = fn;
document.onclick();//this 执行document
 
//数组里,把函数放到数组里，再由数组调用，此时this指向当前数组
console.log("作为对象(数组)进行调用:");
var arr = [fn,1,2];
arr[0]();//this指向当前数组
 
//obj对象里
console.log("作为对象(object对象)进行调用:");
var obj = {
    fn:fn
};
obj.fn();//this指向object对象
</script>

结果：
在这里插入图片描述

15.严格模式下的this指向

在script标签最上面加上 ‘use strict’;，加上’use strict’后预解析已经不能使用，会报错。

严格模式下的function指向问题：在严格模式下，function如果不是作为对象的属性和方法被调用（即直接调用方法）就指向undefined。

<script>
'use strict';
function fn(){
    console.log(this);
};
console.log("严格模式下，函数直接被调用（没有通过函数的属性或方法被调用，this就指向undefined）:");
//严格模式下，函数直接被调用（没有通过函数的属性或方法被调用，this就指向undefined）
fn();
 
//通过函数的属性或方法被调用，就指向被调用的对象
console.log("通过函数的属性或方法被调用，就指向被调用的对象:");
document.onclick = fn;
document.onclick();
 
</script>

结果：
在这里插入图片描述

16.this指向的修改

16.1 function.call()

  1. function.call(this指向谁，参数1，参数2…)调用函数，并修改函数中的this指向；
  2. 执行函数的call方法，会调用该函数，并且修改函数中 的this指向；
  3. call中的第0个参数，代表当前函数执行时，函数中的this指向谁
  4. 其他参数都是给函数传的实参
  5. 注意修改执行为body时，一定要使用document.body
<script>
function fn(a,b){
    console.log(this,a,b);
}
//直接执行，this指向window
console.log("直接调用函数，this指向window:");
fn(1,2);//window
 
//通过call更改当前函数的this指向
//更改this指向为document
console.log("调用函数的call方法,更改this指向document:");
fn.call(document,'a','b');//document 
 
//更改this指向为document.body
console.log("调用函数的call方法,更改this指向document.body:");
fn.call(document.body,'a','b');//body
 
</script>

结果：
在这里插入图片描述

16.2 function.apply()

  1. function.apply(this指向谁，[参数1，参数2…])调用函数，并修改函数中的this指向
  2. 指向函数的apply方法，会调用该函数，并且修改函数中的this指向；
  3. apply中的第0个参数，代表当前执行时，函数中的this指向谁；
  4. apply中第1个参数是个数组，数组中代表了我们要往函数中传递的参数；且所有参数只能放在一个数组里，有多个数组时，除了第一个，其他数值的参数不会被接收
  5. apply和call唯一的区别在于，call方法直接在方法里传参，而apply是将所有参数已数组形式进行传递；
  6. 注意修改执行为body时，一定要使用document.body
<script>
function fn(a,b){
    console.log(this,a,b);
}
//直接调用，this指向window
console.log("直接调用，this指向window:");
fn('s','r');
 
//调用函数的apply方法,更改this指向为document
console.log("调用函数的apply方法,更改this指向document:");
fn.apply(document,['2','4']);
 
//调用函数的apply方法,更改this指向document.body
console.log("调用函数的apply方法,更改this指向document.body:");
fn.apply(document.body,['2','4']);
</script>

结果：
在这里插入图片描述

16.3 function.bind()

  1. function.bind(指向，参数1，参数2,…)绑定this指向
  2. 调用函数的bind方法，会返回一个绑定了this执行的新函数；
  3. 第0个参数是bind返回的新函数的this指向
  4. 返回新函数的this指向被绑定了，不能再被更改
  5. 新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改

总结：调用函数的bind方法，会生成新的函数，绑定的this指向是针对新函数的，新函数this指向被绑定后，不能再继续被绑定（call和apply也不行）；如果调用时再传入新的参数，会将新的参数和被绑定的参数进行合并，被绑定的参数会一直存在；而原函数的this指向一直没有变，还可以继续调用bind方法，生成新的函数，同时给新的函数绑定新的this指向

<script>
function fn(a,b){
    console.log(this,arguments);
}
//直接调用函数，this指向window
console.log("直接调用函数，this指向window:");
fn(1,2);//window
 
//使用函数的bind方法
console.log("使用函数的bind方法，返回新的函数:");
var fn2 = fn.bind(document,3,4);
console.log(fn2 == fn);//false 新函数和旧函数不是同一个
 
console.log("原函数的this指向:");
fn(5,6);//原函数的this指向不变，依然是window，且还可以继续调用bind方法
 
console.log("新的函数的this指向:");
console.log("如果新的函数调用时传入新的参数，会将绑定的参数和新传入的参数进行合并:");
fn2(7,8);//3,4,7,8  新函数的this指向即原函数绑定的this指向
 
//新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改,且被绑定的参数也不能再被修改
//只是如果调用新函数时传入新参数，会合并两次的参数
console.log("新函数的this指向再修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改:");
fn2.call(window,9,0);//这里即使再次更改this指向，fn2新函数的this指向永远不会再改变
 
//再次调用fn的bind方法
console.log("再次调用fn的bind方法，返回新的函数:");
var fn3 = fn.bind(document.body,'a','b');
console.log(fn3 == fn);
fn3('c','d');
</script>

结果：
在这里插入图片描述

16.4 bind方法原理分析：

为什么调用bind生成的新函数，this指向被绑定后就不能再绑定了？bind方法在ES5.1后才出来，如果想实现此功能，可以自己写可以再次绑定的bind方法。

自己实现bind方法：

参数：fn 要绑定this函数；_this返回新函数this指向谁

<script>
//为什么调用bind生成的新函数，this指向被绑定后就不能再绑定了
//自己实现bind方法的原理
//fn要绑定的新函数，_this给新函数绑定的this指向，...arg传参（展开运算符ES6新增）
function bind(fn,_this,...arg){
    return function(...args2){
        fn.call(_this,...arg,...args2);
    };
}
 
function fn(){
    console.log(this,arguments);
}
//调用bind方法，返回新的函数function(){ fn.call(_this); };
var fn2 = bind(fn,document,11);
//执行fn2()即执行返回的新函数，并给新的函数绑定this指向
fn2(2,3);//document
fn();
 
//重新调用绑定函数，并返回新的函数同时给其绑定this执行
var fn3 = bind(fn,document.body,12);
fn3(4,5);//this
</script>

结果：
在这里插入图片描述

不停止的程序
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript函数详解
10-24
JavaScript函数是编程语言的核心组成部分，它允许我们组织代码并实现可重用的逻辑。本文将深入探讨JavaScript函数的定义、四种调用模式以及`apply`和`call`的区别。 首先，我们来理解函数的定义。在JavaScript中，...
JS 06——function(）函数、函数里的形参和实参、return 返回值与return返回、形参也是可以设置默认值的、认识变量作用域、变量提升
weixin_48796690的博客
10-23 1340
function(）函数、函数里的形参和实参、return 返回值与return返回、形参也是可以设置默认值的、认识变量作用域、变量提升
JS 函数（function）的定义和使用
qq_73778722的博客
02-22 649
JS 函数声明需要以 function 关键字开头，之后为要创建的函数名称，function 关键字与函数名称之间使用空格分开，函数名之后为一个括号( )，括号中用来定义函数中要使用的参数（多个参数之间使用逗号,分隔开），一个函数最多可以有 255 个参数，最后为一个花括号{ }，花括号中用来定义函数的函数体（即实现函数的代码）除了使用内置函数外，我们也可以自行创建函数（自定义函数），然后在需要的地方调用这个函数，这样不仅可以避免编写重复的代码，还有利于代码的后期维护。1. JS 定义函数。
2021-06-14
liyujiederizhi的博客
06-14 306
制作手风琴，遮罩层，canvas效果 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/index.css"/> <script src="./js/jq.mini.js">&l
解释一下下面一组代码每个代码的含义吧！代码是：a = function(e) { for (var t = "", n = 0; n < e; n++) t += o(16 * Math.random...
weixin_35751412的博客
01-19 135
这段代码实现了生成 UUID (通用唯一识别码) 的功能。 a = function(e) { ... } 定义了一个名为 a 的函数，该函数的参数是 e。在函数体内，它会循环 e 次，每次都调用另一个函数 o(16 * Math.random())，并将返回值拼接起来，最终返回 s(t, e)。 s = function(e, t) { ... } 定义了一个名为 s 的函数，该函数的参数是 ...
有道翻译js逆向+GUI
qq_59970317的博客
09-30 639
学完js逆向之后， 重新修改了原有的py文件， 发表记录一下<(￣︶￣)↗[GO!] 第一步， 设置GUI界面 class App(object): def __init__(self): self.root = Tk() self.root.title(u'有道翻译') self.win() self.Button_func() self.root.mainloop() ...
Javascript 构造函数详解
10-25
1. **new关键字**：务必在调用构造函数时使用`new`关键字，否则`this`将会指向全局对象（在浏览器环境中是`window`，在Node.js环境中是`global`），可能导致意料之外的结果。通常，构造函数的名称会遵循驼峰命名法，...
JavaScript函数基础详解
10-20
JavaScript函数是编程语言中的核心概念，它是一段可重复执行的代码，用于实现特定功能。在JavaScript中，函数是第一类对象，这意味着它们可以作为变量存储、作为参数传递给其他函数，甚至可以作为其他函数的返回值。...
JS逆向 webpack解密
lmttlw的博客
11-18 3729
JS webpack解密 ，这个网站很坑，那个验证字段搜不到，XHR断点也断不到，就很奇怪，不过竟然我敢写这篇文章，就代表我是过了的。
JavaScript函数详解零基础入门（通俗易懂篇）
最新发布
WLK654321的博客
04-13 797
为什么会有函数？ 在写代码的时候，有一些常用的代码需要书写很多次，如果直接复制粘贴的话，会造成大量的代码冗余； 函数可以封装一段重复的javascript代码，它只需要声明一次，就可以多次调用；
js函数详解
weixin_44992737的博客
06-13 169
JavaScript函数，函数返回值，函数参数，自执行函数
请教一下这段代码如何理解
ToJieer的博客
03-13 315
function e(e, t, o) { return t in e ? Object.defineProperty(e, t, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = o, e; }
javascript（七）数字函数
qq_38904347的博客
09-09 693
数字函数 1、parseInt (“字符串”)：将字符串转换为整型数字 var str = "-632147"; var num = 100; var t = parseInt(str); var type = typeof(t); document.write(type); 2、parseFloat(“字符串”)：将字符串转换为浮点型数字 var str = "0.356"; var...
轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码
热门推荐
周十一的技术博客
05-22 3万+
这里解码百度访问统计代码构造函数为示例: 百度访问统计代码JavaScript源码: 红色加粗部分将是要修改的地方. eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[
js里function前面加!
行成于思毁于随
09-11 1万+
我们都知道，函数的声明方式有这两种function fnA(){alert('msg');}//声明式定义函数 var fnB = function(){alert('msg');}//函数赋值表达式定义函数函数的调用方式通常是FunctionName()但是，如果我们尝试为一个“定义函数”末尾加上()，解析器是无法理解的。function msg(){ alert('message'); }(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值