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

作用域链:

函数执行会形成一个私有的作用域,形成和当前私有作用域中声明的变量都是私有变量,当前私有作用域有自我保护机制,私有变量和外界师没有关系的,但是如果私有作用域中遇到一个非私有的变量,则向它的上级作用域中找,如果还不是上级作用域私有的,则继续向上找,一直找到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)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容