重温前端基础之js

标签: javascript

前言

因为实习比较忙的缘故,而且很多东西平时用不到。感觉又有点生疏了。此次为了准备公司的转正面试。重温js基础。

闭包


你所理解的闭包是什么东西呢?
MDN 对闭包的定义为:

闭包是指那些能够访问自由变量的函数。

那什么是自由变量呢?

自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。

由此,我们可以看出闭包共有两部分组成:

闭包 = 函数 + 函数能够访问的自由变量

假如你和我一样都是俗人,喜欢通俗简单并且不费脑细胞地表达。也可以这样形容闭包:

函数嵌套函数,内部函数可以任意访问外部函数的变量


声明:

有一些摘要引用于他人博客,我喜欢他写的东西
冴羽


function debounce(fn,wait,immediately){
    let timer;
    return function(){
        let context = this,args = arguments;
        timer && clearTimeout(timer);
        if(immediately){
            let runNow = !timer;
            runNow && fn.apply(context, args);
            timer = setTimeout(()=>timer=null,wait);
        }else{
            timer = setTimeout(()=>fn.apply(context,args), wait);
        }
    }
}
function throttle(func, wait) {
    let timer, previous = 0;

    let later = function() {
        previous = +new Date();
        timer= null;
        func.apply(context, args);
    };

    let throttled = function() {
        // 将时间转换为毫秒格式的数字
        // 想要了解详情 移步 + 一元运算符
        // 当然 前面指出的博客中也写有 在讨论区中
        // 我真的太特么贴心了 疯狂推荐那个博客...
        let now = +new Date();
        //下次触发 func 剩余的时间
        let remaining = wait - (now - previous);
        let context = this, args = arguments;
        // 如果没有剩余的时间了或者你改了系统时间
        if (remaining <= 0 || remaining > wait) {
            if(timer){
                clearTimeout(timer);
                timer = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timer) {
            // 这里可能有些人会不理解
            // 判断timer的意思是
            // 最后一次是否是在可执行的间隔内。。。
            // 感觉我也不知道怎么解释  下面我会贴个图 无图言diao
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}

上面两种就是我所记得的基础版本的节流和防抖了,想要深入了解。可以看underscore是怎样实现的,也可以去看上面我给的博客。
定时器
知道为什么要手动将timer置为null了吧
时间隐式转换
最后一次函数执行条件
再提一点,就是上面的函数执行上下文的绑定。
context = this;
why?

对于this,我的一贯理解就是当前调用该函数的对象。

那为什么要在return function(){ let context = this;}
return 那当然就是将函数返回了哦 返回给调用对象去调用 当前this 那必然就是你想要的this了呀 当然你要是用箭头函数就当我没说
哦了 我也不知道怎样表达了 也画不出图了 言diao 不说这个了
es6的箭头函数里是没有this的,它拿的永远是上一层的this
好吧
邪恶的分割线


原型链

先来个Person
函数开头大写 我们约定为构造函数

function Person(){}

算了 我不想写了//////////////////////
反正我会了
这里说一点我之前钻牛角尖的地方
prototype
反正我就不说我哪里钻牛角尖了。丢人。
我现在就只知道实例的隐式原型等于其构造函数的显式原型
js一切皆对象 尤其记得函数的prototype就是一个对象
so 应该不难理解上图

邪恶的分割线

版权声明:本文为bigbigpotato1024原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/bigbigpotato1024/article/details/82320419

智能推荐

Qt 之 Query Model Example 解析

总体概括 Query Model Example主要演示了怎么使用QSqlQueryModel这个数据库查询模型类。其中包括创建普通的数据库查询模型、可编辑的数据库查询模型和自定义的数据库查询模型。普通(默认)的数据库查询模型是只读的(不可再模型中编辑数据,模型只通过视图展示数据);可编辑的数据库查询模型重写了QSqlQueryModel的flags()方法和setData()方法;自定义的数据库...

Flutter:Scaffold.of() called with a context that does not contain a Scaffold.

Flutter:Scaffold.of() called with a context that does not contain a Scaffold. 当我第一次点击按钮想要弹出底部消息时出现了如下错误 当BuildContext在Scaffold之前时,调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决,代码如下:...

【机器学习基础】线性回归

                                                        &nbs...

08-Vue实现书籍购物车案例

书籍购物车案例 index.html main.js style.css 1.内容讲解 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。 结果如下: 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下: 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。 结果如下: 为每个移除按钮添加...

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

猜你喜欢

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...