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

最新推荐文章于 2024-10-15 10:20:47 发布

Star Universe

最新推荐文章于 2024-10-15 10:20:47 发布

阅读量354

点赞数 8

分类专栏：星星的学习历程文章标签：学习 javascript 前端经验分享开发语言 chrome

本文链接：https://blog.csdn.net/m0_60623820/article/details/141951433

版权

星星的学习历程专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前言

本篇主要讲述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);

简便实现方法：