JavaScript高级（2）——js函数进阶

最新推荐文章于 2025-03-17 10:58:45 发布

iiiiiill

最新推荐文章于 2025-03-17 10:58:45 发布

阅读量652

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44738381/article/details/107765147

版权

函数进阶

学习目标

能够说出函数的多种定义和调用方式
能够说出和改变函数内部的this指向
能够说出严格模式的特点
能够把函数作为参数和返回值传递
能够说出闭包的作用
能够说出递归的两个条件
能够说出深拷贝和浅拷贝的区别

函数的定义和调用
this
严格模式
高阶函数
闭包
递归

函数的定义和调用

函数的定义方式

函数声明方式function关键字（命名函数）
函数表达式（匿名函数）
new Function()

举例第三种：
第三种里面的 Function是构造函数，必须是字符串形式

// 3. 利用 new Function('参数1','参数2', '函数体');
var f = new Function('a', 'b', 'console.log(a+b)');
f(1, 2);

这种创建方式的缺点：
1.容易写的很长 2.执行效率低

函数的调用方式

普通函数
对象的方法
构造函数
绑定事件函数
定时器函数
立即执行函数

<script>
    // 函数的调用方式


    // 1. 普通函数
    function fn() {
        console.log('666');
    }
    fn();// 调用方式1
    fn.call() // 调用方式2 
    // 2. 对象的方法
    var o = {
        sayHi: function () {
            console.log('666');
        }
    }
    o.sayHi();// 对象.方法  的形式调用
    // 3. 构造函数
    function Star() { };
    var pdd = new Star();
    // new一下构造函数就调用了函数
    // 4. 绑定事件函数
    btn.onclick = function () { };//点击按钮就可以调用
    // 5. 定时器函数
    setInterval(function () { }, 1000)
        // 定时器每1s调用一次函数
        // 6. 立即执行函数
        (function () {
            console.log('666');
        })();
        // 立即执行函数是自动调用
</script>

this

函数内 this 的指向

在这里插入图片描述

<button>dianji</button>
<script>
    // 函数的不同调用方式决定了this的指向不同


    // 1. 普通函数 this指向window
    function fn() {
        console.log('普通函数的this' + this);
    }
    window.fn(); // [object Window]

    // 2. 对象的方法 this指向的是对象o
    var o = {
        sayHi: function () {
            console.log('对象方法的this' + this);
        }
    }
    o.sayHi();// [object Object]

    // 3. 构造函数里的this 指向 pdd这个实例对象；原型对象里面的this 指向的也是pdd这个实例对象
    function Star() { };
    Star.prototype.sing = function () { }
    var pdd = new Star();

    // 4. 绑定事件函数 this指向的是函数的调用者：btn这个按钮对象
    var btn = document.querySelector('button');
    btn.onclick = function () {
        console.log('绑定事件函数的this' + this); // [object HTMLButtonElement] 指向的是btn
    };

    // 5. 定时器函数 this指向的也是window
    setTimeout(function () {
        console.log('定时器的this' + this); // [object Window] 指向的也是window
    }, 1000)

    // 6. 立即执行函数里的this还是指向window
    (function () {
        console.log('立即执行函数里的this' + this);
    })();
</script>

改变函数内部 this 指向

JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部的this指向问题，常有的方法有bind()、call()、apply()三种方法。

call()方法

call()方法调用一个对象。简单理解为调用函数的方式外还可以改变函数的this指向

fun.call(thisArg, arg1, arg2, ...)

// 改变函数内this指向 js提供了三种方法 call() apply() bind()


// 1.call()
var o = {
    name: 'andy'
}
function fn(a, b) {
    console.log(this);
    console.log(a + b);
};
fn.call(o, 1, 2); //{name: "andy"} 指向变为了o


// call可以调用函数 第二个可以改变函数内的this指向
// call的主要作用可以实现继承
function Father(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}
function Son(uname, age, sex) {
    Father.call(this, uname, age, sex);
}
var son = new Son('pdd', 18, 'male');
console.log(son);

apply()方法

apply()方法调用一个函数。简单理解为调用函数的方式外还可以改变函数的this指向。

fun.apply(thisArg, [argsArray])

thisArg: 在fun函数运行的时候指定的this值
argsArray: 传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数

