JS高级第三天

最新推荐文章于 2024-07-12 09:36:48 发布

狗都不干机械

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量123

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/I_love_bc/article/details/116520132

版权

JS高级第三天

1.函数的定义和调用

1.1函数的定义方式

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

var fn = new Function('参数1', '参数2'..., ' 函数体')

●Function 里面参数都必须是字符串格式
●第三种方式执行效率低,也不方便书写,因此较少使用
●所有函数都是Function的实例(对象)
●函数也属于对象

1.2函数的调用方式

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

// 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);  //这个函数是定时器自动1秒钟调用一次
        // 6. 立即执行函数
        (function() {
            console.log('内容');
        })();
        // 立即执行函数是自动调用

二. this

2.1函数内this的指向

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

2.2改变函数内部this指向

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

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

2. apply方法
apply()方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。

fun.apply(thisArg,[argsArray])

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

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

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

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

2.3 call apply bind 总结

相同点:
都可以改变函数内部的this指向.

区别点:

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

主要应用场景:

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

3.严格模式

3.1什么是严格模式

JavaScript除了提供正常模式外,还提供了严格模式( strictmode )。ES5 的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格的条件下运行JS代码。

严格模式在IE10以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。

严格模式对正常的JavaScript语义做了一些更改:

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

3.2开启严格模式

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

（1）为脚本开启严格模式
为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"usestrict" ; ( 或’usestrict’ ; ) 。

（2）为函数开启严格模式
要给某个函数开启严格模式,需要把“use strict" ; (或’use strict’; ) 声明放在函数体所有语句之前。

3.3严格模式中的变化

①在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,量都必须先用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') }
</script>

<script>
function fn() {
	return function() {}
}
fn() ;
</script>

此时fn就是一个高阶函数;
函数也是一种数据类型 ,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。

5.闭包

5.1变量作用域

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

5.2什么是闭包

闭包( closure )指有权访问另一个函数作用域中变量的函数。----- JavaScript高级程序设计
简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。

5.3闭包的主要作用

延伸了变量的作用范围

七.案例

1.利用闭包计算打车价格

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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));
        console.log(car.yd(false))
    </script>
</body>
</html>

狗都不干机械

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS高级第三天

JS高级第三天1.函数的定义和调用1.1函数的定义方式函数声明方式function关键字(命名函数)函数表达式(匿名函数)new Function()var fn = new Function('参数1', '参数2'..., ' 函数体')●Function 里面参数都必须是字符串格式●第三种方式执行效率低,也不方便书写,因此较少使用●所有函数都是Function的实例(对象)●函数也属于对象...
复制链接

扫一扫