2021-01-13 前端总结

let、const、var的使用区别

1.var定义变量,没有块的概念,可以跨块访问,不能跨函数访问,不初始化出现undefined,不会报错。

2.let定义变量,只能在块作用域里访问,也不能跨函数访问,对函数外部无影响。

3.const定义常量,只能在块作用域里访问,也不能跨函数访问,使用时必须初始化(即必须赋值),而且不能修改。

变量提升和函数提升

  • 变量声明的提升是以变量所处的第一层词法作用域为“单位”的,即全局作用域中声明的变量会提升至全局最顶层,函数内声明的变量只会提升至该函数作用域最顶层
  • 函数提升只会提升函数声明,而不会提升函数表达式
  • 函数提升优先于变量提升

Map与普通对象的区别

JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

外部函数调用之后其变量对象本应该被销毁,但闭包的存在使我们仍然可以访问外部函数的变量对象

输入一个网址,直到网址打开并加载结束,这个过程浏览器发生了什么

查看浏览器中是否有缓存,有的话直接访问缓存

如果缓存过期或者没有缓存,重新请求

在发送http请求前,需要域名解析,获取相应的IP地址

浏览器想服务器发起tcp链接,与浏览器建立tcp三次握手

握手成功后,浏览器向服务器发送http请求,请求数据包

服务器处理收到的请求,将数据返回至浏览器

浏览器收到HTTP响应

读取页面内容,浏览器渲染,解析html源码

rem是根据根的font-size变化,而em是根据父级的font-size变化

基本数据类型:number,string,null,undefined,boolean,symbol,bigInt

引用数据类型: object

call,apply,bind的作用区别

作用:用来改变函数this指向

相同处:第一个参数都是this要指向的对象

区别一:call()和apply()都是对函数的直接地调用,而bind()本身返回一个函数,后面还需要()进行调用

区别二:call()和bind()传参可以一个一个传入,但是apply()要以数组格式传参

bind 函数

Function.prototype.bind = function() {
  var self = this;
  var context = Array.prototype.shift.call(arguments)
  var args = Array.prorotype.slice.call(arguments)
  return function() {
    self.apply(context, Array.prototype.concat.call(args, Array.prorotype.slice.call(arguments)))
  }
}

js调用机制

  • JavaScript的单线程
  • 任务队列
    • 同步任务
    • 异步任务
      • (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

      • (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

      • (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

      • (4)主线程不断重复上面的第三步。

具体运行机制可以理解为,当主线程的异步函数在被调用的时候,会请求工作线程的帮助。工作线程接收这个任务并执行。主线程可以继续运行后面的函数,而不必阻塞在这。

浏览器线程

  • 主进程
  • gpu进程
  • 第三方插件进程
  • 渲染进程
    1. gui线程
      如果修改了一些元素的颜色或者背景色,页面就会重绘(Repaint),如果修改元素的尺寸,页面就会回流(Reflow),当页面需要Repaing和Reflow时GUI多会执行,进行页面绘制。
    2. js引擎线程:
      js引擎线程就是js内核,负责解析与执行js代码,也称为主线程。浏览器同时只能有一个JS引擎线程在运行JS程序,所以js是单线程运行的。
    3. 事件循环线程
      管理着一个事件队列(task queue),当js执行碰到事件绑定和一些异步操作时,会把对应的事件添加到对应的线程中(比如定时器操作,便把定时器事件添加到定时器线程),等异步事件有了结果,便把他们的回调操作添加到事件队列,等待js引擎线程空闲时来处理。
    4. 定时器线程
      由于js是单线程运行,所以不能抽出时间来计时,只能另开辟一个线程来处理定时器任务,等计时完成,把定时器要执行的操作添加到事件任务队列尾,等待js引擎线程来处理。这个线程就是定时器线程。
    5. 异步请求线程
      当执行到一个http异步请求时,便把异步请求事件添加到异步请求线程,等收到响应(准确来说应该是http状态变化),把回调函数添加到事件队列,等待js引擎线程来执行

BFC(Block formatting context)直译为"块级格式化上下文"

内部的Box会在垂直方向,一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时,浮动元素也参与计算。

如何创建BFC

1、float的值不是none。

 2、position的值不是static或者relative。

 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

 4、overflow的值不是visible

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

箭头函数

箭头函数相当于匿名函数, 不绑定this、没有prototype属性、不绑定arguments
this 是指向词法作用域,由上下文确定

Array

# 改变原数组的方法
pop, push, shift. unshift, sort, reverse, splice
# 不改变原数组的方法
concat, valueOf, join, slice,lastIndexOf, toLocaleString // 返回新数组

词法作用域和动态作用域

  • 词法作用域(静态作用域)是在书写代码或者说定义时确定的,而动态作用域是在运行时确定的。
    词法作用域关注函数在何处声明,而动态作用域关注函数从何处调用,其作用域链是基于运行时的调用栈的。
// 词法作用域
function foo() {
  console.log(a) //2
}

function bar() {
  var a = 3
  foo()
}
var a = 2
bar()
// 动态作用域
function foo() {
  console.log(a) //3
}

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

推荐阅读更多精彩内容

  • 一、CSS问题 web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线) 1.flex布局 display:...
    PHP9年架构师阅读 1,595评论 1 15
  • 数据结构与算法 栈和队列的区别 网络基础 HTTP 无状态怎么理解 可以从REST的角度来理解这个问题。我们知道R...
    笑极阅读 657评论 1 5
  • 废话少说,本文分四个部分,css、js、知识点一、知识点二、React(部分问题没有给出答案,后续更新) css面...
    666同学阅读 1,088评论 0 0
  • 1、JS的数据类型只有浮点型,没有整型。null,underfined,boolean,number,string...
    6e5e50574d74阅读 2,178评论 2 1
  • 2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...
    duans_阅读 4,665评论 3 27