函数进阶

最新推荐文章于 2024-07-16 16:43:05 发布

Rome_z

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量407

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Rome_z/article/details/121712031

版权

函数的定义和调用

函数的定义方式 ( 3-01 )

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

    function func() { }; //函数声明方式function 关键字(命名函数)
    var fun = function () { }; //函数表达式(匿名函数)

    //new Function() (构造函数)
    //var fn = new Function('参数1','参数2'...,'函数体')
    var fn = new Function('a', 'b', 'console.log(a+b)');
    fn(1, 2) //3

第三种方式执行效率低，也不方便书写，因此较少使用

函数本身就是对象，所有函数都是new Function的实例

函数的调用方法 (3-02)

    // 1.普通函数
    function fn() {
        console.log('aaa');
    }
    fn();
    fn.call();

    // 2.对象的方法
    var obj = {
        sayHi: function () {
            console.log("hi");
        }
    }
    obj.sayHi();

    // 3.构造函数
    function Star() { };
    new Star();

    // 4.绑定事件函数
    btn.onclick = function () { };//点击按钮就能调用

    // 5.定时器函数
    setTimeout(function () { }, 1000);
    setInterval(function () { }, 1000);

    // 6.立即执行函数
    (function () {
        console.log("hello world");
    })();

函数内 this 的指向 (3-03)

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

改变函数内部 this 指向 ( 3-04~06+案例 )

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

call 方法

call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this 指向。
fun.call(thisArg, arg1, arg2, ...)

apply 方法

apply() 方法调用一个函数。简单理解为调用函数的方法，但是它可以改变函数的 this 指向
fun.apply(thisArg, [argsArray])

thisArg: 在fun函数运行时指定的this值

argsArray: 传递的值，必须包含在数组里面

传递数组过程中会把数组转化成数组中的数据格式
返回就是函数的返回值，因为他就是调用函数

    var arr = [1, 2, 3, 45, 56, 4, 34, 3]
    var max = Math.max.apply(Math, arr)
    console.log(max);//56

bind 方法

bind() 方法不会调用函数，但是能改变函数内部this指向
fun.bind(thisArg, arg1, arg2, ...)

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

常用情景：有的函数不想立即调用，又想改变函数内部的this指向

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');

        btn.addEventListener('click', function () {
            this.disabled = true;

            setTimeout(function () {
                this.disabled = false; //this本该指向window
            }.bind(btn), 3000)  //此处bind改变this指向，使this指向btn
        })
    </script>
</body>

严格模式

什么是严格模式 ( 3-07~08 )

JavaScript除了提供正常模式外，还提供了严格模式(strict mode)。 ES5的严格模式是采用具有限制性

JavaScript变体的一种方法，即在严格的条件下运行js代码

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

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

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

开启严格模式

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

// 1. 为脚本开启严格模式
// (1) 为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句 "use strict";(或'use strict';).
	<script>
        "use strict";
        console.log("这是严格模式。");
	</script>   
// 因为 "use strict" 加了引号，所以老版本的浏览器会把它当作一行字符串而忽略。

// (2) 有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，
// 所以可以将整个脚本文件放在立即执行的匿名函数之中，这样独立创建一个作用域而不影响其他 script脚本文件。
   <script>
        (function(){
            "use strict";
            var num = 10;
            function fn(){}
        })();
    </script>

//2. 为函数开启严格模式
//要给某个函数开启严格模式，需要把 "use strict"; (或'use strict';) 声明放在函数体所有语句之前。
        function fn1() {
            'use strict'
            console.log('严格模式函数');
        }

        function fn2() {
            console.log('非严格模式函数');
        }

严格模式中的变化

变量规定

(1) 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用 var 命令声明，然后再使用。
(2) 严禁删除已经声明的变量。列如，delete x; 语法是错误的

严格模式下 this 指向问题

(1) 以前在全局作用域函数中的 this 指向 window 对象。
(2) 严格模式下全局作用域中函数中的this 是 undefined
(3) 以前构造函数时不加new也可以调用普通函数，this指向全局对象
(4) 严格模式下，如果构造函数不加new调用，this 会报错.
(5) new 实例化的构造函数指向创建的对象实例。
(6) 定时器 this 还是指向 window
(7) 事件、对象还是指向调用者

函数变化

(1) 函数不能有重名的参数。
(2) 函数必须声明在顶级，新版本的 JavaScript会引入 “块级作用域” ( ES6 中已引入)。为了与新版本接轨，不允许在非函数的代码块内声明函数。
更多严格模式要求参考：MDN

网址：https://developer.mozilla.org/zhCN/docs/Web/javaScript/Reference/Strict_mode

高阶函数

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

//函数作为参数
function fn(callback){                  
     callback&&callback();                   
}                                       
fn(function(){alert('hi')})                       

//函数作为返回值
function fn(){
    return function(){}
}
fn();

闭包

闭包(closure) 指有权访问另一个函数作用域中变量的函数。 — JavaScript高级程序设计

简单理解就是，一个作用域可以访问另外一个函数内部的局部变量

闭包的性质和Go中的基本相同。

浅拷贝和深拷贝 (3-20~21)

和Go中不太相同，对象中可以嵌套对象，知识单纯拷贝一层，内层嵌套的对象还是拷贝的地址

深拷贝拷贝多层，每一级别的数据都会拷贝。

ES6提供了语法糖：

Object.assign(obj2, obj1); 浅拷贝

深拷贝没有内置的函数，自己写一个

        function deepCopy(newObj, oldObj) {
            for (var k in oldObj) {
                var item = oldObj[k];
                if (item instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], item);
                } else if (item instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], item);
                } else {
                    newObj[k] = item;
                }

            }
        }

Rome_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数进阶

函数的定义方式 ( 3-01 )函数声明方式function 关键字(命名函数) 函数表达式(匿名函数) new Function() (构造函数) function func() { }; //函数声明方式function 关键字(命名函数) var fun = function () { }; //函数表达式(匿名函数) var fn = new Function('console.log(123)');//new Function() (构造函数）函数的调用方法 (
复制链接

扫一扫