《前端基础进阶》

前端基础进阶.png

内存空间

1、栈数据结构

基础数据值在内存中占据固定的大小空间,因此存在栈内存中
js的执行上下文顺序借用了栈数据的存取方式,所以理解栈数据结构的原理和特点十分重要
方式:先进后出,后进先出(类似一盒乒乓球)

2、堆数据结构

引用类型的值是对象,保存在堆内存中 
堆数据结构是一种树状结构,它的存取方式,则与口红色号一样,只要有色号,就能找到对应的口红
不必像乒乓球把上面的都拿出来才能获取中间的某一个
好比JSON格式,key:value可以是无序的,因为顺序的不同不影响我们的使用,我们只关心色号

3、队列

学习队列数据结构的目的主要是为了清晰的明白我们js中事件循环(Event Loop)
队列是一种先进先出的数据结构,正如排队过安检是一样的。排在最前面的人一定是最先过安检的人。

4、变量对象与基础数据类型

js执行上下文之后,会创建一个叫变量对象的特殊对象,js的基础数据类型往往保存在变量对象中
基础类型都是一些简单的数据段,所以基础数据类型是按值来访问的,我们可以直接操作变量对象的实际值

5、堆内存与引用类型

js的引用类型储存在堆内存中
js不允许我们直接访问内存中的数据
世界上我们操作的是对象的引用而非实际的值
引用类型是按指针访问的,这个指针指向内存中的实际地址。
因此,我们操作引用类型复制时,它同样会分配一个新的值保存在变量对象中,但这个个新值同样指向内存中的实际值。改变一个,另一个也会发生改变

6、内存空间管理

  • js内存声明周期

    分配你所需的内存
    使用分配的内存(读写)
    不需要时释放,归还

  • 垃圾回收机制

    js拥有自动垃圾会回收机制
    常用的使用标记清除法
    当变量进入环境时,就将这个变量标记为进入环境
    垃圾回收机制运行中会给存储在内存中的变量添加标记。然后,去掉环境中的变量以及环境中的变量被引用的标记,而在此之后再加上标记的变量将视为被准备删除的变量

  • 性能优化

    避免全局变量,使用完及时清空
    局部变量,当函数执行安成之后很容易做出判断,然后回收。

7、知识点汇总

执行上下文的顺序是栈的数据结构方式,先进后出,后进先出
基础数据类型的值存在栈内存中
引用数据类型的值存在堆内存中
队列数据结构先进先出,后进后出。事件循环机制(Event Loop)
从一个变量向另一个变量复制基本类型的值。会创建这个值的副本
从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最后指向同一个对象
解除变量的引用不仅有助于消除循环引用现象,而且对垃圾收集也有好处。为了确保有效地回收内存,应该及时解除不再使用的全局对象、全局对象属性以及循环引用变量的引用。

执行上下文

每当控制器转到可执行代码的时候,就会进入一个执行上下文
它会形成一个作用域,js运行环境分为3个种情况
全局作用域
函数作用域
eval
执行上下文可以理解成为当前代码的执行环境
因此js程序会出现多个执行上下文,所以js用栈的方式去处理它们。这个栈就叫做函数调用栈。栈底永远是全局上下文,栈顶是当前执行上下文

1、创建阶段

创建变量对象(vo)
建立作用域链(scopechain)
确定this指向

2、执行阶段

变量赋值
函数引用
执行其他代码

5、总结

js是单线程
同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待,
全局上下文只有一个,它在浏览器关闭的时候出栈
函数执行上下文没有数量限制
每次新函数被调用,就会有新的执行上下文被创建

变量对象

1、变量对象是什么?生命周期的过程?变量提升是什么原理?

变量对象是执行上下文的创建阶段,会创建一个叫变量对象的基础对象。js的基本类型往往都保存在变量对象中
变量对象的生命周期是根据执行上下文的生命周期去划分的
创建阶段:(变量提升阶段,变量对象中的属性不能访问)
创建arguments对象
检查function函数声明创建属性
检查var变量声明的属性
执行阶段(变量对象转为活动对象,属性可以被访问,开始函数执行阶段操作)
函数执行
变量赋值
弹出执行栈

2、活动对象是什么?关系是神什么?

活动对象和遍变量对象其实是同一个的对象,区别在于执行的上下文的生命周期不同。
创建阶段就是变量对象,变量对象的属性不可被访问。
执行阶段就是活动对象,处于函数调用栈栈顶,也就是当前执行上下文。

3、全局上下文的变量

这里以浏览器为例,全局对象是window
全局上下文存在一个特殊的地方,他的变量对象就是window,而这个特殊的对象在this指向同样适用,this也指向window
全局上下文的生命周期与程序的生命周期一样,只要浏览器窗口不关闭,它就会一直存在。其他环境的上下文环境都可以访问全局上下文

4、let/const

不存在变量提升
未声明不可以用 (暂时性死区)

作用域与作用域链?

什么是作用域?