<script>
    // 改变函数内this指向 js提供了三种方法 call() apply() bind()


    // apply() 是应用 运用的意思
    var o = {
        name: 'andy'
    };
    function fn(arr, arr1, arr2, arr3) {
        console.log(this);
        console.log(arr, arr1, arr2, arr3); // 打印的是字符串不是数组
    };
    fn.apply(o, [1, 2, 3, 4]);
    // 1.也是调用函数 第二个：可以改变函数内部的this指向
    // 2.但是他的参数必须是数组（伪数组）


    // 3.apply 的主要应用 比如说我们可以利用apply 借助于数学内置对象求最大或者最小值
    var arr = [1, 6, 3, 77, 4];
    // 不需要改变this对象
    // this指回Math对象
    console.log(Math.max.apply(Math, arr));
</script>

bind()方法

最大特点：不会调用函数
bind()方法不会调用函数。但是能改变函数内部this指向

fun.bind(thisArg, arg1, arg2, ...)

thisArg: 在fun函数运行的时候指定的this值
arg1，arg2:传递的其他参数
返回由指定的this 值和初始化参数改造的原函数拷贝

// 3.bind() 绑定方法
var o = {
    name: 'andy'
};
function fn(a, b) {
    console.log(this);
    console.log(a + b);
}
// 只绑定不调用
var f = fn.bind(o, 1, 2);
f(); // {name: "andy"}
// 1.不会调用原来的函数 可以改变原来函数内部的this指向
// 2.返回的是原来函数改变this之后产生的新函数

一个小例子

<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>

<script>
    // 用的最多：
    // 如果有的函数我们不需要立即调用，但是又想改变内部的this指向，此时用this是最方便的
    // 4.比如我们有一个按钮，当我们点击了之后就禁用这个按钮，3秒之后开启这个按钮


    // 以前的方法：


    var btn = document.querySelector('button');
    var that;
    btn.onclick = function () {
        that = this;
        this.disabled = true; // 这个this指向的是btn
        setTimeout(function () {
            that.disabled = false; //若这里是this，指向的是window
        }, 3000)
    }


    //bind方法


    var btn = document.querySelector('button');
    btn.onclick = function () {
        this.disabled = true; // 这个this指向的是btn
        setTimeout(function () {
            this.disabled = false; //若这里是this，指向的是window
        }.bind(this), 3000)
        // 写在后面 bind(this) == bind(btn) 写this可以解耦
    }



    // 若有多个btn
    var btns = document.querySelectorAll('button');
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            this.disabled = true;
            setTimeout(function () {
                this.disabled = false;
            }.bind(this), 2000);
        }
    }

// 在ES6中，可以使用箭头函数来代替这种写法，因其this指向不同于传统写法
</script>

call apply bind总结

相同点：
都可以改变函数内部的this指向
区别点：

call和apply 会调用函数，并且改变函数内部this指向
call和apply传递的参数不一样，call传递参数aru1，aru2…形式 apply必须数组形式[arg]
bind 不会调用函数，可以改变函数内部的this指向

主要应用场景：
1.call经常做继承
2.apply经常跟数组有关系，比如借助于数学对象实现数组最大最小值
3.bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

严格模式

什么是严格模式

JavaScript除了提供正常模式外，还提供了严格模式（strict mode），ES5的严格模式是采用具有限制性JavaScript变体对的一种方式，即在严格的条件下运行的JS代码。
严格模式在IE10以上的版本的浏览器中才会被支持，旧版本浏览器中会被忽略。
严格模式对正常的JavaScript语义做了一些更改：

消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全。
提高编译器效率，增加运行速度。
禁用了在ECMAScript的未来版本中会定义一些语法，为未来新版本的JavaScript做好铺垫。比如一些保留字：class，enum，export，extends，import，super 不能做变量名

开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

为脚本开启严格模式

为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句 “use strict”（或’use strict’；）

有的script脚本是严格模式，有的script脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样可以独立创建一个作用域而不影响其他script脚本文件。

<!-- 为整个脚本(script标签)开启严格模式 -->
<script>
    'use strict';
    // 下面js代码就会按照严格模式执行代码
</script>
<script>
    (function () {
        'use strict';
    })();
</script>

为函数开启严格模式

<!-- 为某个函数开启严格模式 -->
<script>
    // 此时只是给fn函数开启严格模式
    function fn() {
        'use strict';
        // 下面的代码按照严格模式执行
    }
    function fun() {
        // 里面的还是按照普通模式执行
    }
</script>

严格模式中的变化

严格模式对javascript的语法和行为，都做了一些改变

变量规定

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式就禁止使用这种用法，变量必须先用var 命令声明，然后再使用。

