函数进阶

最新推荐文章于 2021-10-21 15:44:33 发布

前端笨鸟

最新推荐文章于 2021-10-21 15:44:33 发布

阅读量192

点赞数

分类专栏： js学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41670147/article/details/103558596

版权

js学习笔记专栏收录该内容

24 篇文章 6 订阅

订阅专栏

1.函数的定义和调用

1.1函数的定义方式

1、函数声明方式function关键字（命名函数）

function fun(){};

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

var fun = function() {};

3、利用new Function(‘参数1’,‘参数2’, ‘函数体’)

var f = newFunction('a', 'b', 'console.log(a + b)');
f(1, 2)

● 所有函数都是Function的实例（对象）
● 函数也属于对象

1.2 函数的调用方式

1、普通函数
2、对象的方法
3、构造函数
4、绑定事件函数
5、定时器函数
6、立即执行函数

<!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>Document</title>
</head>

<body>
    <script>
        // 1、普通函数
        function fn() {
            console.log('你好啊！！！');

        }
        // fn();  fn.call();
        // 2、对象的方法
        var o = {
            sayHi: function() {
                console.log('人生的巅峰');

            }
        }
        o.sayHi();
        // 3、构造函数
        function Star() {};
        new Star();
        // 4、绑定事件函数
        btn.onclick = function() {}; //点击按钮即可调用函数
        // 5、定时器函数
        // setInterval(function() {}, 1000);   这个函数是定时器自动一秒钟调用一次
        // 6、立即执行函数
        (function() {
            console.log('人生的巅峰');
        })();
        //立即执行函数是自动调用
    </script>
</body>

</html>

2.this

2.1函数内this的指向

this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同一般指向调用者。

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

2.2改变函数内部this指向

JavaScript专门提供了一些函数方法来帮助更优雅的处理函数内部this的指向问题，常用的有bind()、call()、apply()三种方法。
1、call方法
call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。call的主要作用可以实现继承
2、apply方法
apply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指向

fun.apply(thisArg, [argsArray])

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

<!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>Document</title>
</head>

<body>
    <script>
        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr);
        }
        fn.apply(o, ['pink']);
        //1、也是调用函数 第二个可以改变函数内部的this指向
        //2、但是他的参数必须是数组（伪数组）
        //3、输出字符串而非数组
        //求最大值 Math.max();
        var arr = [1, 66, 3, 99, 4];
        var max = Math.max.apply(Math, arr);
        console.log(max);
        //求数组里面的最小值
        var arr = [1, 66, 3, 99, 4];
        var min = Math.min.apply(Math, arr);
        console.log(min);
    </script>

</body>

</html>

3、bind方法
bind()方法不会调用函数。但是能改变函数内部this指向

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

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

<!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>Document</title>
</head>

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
        var f = fn.bind(o, 1, 2);
        f();
        //1、不会调用原来的函数 可以改变原来函数内部的this指向
        //2、返回的是原函数改变this之后产生的新函数
        //3、如果有的函数不需要立即调用，但是又想改变这个函数内部的this指向此时用bind
        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)

            }
        }
    </script>

</body>

</html>

2.3call、apply、bind总结

相同点：
都可以改变函数内部的this指向
区别点：
1、call和apply会调用函数，并且改变函数内部this指向。
2、call和apply传递的参数不一样，call传递参数aru1,aru2…形式 apply 必须数组形式【arg】
3、bind不会调用函数，可以改变函数内部this指向。
主要应用场景：
1、call经常做继承。
2、apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
3、bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向。

3.严格模式

3.1什么是严格模式

JavaScript除了提供正常模式外，还提供了严格模式。ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行JS代码。
严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略
严格模式对正常的JavaScript予以做了一些更改：
1、消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为。
2、消除代码运行的一些不安全之处，保证代码运行的安全。
3、提高编译器效率，增加运行速度
4、禁用了在ECMAScript的未来版本中可能会定义的一些语法，为未来新版本的JavaScript做好铺垫。比如一些保留字如：class,enum,export,extends,import,super不能做变量名

3.2开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时，可以将严格模式分为为脚本开启严格模式和为函数开启严格模式俩种情况。
1、为脚本开启严格模式
为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句"use strict"；（或’user strict’）。

 <script>
        "use strict";
        console.log("这是严格模式");
    </script>

2、为函数开启严格模式

<script>
        function fn() {
            'use strict';
            //下面的代码按照严格模式执行
        }

        function fun() {
			//里面的还是按照普通模式执行
        }
    </script>

3.3严格模式中的变化

严格模式对JavaScript对的语法和行为，都做了一些改变。
1、变量规定
①在正常模式下，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var 命令声明，然后再使用。
②不能随意删除已经声明好的变量。例如，delete x；语法是错误的。
2、严格模式下this指向问题
① 以前在全局作用域函数中的this指向window对象。
② 严格模式下全局作用域中函数中的this是undefined。
③ 以前构造函数时不加new也可以调用，当普通函数，this指向全局对象
④ 严格模式下，如果构造函数不加new调用，this会报错
⑤ new实例化的构造函数指向创建的对象实例。
⑥ 定时器this还是指向window。
⑦ 事件、对象还是指向调用者。
3、函数变化
① 函数不能有重名的参数
② 函数必须声明在顶层，新版本的JavaScript会引入“块级作用域”（ES6中已引入）。为了与新版本接轨，不允许在非函数的代码块内声明函数。

4.高阶函数

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

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

        function fn() {
            return function() {}
        }
        //此时fn就是一个高阶函数
        //函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。
    </script>

5.闭包

5.1变量作用域

变量根据作用域的不同分为俩种：全局变量和局部变量。
1、函数内部可以使用全局变量
2、函数外部不可以使用局部变量
3、当函数执行完毕，本作用域内的局部变量会销毁。

5.2什么是闭包

闭包（closure）值有权访问另一个函数作用域中变量的函数。
简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。
闭包的主要作用：延伸了变量的作用范围

5.3 闭包的应用

1、循环中注册点击事件
利用闭包的方式得到当前小li的索引号

<script>
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            //利用for循环创建4个立即执行函数
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);

                }
            })(i)
        }
    </script>

2、循环中的setTimeout()。
3秒之后，打印所有li元素的内容

<script>
        var lis = document.querySelector('ul').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);

                }, 3000)
            })(i)
        }
    </script>

3、闭包应用-打车价格

<script>
        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;
                },
                //拥堵后的费用
                yd: function(flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5)); //23
        console.log(car.yd(true)); //33

        console.log(car.price(1)); //13
        console.log(car.yd(false)); //13
    </script>

5.递归

6.1什么是递归

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

<!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>Document</title>
</head>

<body>
    <script>
        //递归函数：函数内部自己调用自己，这个函数就是递归函数
        var num = 1;

        function fn() {
            console.log('打印6句话');
            if (num == 6) {
                return; //递归里面必须加退出条件
            }
            num++;
            fn();

        }
        fn();
    </script>
</body>

</html>

6.2利用递归求数学题
1、求1234…n阶乘

<script>
        //利用递归函数求1~n的阶乘1*2*3*4*..n
        function fn(n) {
            if (n == 1) {
                return 1;
            }
            return n * fn(n - 1);
        }
        console.log(fn(3));
        console.log(fn(10));
    </script>

2、利用递归求斐波那契数列（兔子序列）

function fb(n){
	if(n ===1 || n===2){
	return 1
	};
	return fb(n-1) + fb(n - 2);
}
console.log(fb(3));
console.log(fb(6));

前端笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录