个人收集统计前端信息内容

用户6668253619557
211 阅读5分钟

1.原型链类 原型、构造函数、实例、原型链

20190627010213277.png (p6-juejin.byteimg.com/tos-cn-i-k3…)
  对象就是实例
  任何一个函数只要被new使用了，指这个函数就是构造函数
  构造函数使用new运算符生成一个实例，构造函数的prototype属性就是原型对象
  原型链：当实例调用某一个属性时，先在本身找，如果没有找到，就到它的原型对象上逐级向上找（proto），直到找到Object.prototype,如果还找不到则原路返回（constructor），告诉它方法或属性未定义
  总结：原型链就是在访问一个对象属性的时候，如果自身没有找到的情况下回去它的原型对象中查找，如果还没有，会去它的原型对象的原型对象中查找，如此循环直到顶层的Object对象的原型对象是个null（Object.prototype.proto===null）为止的这么个机制
  原型链就是访问查找对象属性在自身属性没有找到时向上逐级查找直到找到对象属性或者顶层的Object对象的原型是null时停止的一个机制

2.防抖和节流

  juejin.cn/post/697087…

  防抖和节流简单说就是防止一定时间内同一事件多次触发使用
  防抖：非立即执行版--触发事件后函数不会立刻执行，是在触发后n秒内没有再次触发后执行事件如果中间再次触发此事件则会重新计算函数执行时间。

    //注意下面不要用箭头函数，注意this和arguments的指向
    let timer = null; //通过闭包保存一个标记
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        //若有timer，就清除timer，所以会重新执行下面的定时器，重新定时。
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}
//对比两种写法
function debounce2(fn, delay) {
    let timer = null;
    //注意下面不要用箭头函数，注意this和arguments的指向
    return function (...args) {
        let context = this;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

作者：拉小提琴的程序员
链接：https://juejin.cn/post/6970874451567050783
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  防抖：立即执行版--触发事件函数会立即执行然后等待n秒后不触发事件才能执行下次函数，中间再次触发事件则会从新计算函数执行时间

    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            immediate = true;
        }, delay);
        //以上代码每次点击都会执行。
        //若定时器没有结束，则immediate为false，下面代码else永远不会执行。
        //而return false之后若再重新执行此函数，又会清除掉定时器，再重新开一个timer，则会重新计算时间。
        if (!immediate) {
            return false;
        } else {
            fn.apply(this, arguments);
            immediate = false;
        }
    }
}

作者：拉小提琴的程序员
链接：https://juejin.cn/post/6970874451567050783
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

合并版

function debounce(fn, delay, immediate) {
    let timer = null;
    let canRun = immediate;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        if (immediate) {
            timer = setTimeout(() => {
                canRun = true;
            }, delay);
            //用canRun代替了immediate
            if (!canRun) {
                return false;
            } else {
                fn.apply(this, arguments);
                canRun = false;
            }
        } else {
            timer = setTimeout(() => {
                fn.apply(this, arguments);
            },delay);
        }
    }
}

作者：拉小提琴的程序员
链接：https://juejin.cn/post/6970874451567050783
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  节流：执行一次函数后让函数在一定时间内失效，过了时间再重新激活函数。

3.http和https

  http：http是超文本传输协议，是互联网上应用最为广泛的一种网络协议，http传输的数据都是没有加密的
  https：https协议是具有安全性的ssl加密传输协议。https的工作原理是：收先客户使用https url访问服务器，服务器建立ssl链接，然后服务器收到请求后将网站证书返回给客户端，探后客户端和服务器协商ssl链接的安全等级，建立密钥然后通过网站的公钥加密会话密钥并传送给网站

4.TCP三次握手--TCP和UDP区别

  首先发送端发送一个带有SYN标志的数据包给对方，接收端收到后回传一个带有SYN/ACK标志的数据包表示传达确认信息，发送端再回传一个带有ACK标志的数据包代表握手结束
  TCP和UDP的区别：TCP是面向连接的，UDP是无连接的即发送数据前不需要先建立连接；通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达，

图片.png

5.BOM属性对象方法（不全）

  BOM是浏览器对象，常用的属性有：

（1）location对象

location.href 返回或设置当前文档的URL；
location.search 返回URL中查询字符串部分；
location.hash 返回URL#后面的内容如果没有#返回空；
location.host 返回URL中的域名部分;
location.hostname 返回URL中的主域名部分;
location.pathname 返回URL的域名后的部分;
location.port 返回URL中的端口部分；
location.protocol 返回URL中的协议部分；
location.reload() 重新加载当前页面；

（2）history.go()

history.go(num) 前进或后退指定的页面数；
history.back() 后退一页
history.forward() 前进一页
avatar
文章
阅读
粉丝