'use strict';
num = 10;
console.log(num);// 报错，因为在严格模式下，必须先声明才能调用

严禁删除已经声明的变量。例如，delete x;语法是错误的

'use strict';
// 2.我们不能随意删除已经声明好的变量
var num = 10;
console.log(num);
delete num;

严格模式下this指向问题

以前在全局作用域函数中的this 指向window对象
在严格模式下全局作用域中函数中的this指向的是undefined

'use strict';
function fn() {
    console.log(this);
}
fn(); //严格模式下打印的this是undefined

以前构造函数时不加new也可以调用，当普通函数，this指向全局对象
严格模式下，如果构造函数不加new调用，this会报错
new实例化的构造函数指向创建的对象实例。

'use strict';
// 4.严格模式下，如果 构造函数不加new调用，this会报错
function Star() {
    this.sex = 'male';
}
Star();

定时器this还是指向window
事件、对象还是指向调用者

// 5. 定时器 this 还是指向 window
setTimeout(function () {
    console.log(this);// window
}, 2000)

函数变化

函数不能有重名的参数

'use strict';
// 6.严格模式下函数里面的参数不允许有重名
function fn(a, a) {
    console.log(a + a); 
};
fn(1, 2); //未加严格模式是为4

函数必须声明在顶层，新版本的JavaScript会引入“块级作用域”（ES6中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数。

在这里插入图片描述

高阶函数

高阶函数时对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。

e.g.

function fn(callback){
	callback&&callback();
}
fn(function(){alert('hi')})

function fn(){
	return function(){}
}
fn();

在这两个函数中的fn就是高阶函数。
函数也可以作为一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。

// 高阶函数-函数可以作为参数传递
function fn(a, b, callback) {
    console.log(a + b);
    callback && callback();
}
fn(1, 2, function () {
    console.log('wo shi zuihou diaoyong de ');
});
// 高阶函数的应用
$("div").animate({ left: 500 }, function () {
    $("div").css("backgroundColor", "purple")
})

闭包

变量作用域

变量根据作用域的不同分为两种：全局变量和局部变量

函数内部可以使用全局变量
函数外部不可以使用局部变量
当函数执行完毕，本作用域内的局部变量会销毁

什么是闭包

闭包（closure）指有权访问另一个作用域中变量的函数。
首先：闭包是函数
简单理解：一个作用域（全局/局部）可以访问另一个函数内部的局部变量，变量所在的函数就可以理解为闭包

<script>
    // 闭包（closure）指有权访问另一个作用域中变量的函数
    // 闭包：我们fun这个函数作用域 访问了另一个函数 fn里面的局部变量 num
    function fn() {
        var num = 10;
        function fun() {
            console.log(num);
        }
        return fun
    }
    var f = fn();
    f(); // 10
</script>

闭包的作用

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

<script>
    // 闭包（closure）指有权访问另一个作用域中变量的函数
    // 闭包：我们fun这个函数作用域 访问了另一个函数 fn里面的局部变量 num
    function fn() {
        var num = 10;
        // function fun() {
        //     console.log(num);
        // }
        // return fun; //将fun();改为
        // 相当于：
        // 返回匿名函数，这也是高阶函数的一种形式
        return function () {
            console.log(num);
        }
    }
    var f = fn(); // num = 10
    f();
    // fn()();
    //我们fn外面的作用域可以访问fn内部的局部变量

    // 类似于
    // var f = function fun() {
    //     console.log(num);
    // }

    // 因此，闭包的主要作用：延伸了变量的作用范围
</script>

闭包的案例

1.循环注册点击事件
闭包并不一定比正常书写效率高，更有可能会产生内存泄漏现象

<script>
    // 闭包应用-点击li输出当前li的索引号


    // 1.我们可以利用动态添加属性的方式
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function () {
            console.log(this.index);
        }
    }


    //2.利用闭包的方式得到当前小li 的索引号
    for (var i = 0; i < lis.length; i++) {
        // 利用for循环创建了4个立即执行函数
        // 立即执行函数也被称为小闭包，因为立即执行函数里面任何一个函数都可以使用i这个变量
        (function (i) {
            lis[i].onclick = function () {
                console.log(i);
            }
        })(i)
    }
</script>

2.循环中的setTimeout()

<ul class="nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    // 闭包应用-3秒钟之后，打印所有li元素的内容
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            setTimeout(function () {
                console.log(lis[i].innerHTML);
            }, 3000)
        })(i)
    }
