JavaScript学习9：函数进阶_var obj = { name ‘a‘, age 15, son {name ‘b‘, a

2401_85124163

于 2024-06-10 17:29:51 发布

阅读量65

点赞数 1

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/2401_85124163/article/details/139579482

版权

    console.log(son);


2.apply() 调用函数 改变this指向 参数是数组形式

    //2. apply() 调用函数 改变this指向 参数是数组形式
    var o = {
        name: 'vivian'
    }
    function fn(a, b) {
        console.log(this);
        console.log(a + b);
    }
    fn.apply(o, [1, 2]);
    //apply主要应用 求数组最大值最小值
    var arr = [1, 24, 56, 2];
    var max = Math.max.apply(Math, arr); //相当于去掉了[] 传入的是数字
    console.log(max); //56


3.bind() 不调用函数 改变this指向

    //3. bind() 不调用函数 改变this指向
    var o = {
        name: 'vivian'
    }
    function fn(a, b) {
        console.log(this);
        console.log(a + b);
    }
    var f = fn.bind(o, 1, 2); //返回新函数
    f();
    //bind应用：不想立即调用这个函数，但是又想改变this的指向
    var btn = document.querySelector('button');
    btn.onclick = function () {
        // var that = this;
        this.disabled = true; //禁用按钮 this指向btn
        setTimeout(function () {
            // that.disabled = false;
            this.disabled = false;
        }.bind(this), 3000) //this指向btn
    }


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308233448771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


#### 三、严格模式


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210308233615821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 可以为脚本开启严格模式和为函数开启严格模式


严格模式下：  
 1.变量必须先声明再使用  
 2.不能随意删除已声明变量  
 3.全局作用域下函数中的this不再是windows 而是undefined  
 4.构造函数不加new调用，this会报错  
 5.定时器的this还是指向window  
 6.事件、对象this还是指向调用者  
 7.函数中不能有重名的参数  
 8.函数必须声明在最顶层，不能声明在非函数的代码块（if{} for{} …）  
 9.严格模式不能使用八进制  
 ……


#### 四、高阶函数


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210309073757460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)

<script>
    //高阶函数 函数可以作为参数传递
    function fn(a, b, callback) {
        console.log(a + b);
        callback && callback();
    }
    fn(1, 2, function () {
        console.log('我是最后调用的');
    })
</script>


#### 五、闭包


**闭包是**指有权访问另一个函数作用域中变量的**函数**  
 被访问的变量所在的函数称为闭包

    //闭包
    function fun() {
        var num = 10; //这里的局部变量被另一个函数fun1所访问 fun()是一个闭包
        function fun1() {
            console.log(num);
        }
        fun1();
    }
    fun();

    //闭包 fun是一个闭包 也是一个高阶函数（返回一个函数）
    function fun() {
        var num = 10; //这里的局部变量被另一个函数fun1所访问 fun()是一个闭包
        return function () {
            console.log(num);
        } //

    }
    var f = fun();
    f();


闭包的作用：延伸了变量的作用范围


闭包的应用：  
 1.点击每个li时获得当前li的下标

    //2. 利用闭包的方式得到当前li的下标
    for (var i = 0; i < lis.length; i++) {
        //创建四个立即执行函数
        (function (i) {  //这个立即执行函数是一个闭包
            lis[i].onclick = function () {
                console.log(i);
            }
        })(i)
    }


2.利用闭包在 3秒之后打印所有li的内容

    //利用闭包在 3秒之后打印所有li的内容
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            setTimeout(function () {
                console.log(lis[i].innerHTML);
            }, 3000)
        })(i)
    }


3.打车计费

    var car = (function () { //立即调用 是一个闭包
        var start = 13;
        var total = 0;
        return { //返回两个方法
            price: function (n) { //用到了闭包的变量
                if (n <= 3) {
                    total = start;
                } else {
                    total = start + (n - 3) \* 5;
                }
                return total;
            },
            yongdu: function (flag) {
                return flag ? total + 10 : total;
            }
        }
    })()
    console.log(car.price(5)); //23
    console.log(car.yongdu(true)); //33


#### 六、浅拷贝和深拷贝


浅拷贝  


### 最后

我可以将最近整理的前端面试题分享出来，其中包含**HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法**等等，还在持续整理更新中，希望大家都能找到心仪的工作。


**篇幅有限，仅展示部分截图：**

![](https://img-blog.csdnimg.cn/img_convert/ff6b8e636a356a01389cd2de0211d347.png)

![](https://img-blog.csdnimg.cn/img_convert/b24f32dd81ead796fa80c27c763d262c.png)

![](https://img-blog.csdnimg.cn/img_convert/c6265dc2681708533916a8d7910506b3.png)