作用域也就是词法环境
词法环境就是一中规范的类型,用于ECMAscript代码的词法嵌套结构来定义标识符与特定变量和函数的关联

什么是作用域链?

作用域是一种规则,作用域链是代码在执行的过程中,会动态变化的一条索引路径
由当前环境和上层环境的一些列变量对象组成,它保证了当前执行环境对符合访问权限的变量和函数的有序访问

什么是闭包?

闭包是一种特殊的对象
由2部分组成
执行上下文(A)
以及执行上下文中创建的函数(B)
当B执行时,如果访问了A中变量对象中的值。就像成了闭包
垃圾回收机制,js具有自动垃圾回收机制,当一个值在内存中失去引用时,垃圾回收器很快找到它,并回收释放
函数执行上下文在执行完毕后,生命周期结束后,垃圾回收器就是收回其占用的内存空间,但使用闭包就会阻止这个过程

this

全局this

全局的this,指向window
通过this绑定到全局对象
通过声明绑定到变量对象,但在全局环境中,变量对象就是它自身
仅仅只有赋值操作,标识符会隐式绑定到全局对象

函数内部的this

如果函数调用者,被某一个对象拥有。那么该函数在调用时,this就是指向这个对象
如果函数内部独立调用,那么该函数内部的this,则指向window,严格模式下指向undefind

使用call,apply显示指定this

js内部提供了一种机制,允许我们改变thiss的指向。他就是call和apply
这2个函数的第一个参数都是改变this的指向,区别:
在于第二个参数,call接受一个个参数传入
apply接受数组传入

  • call

    接受参是一个个传入

  • apply

    参数接受一个数组

  • bind

    返回一个函数
    可以选择不立即执行
    apply和call是立即执行

构造函数与原型方法上的this

函数与函数式编程

函数声明,函数表达式,匿名函数与自执行

函数声明
function fn(){}
函数表达式
let fn=function(){}
匿名函数
function add(fn,num){console.log(fn()+num)}
add(()=>90,10)
自执行函数
(()=>console.log(90))()

函数参数传递方式:按值传递

基本类型复制是值进行的复制,复制后互不影响
引用类型的复制是指针的复制。虽然也在变量对象上开辟新的空间,但实际指针一样是堆内存中的地址,其中一个改变,另一个也将改变,相互影响

函数式编程

函数是一等公民
只用表达式,不应语句
纯函数

面向对象

工厂模式

没有办法识别对象实例的类型
通过一个方法可以去生成多个需要的对象
解决了重复代码编写

构造函数模式

使用new的方式。通过原型链找到对象的实例对象
new的四部曲
创建一个对象
将这个对象的原型指向构造函数的原型
通过apply将构造函数的的this指向这个对象
最后返回这个对象

原型模式

私有方法放实例中
共有方法放到原型链上
原型的好处是避免了同一功能性的方法写多份。直接挂载到原型上即可
当我们访问实例对象中的属性或者方法时,会优先访问实例对象自身的属性和方法。

原型链

原型链的访问,其实跟作用域链有很大的相似之处,他们都是一次单向的查找过程。因此实例对象能够通过原型链,访问到处于原型链上对象的所有属性与方法

继承

首先是构造函数的继承
通过call将父级的指针指向子集
原型的继承
可以将子集的原型指向父级的实例
使用Object.create

属性类型

configurable是否可以被删除
enumerable是否可以被枚举
writable是否可以重写
value该值具体多少,默认undefind
get访问,获取属性值
set设置。设置属性值
不能同时设置value、writable 与 get、set的值。
读取属性Object.getOwnPropertyDescriptor

事件循环机制

js是单线程,这个线程拥有的唯一的事件循环
来自不同任务源的任务会进入到不同的任务队列。其中setTimeout与setInterval是同源的。
事件执行的顺序,决定了JavaScript代码的执行顺序
它从script(整体代码)开始第一次循环,
之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),
然后执行所有的micro-task。
当所有可执行的micro-task执行完毕之后。
循环再次从macro-task开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。
其中每一个任务的执行,无论是macro-task还是micro-task,都是借助函数调用栈来完成

函数调用栈

任务队列

  • 宏任务

    setTimeout
    setInterval
    script(整体代码)

  • 微任务

    Promise

XMind: ZEN - Trial Version

Image placeholder
Ara112
未设置
  74人点赞

没有讨论,发表一下自己的看法吧

推荐文章
IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

【数据结构】1_进阶高手的大门

理解程序的本质问题:为什么会有各种各样的程序存在?程序的本质是什么?程序是为了解决实际问题而存在的,从本质而言,程序是解决问题的步骤描述。一小步的进阶:理解实际问题 确认问题类型 如:数值计算,求最

Python程序员进阶必备:从新手到高手的100个模块

在知乎和CSDN的圈子里,经常看到、听到一些python初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python学到

60秒一口Python:147个demo,助你从新手小白步步进阶编程高手

