美文网首页
作用域链,原型链,面向对象的理解

作用域链,原型链,面向对象的理解

作者: 路上灵魂的自由者 | 来源:发表于2019-08-28 15:00 被阅读0次

    作用域链:

    函数执行会形成一个私有的作用域,形成和当前私有作用域中声明的变量都是私有变量,当前私有作用域有自我保护机制,私有变量和外界师没有关系的,但是如果私有作用域中遇到一个非私有的变量,则向它的上级作用域中找,如果还不是上级作用域私有的,则继续向上找,一直找到window。这种变量一层层向上查找的机制就是“作用域机制”


    原型链: 

    它也是一种查找机制,实例首先在自己的私有属性种进行查找,如果不是私有属性,基于__proto__向所属类的原型上进行查找,如果再找不到,则继续基于__proto__向上查找,一直找到Object.prototype为止。例如obj.hasOwnproperty这个属性就是找到Object.prototype才找到的


    对面向对象:

    [JS本身就是面向对象编程的]

    JS本身基于面向对象(OOP)编程思想开发出来的语言,我们学习JS就是在学习JS中的类和实例,例如:数组是Array的实例,对象是Object的实例,函数是Function的实例...,在这些内置类的原型商有很多公共的属性和方法,这些方法可以被实例调用,我们学习JS就是学习这些方法

    [面向对象真实项目应用]

    平常的业务逻辑开发,我没有可以使用类的方法类的方式来做,只有在一些组件或者插件封装的时候才会有,基于构造函数和原型链使用类和实例完成,例如,TAB页卡等,就是这样处理的(我之前看了一些类库和插件的源码,也都是基于面向对象封装的)

    [面向对象中的一些语法和特点]

    所谓面向对象是基于class和function创建一个类,执行的时候new执行创建一个实例,这样实例就可以调取类商提供的方法,想要基于面向对象进行插件封装,必须掌握类的继承,封装和多态,封装就是提取公共的方法,js中没有严格意义的多态,不能进行方法的重写,常用的继承方式有很多,例如:原型继承,call继承,寄生组合式继承,es6的继承等,有些方式会存在一些问题,我项目中后来都是基于class中的extend实现继承的.


    js防抖和节流(https://www.cnblogs.com/momo798/p/9177767.html)

    在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。 

    函数防抖

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件。

    // 防抖

    function debounce(fn, wait) {    

        vartimeout =null;    

        returnfunction() {        

            if(timeout !==null)   clearTimeout(timeout);        

            timeout = setTimeout(fn, wait);    

        }

    }

    // 处理函数

    function handle() {    

        console.log(Math.random());

    }

    // 滚动事件window.addEventListener('scroll', debounce(handle, 1000));

    函数节流

    函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图,持续触发scroll事件时,并不立即执行handle函数,每隔1000毫秒才会执行一次handle函数。

    var throttle = function(func, delay) {             

         var timer = null;             

         return function() {                 

             var context = this;               

             var args =arguments;                 

             if (!timer) {                     

                 timer = setTimeout(function() {                         

                     func.apply(context, args);                         

                     timer = null;                     

                 }, delay);                 

             }             

         }        

    }        

    function handle() {            

        console.log(Math.random());        

    }        

    window.addEventListener('scroll', throttle(handle, 1000));

    总结

    函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

    函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

    区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。


    javascript/node 实现sleep函数

    js中的setTimeout的函数有在等待一段时间之后执行函数的功能,所以我考虑使用setTimeout函数来实现功能。

    async functionsleep(){ 

         await setTimeout(function(){ 

             console.log('这是来自3s之后的问好');

          },3000)

          console.log("hello")

    }

    使用promise重新定义sleep函数

    async function test() {

      console.log('开始啦')

      await sleep(3000)

      console.log('这是来自3s之后的问好')

    }

    function sleep(ms) {

      return new Promise(resolve => setTimeout(resolve, ms))

    }


    如何实现(2).plus(5).minus(2)    // 5(  https://blog.csdn.net/nothing_is_imposible/article/details/48437583)

    (3).toString()    // "3"   //数值函数可以这样调用

    Number.prototype.plus=function (num){console.log(this.valueOf())

        return this.valueOf()+num;

    };

    Number.prototype.minus=function (num){

        return this.valueOf()-num;

    }

    (2).plus(5).minus(2);   //5


    如何实现add(1)(2)(3)(4)(5)?

    function add(x) {

        var sum = x;

        var tmp = function (y) {

            sum = sum + y;

            return tmp;

        };

        tmp.toString = function () {

            return sum;

        };

        return tmp;

    }

    add(1)(2)(3)(4)(5)

    相关文章

      网友评论

          本文标题:作用域链,原型链,面向对象的理解

          本文链接:https://www.haomeiwen.com/subject/mzaeuqtx.html