【JavaScript系列八】—讲述JS学习历程的知识分享！

前言

本篇主要讲述JS中较为重要的一环，函数的用法，深拷贝和浅拷贝的概念和区别，闭包和递归，包括一些案例：例如递归实现斐波那契数列，求阶乘等等

一、关于函数

定义函数的方式

• function关键字
• 函数表达式（匿名函数）var fn = function(){}
• new function（）

函数的调用及其this指向

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

改变this指向的方法

• call

可以调用函数，也可以改变 this 指向。多用于构造函数的属性继承

• apply

Math.max.apply(Math, [3,1,2])

• bind

特点：不会直接调用函数

严格模式

• 消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为

• 消除代码运行的一些不安全之处，保证代码运行的安全

• 提高编译器效率，增加运行速度

• 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名

如何开启严格模式

• 脚本开启严格模式

<script>
  　"use strict"; //当前script标签开启了严格模式
</script>

• 函数开启严格模式

function fn(){
　　"use strict";
　　return "123";
}

开启严格模式后的某些变化

• 严格模式下使用未声明的变量会报错
• 严格模式下不允许删除变量
• 严格模式下全局作用域下的this指向是undefined
• 严格模式下函数中的参数名不能重复
• 严格模式下if语句和for语句下不允许声明函数

高阶函数

将函数作为参数或者返回值的函数

二、闭包

闭包是指一个函数访问了另一个函数作用域中变量的函数

闭包的作用

延伸变量的使用范围

function fn() {
    var num = 10;
    function fun() {
        console.log(num);
    }
    return fun;
}
var f = fn();
f();

闭包案例

计算打车的价格：

需求分析
    打车起步价13(3公里内), 之后每多一公里增加5块钱。用户输入公里数就可以计算打车价格
    如果有拥堵情况,总价格多收取10块钱拥堵费

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

三、递归

函数内部自己调用自己, 这个函数就是递归函数

案例一：利用递归求1~n的阶乘

function fn(n) {
    if (n == 1) { //结束条件
        return 1;
    }
    return n * fn(n - 1);
}
console.log(fn(3));

案例二：利用递归求斐波那契数列

// 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
// 输入一个数字 n 就可以求出这个数字对应的兔子序列值
// 我们只需要知道输入的n的前面两项(n-1 n-2)就可以计算出n对应的序列值
function fb(n) {
    if (n === 1 || n === 2) {
        return 1;
    }
    return fb(n - 1) + fb(n - 2);
}
console.log(fb(3));

四、深拷贝和浅拷贝

• 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
• 深拷贝拷贝多层，每一级别的数据都会拷贝

浅拷贝


var obj1 = {
    name: 'ifer',
    age: 18,
    sex: '男'
};
var obj2 = {};
for(var key in obj1) {
    obj2[key] = obj1[key];
}
console.log(obj2);

深拷贝



var obj1 = {
    name: 'ifer',
    age: 18,
    sex: '男',
    test: {
        xxx: 'xxx',
        yyy: 'yyy'
    }
};
var obj2 = {};

// o1 => origin, o2 => new
function deepCopy(o1, o2) {
    for(var key in o1) {
        // 注意顺序要先判断 Array，如果先判断 Object，那 [] 也是 Object，就区分不出是 {} 还是 [] 了
        if(o1[key] instanceof Array) {
            // 如果 key 对应的value是 Array，[]
            o2[key] = [];
            deepCopy(o1[key], o2[key]);
        } else if(o1[key] instanceof Object) {
            // 如果 key 对应的value是 Object，{}
            o2[key] = {};
            deepCopy(o1[key], o2[key]);
        } else {
            o2[key] = o1[key];
        }
    }
}

deepCopy(obj1, obj2);
obj1.test.xxx = 'fffff';
console.log(obj2.test.xxx);

简便实现方法：

• 浅拷贝：Object.assign(obj1，obj2)

把obj2拷贝给obj1

• 深拷贝：JSON.stringify和JSON.parse

还可以自己封装一个深拷贝的函数，有兴趣的可以自己试试噢~        私信我获取深拷贝封装函数

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！