人生苦短,编程苦手,不妨学起Python,感受一飞冲天的快乐。不要害怕学习的过程枯燥无味,这里有程序员jackzhenguo打造的一份中文Python“糖果包”:147个代码小样,60秒一口,营养又好

花2w培训前端,出来狂面20家,被拒,我该怎么办?

今天,一个在上海花2w培训前端的妹子向我诉苦,说她5个月刚培训出来,技术好差,2周时间,狂面20家公司,没有一家抛出橄榄枝。她自己说,感觉找不到工作了,能不能给我点建议?我大概问了她一些细节。这期培训

晋级高级前端工程师,你需要开发过这七类项目

近些日子,随着JavaScript擅长做更多的事情,它也变得很难被全部掌控(更不用说不可能)。对这门语言更好的理解以及更多的经验意味着更多的工作机会。因此,花费时间来学习新东西很有用。学习编程最好的也

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

前端开发人员最困扰的事情有哪些?

前端和后端开发之间的界线正在发生变化。有一些常见的错误会导致前端开发人员增加工作量、浪费时间,本文将介绍一些常见的错误以及如何避免这些错误。公司向他们的开发人员和程序员提出更多的要求,让他们完成与自己

被前端业务倒逼出来的中台?

数字化智能时代,数据成为了新的生产资料,也是蕴含丰富价值的矿藏。随之而来的打破数据孤岛、拆掉部门墙的声音越来越高。2019年中台热席卷圈内,企业、投资者、媒体众说纷纭,百度搜索指数也是应声而涨。有人认

从P4到P9, 在马云家写代码到双11前端PM

导读:今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年,从应届生到双11前端PM,他一路升级打怪,实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际,他把在阿里这些年的成长经历做一

一位从卖猪肉转行到前端开发小哥的自我救赎

一位曾经卖过猪肉的前端小哥自我救赎之路来自微信公众号:前端巅峰  的交流群真实采访花名:**郑伊健**一、你为什么要给自己取一个郑伊健的花名,有什么特殊含义特殊含义倒是没有,取这个花名,只是因为觉得郑

你需要的前端知识收集好了,请查收!

github地址记录学习成长收获的知识,不断进步,Front-end-go-on目前包含的模块有 HTML基础 CSS基础 JS基础 数据结构基础 Http基础 JS代码练习 算法代码练习 CSS代码

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

ZooTeam 前端周刊|第 63 期

政采云前端小报第63期浏览更多往期小报,请访问:https://weekly.zoo.team 基于浏览器的实时构建探索之路本文是RichLab花呗借呗前端团队的玄寂童鞋在D2上议题的文字稿。微浏览

vue前端UI框架有哪些?

Vue移动端UI框架1、Vux(star:15620)VUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。暂未适配vue-cli@3

前端面试每日 3+1 —— 第263天

今天的知识点(2020.01.04)——第263天(我也要出题) [html]html5怎么判断app是否安装? [css]使用sass的方式有哪些? [js]举例说明object.freeze有

【译】前端开发不是一个亟待解决的问题

原文地址:Front-enddevelopmentisnotaproblemtobesolved原文作者:RobinRendle本文永久链接:https://segmentfault.com/a/11

前端react是什么?

前端react是什么?前端react指的是reactjs,是Facebook推出的一个用来构建用户界面的JavaScript库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。

前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知

前端工程师不可不知的时间和地理坐标🔥

关于时间GMT和UTCGMT,即格林尼治标准时间,也就是世界时。GMT的正午是指当太阳横穿格林尼治子午线(本初子午线)时的时间。但由于地球自转不均匀不规则,导致GMT不精确,现在已经不再作为世界标准时

前端-响应式布局

1.使用vw,vh,rem@functionvw($px){ @return($px/1920)*100vw; } @functionvh($px){ @return($px/1075)*100vh

央视网黄乐:安全合规是一切工作的重要基础

“安全无小事”这一句口号相信大家都较为耳熟,而随着网络技术的不断应用落地,这句口号不再仅仅是一句口号。由于网络安全威胁的不断升级,企业组织对于网络安全的重视程度不断加深。但在安全方面的投入或许还远远不

重新定义数据基础设施,华为的底气与转变

摘要:重新定义,制定新规则,意味着变革,它能让我们在深度思考和发散思维之间寻找更好的解决方案。重新定义存储架构,重新定义数据处理平台,重新定义数据基础设施,今年,华为在数据基础设施领域有点忙。华为何要

如何部署多云环境下的IT基础架构?

在多云环境下,企业IT基础架构如何构建,是很多企业都在关心的话题。那么,到底如何去部署多云环境才算成功?有哪些关键要素?众所周知,云带来的好处是,让企业IT有了更多选择,我们可以选择AWS,可以选择谷

软件定义IT基础架构,如何看待深信服的产品战略布局?

在很多人的潜意识里,深信服是一家令人尊敬的企业,技术支撑能力强,产品种类多,功能全面,后劲足,是少数能和华为、新华三同台竞技的企业之一。但有时候,深信服也会被这些优势所累,比如经常会被问道:你们和华为