</script>

3.计算打车价格

// 闭包应用-计算打车价格
// 打车起步价13（3公里内），之后每多一公里增加5块钱，用户输入公里数就可以计算打车价格
//如果有拥堵情况，总价格多收取10块钱拥堵费
var taxi = (function () {
    var start = 13;//起步价
    var total = 0; // 总价
    return {
        price: function (n) {
            if (n <= 3) {
                total = start;
            } else {
                total = start + (n - 3) * 5;
            }
            return total;
        }, //正常的总价
        crowded: function (flag) {
            return flag ? total + 10 : total;
        } // 拥堵之后的 费用
    }
})();
console.log(taxi.price(1)); //13
console.log(taxi.crowded(true));//23

两道思考题：
思考题1：

// 思考题 1：
// 没有闭包，因为没有访问局部变量
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            return this.name;
        };
    }
};
console.log(object.getNameFunc()())


// 解析：
var f = object.getNameFunc();
// 类似于
var f = function () {
    return this.name;
};
f();

//相当于
// function() { this } ()
//所以里面的this指向window，window的name属性是"The Window"

思考题2：

// 思考题 2：
//这个有闭包，因为匿名函数访问了getNameFunc里的变量
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this; //这个this指向的是 object
        return function () {
            return that.name;
        };
    }
};
console.log(object.getNameFunc()())

// 解析：
var f = object.getNameFunc();
f = function () {
    return that.name;
};
f();

闭包总结

闭包：一个作用域可以访问到另一个作用域局部变量
作用：延伸变量的作用范围

递归

什么是递归？

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解：函数内部自己调用自己，那么这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return

<script>
    // 递归函数：函数内部自己调用自己，这个函数就是递归函数
    var num = 1;
    function fn() {
        console.log('我要打印6句话');
        if (num == 6) {
            return; // 递归里面必须加退出条件
        }
        num++;
        fn();
    }
    fn();
</script>

浅拷贝和深拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用(如果被拷贝者/拷贝者修改数据，拷贝者/被拷贝者的数据也会相应更改)
在这里插入图片描述

<script>
    // 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用(如果被拷贝者/拷贝者修改数据，拷贝者/被拷贝者的数据也会相应更改)
    // 深拷贝拷贝多层，不仅拷贝内容也拷贝引用地址
    var obj = {
        id: 1,
        name: 'andy',
        msg: {
            age: 18
        }
    };
    var o = {};
    for (var k in obj) {
        // k是属性名，obj[k]是属性值
        // 比如第一次：o.id=obj.id(也就是1)
        // 第二次：o.name = obj.name(也就是'andy')
        // 第三次：o.msg = obj.msg(也就是{age:18})
        o[k] = obj[k];
    }
    console.log(o);// age:20
    o.msg.age = 20; // 修改了o的msg的值，但obj的msg的值发生了变化
    console.log(obj);// age:20
</script>

ES6中新的语法糖：
**语法糖：**计算机语言中添加的某种语法，对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

Object.assign(target, …sources) es6新增的方法可以浅拷贝
修改为：

Object.assign(o, obj);
console.log(o);
o.msg.age = 20;
console.log(obj);

在深拷贝中：
深拷贝是把内存空间里的数据复制了一份给了另一个对象，因此怎么修改都不会互相影响
在这里插入图片描述
手写深拷贝（ES5版本）

<script>
    // 深拷贝拷贝多层，每一级别的数据都会拷贝
    var obj = {
        id: 1,
        name: 'pdd',
        msg: {
            age: 18
        },
        color: ['pink', 'red']
    };
    var o = {};
    // 封装函数
    function deepCopy(newobj, oldobj) {
        for (var k in oldobj) {
            // 判断我们的属性值属于哪种数据类型
            //1.获取属性值 oldobj[k]
            var item = oldobj[k];
            // 2.判断这个值是否是数组(必须先判断数组在判断对象，不然数组就会被认为是对象)
            if (item instanceof Array) {
                newobj[k] = [];
                deepCopy(newobj[k], item);
            }
            if (item instanceof Object) {
                // 3.判断这个值是否是对象
                newobj[k] = {};
                deepCopy(newobj[k], item);
            } else {
                // 4.属于简单数据类型
                newobj[k] = item;
            }
        }
    }
    deepCopy(o, obj);
    console.log(o);
    o.msg.age = 20;
    console.log(obj);//依旧是18
</script>