网赚妈妈

 找回密码
 立即注册
搜索
查看: 361|回复: 20

[网赚兼职] 你知道JS的“三座大山”吗?带你初识前端JavaScript经典内容

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-25 19:24:13 | 显示全部楼层 |阅读模式

    说道JavaScript,就不得不提一下它的三座大山——闭包、原型和异步

    作用域及闭包

    讲到作用域,你会想到什么?当然是执行上下文。每个函数都有自己的 excution context,和 variable object。这些环境用于储存上下文中的变量,函数声明,参数等。

    this

    本质上来说,在 js 里 this 是一个指向函数执行环境的指针。this 永远指向最后调用它的对象,并且在执行时才能获取值,定义是无法确认他的值。

    SOOs0wiMZ9MLN0XM.jpg

    this 有多种使用场景,下面主要介绍 4 个使用场景:

    1. 作为构造函数执行

    yHh3Msjm31gz73jI.jpg

    首先 new 字段会创建一个空的对象,然后调用 apply() 函数,将 this 指向这个空对象。这样的话,函数内部的 this 就会被空对象代替。

    2. 作为普通函数执行

    k714O55448I16fz8.jpg

    3. 作为对象属性执行

    pVmox2OOTotMozVT.jpg

    4.call(),apply(),bind()

    三个函数可以修改 this 的指向,具体请往下看:

    mEEmMwC45QqEJE04.jpg

    JqWx8rkc9J8zvCqo.jpg

    首先 call,apply,bind 第一个参数都是 this 指向的对象,call 和 apply 如果第一个参数指向 null 或 undefined 时,那么 this 会指向 windows 对象。

    call,apply,bind 的执行方式如上例所示。call,apply 都是改变上下文中的 this,并且是立即执行的。bind 方法可以让对应的函数想什么时候调用就什么时候调用。

    闭包

    闭包的概念很抽象,看下面的例子你就会理解什么叫闭包了:

    GH6NY5RLpM4IH66w.jpg

    闭包就是能够读取其他函数内部变量的函数。在 js 中只有函数内部的子函数才能读取局部变量。所以可以简单的理解为:定义在内部函数的函数。

    原型与原型链

    什么是原型那?在 js 中,所有对象都是 Object 的实例,并继承 Object.prototype 的属性和方法,但是有一些是隐性的。

    我们来看一下原型的规则:

    1. 所有的引用类型(包括数组,对象,函数)都具有对象特性;可自由扩展属性。

    zD6X0fDD6A6nBQ30.jpg

    2. 所有的引用类型(包括数组,对象,函数)都有隐性原型属性(proto), 值也是一个普通的对象。

    console.log(obj.__proto__);

    3. 所有的函数,都有一个 prototype 属性,值也是一个普通的对象。

    console.log(obj.prototype);

    4. 所有的引用类型的proto属性值都指向构造函数的 prototype 属性值。

    console.log(obj.__proto__ === Object.prototype); // true

    5. 当试图获取对象属性时,如果对象本身没有这个属性,那就会去他的proto(prototype)中去寻找。

    yhiG2J28q2Ll8MF8.jpg

    原型链:如下图。

    g6z6uu2QqQU66Gpz.jpg

    在找一个属性,首先会在 f.proto中去找,因为属性值为一个对象,那么就会去 f.proto.proto去找,同理如果还没找到,就会一直向上去查找,直到结果为 null 为止。这个串起来的链即为原型链。

    异步和单线程

    我们先感受下异步。

    console.log("start");setTimeout(function () { console.log("medium");}, 1000);console.log("end");

    使用异步后,打印的顺序为 start-> end->medium。因为没有阻塞。

    为什么会产生异步呢?

    首先因为 js 为单线程,也就是说 CPU 同一时间只能处理一个事务。得按顺序,一个一个处理。

    如上例所示,第一步:执行第一行打印 “start”;第二步:执行 setTimeout,将其中的函数分存起来,等待时间结束后执行;第三步:执行最后一行,打印 “end”;第四部:处于空闲状态,查看暂存中,是否有可执行的函数;第五步:执行分存函数。

    为什么 js 引擎是单线程?

    js 的主要用途是与用户互动,以及操作 DOM,这决定它只能是单线程。例:一个线程要添加 DOM 节点,一个线程要删减 DOM 节点,容易造成分歧。

    为了更好使用多 CPU,H5 提供了 web Worker 标准,允许 js 创建多线程,但是子线程受到主线程控制,而且不得操作 DOM。

    任务列队

    单线程就意味着,所有的任务都要排队,前一个结束,才会执行后面的任务。如果列队是因为计算量大,CPU 忙不过来,倒也算了。但是更多的时候,CPU 是闲置的,因为 IO 设备处理得很慢,例如 ajax 读取网络数据。js 设计者便想到,主线程完全可以不管 IO 设备,将其挂起,然后执行后面的任务。等后面的任务结束掉,在反过头来处理挂起的任务。

    好,我们来梳理一下:

    1)所有的同步任务都在主线程上执行,行程一个执行栈。

    2)除了主线程之外,还存在一个任务列队,只要一步任务有了运行结果,就在任务列队中植入一个时间。

    3)主线程完成所有任务,就会读取列队任务,并将其执行。

    4)重复上面三步。

    只要主线程空了,就会读取任务列队,这就是 js 的运行机制,也被称为 event loop(事件循环)。

    编程是一种修行,我愿与志同道合的朋友携手前行,一起探索有关编程的奥妙!

    如果您在前端学习的过程中遇到难题,欢迎【关注】并【私信】我,大家一起交流解决!

    推荐文章:

    带你一分钟理解JS闭包——通俗易懂

    不一样的JS函数总结,适合前端初学者的JavaScript函数代码

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:24:55 | 显示全部楼层
    js的语法是真的累
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:28:32 | 显示全部楼层
    别说了,学懂了,但是使用的不好
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:31:27 | 显示全部楼层
    最应该注意的还有一个引用对象的坑[捂脸]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:34:24 | 显示全部楼层
    所以JS这东西会流行起来还不是因为前端用了JS,省事吗?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:37:51 | 显示全部楼层
    if else不成作用域?兄弟你学过es6没
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:41:28 | 显示全部楼层
    你以为这么说我就懂了吗[我想静静]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:43:44 | 显示全部楼层
    老生常谈的作用域和闭包[抠鼻]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:47:03 | 显示全部楼层
    关注走一个,慢慢看
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:50:10 | 显示全部楼层
    收藏备用
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-18 04:30 , Processed in 0.172418 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表