前端知识总结之JavaScript篇

一. this的使用场景?

• 普通函数中的this指向全局window
• 构造函数中的this指向实例对象
• 对象方法中调用this,this指向该方法的对象
• 当函数用call,apply或者bind调用时,this指向传入的对象
• 箭头函数中没有this,this指向外部做用域中的this
• 经过事件绑定方法时,this指向事件源

二. New关键字的运行机制

• 建立一个新的空对象
• 将构造函数的this指向该空对象的方法
• 将该空对象原型指向构造函数原型
• 返回新对象

三. 做用域/预解析/做用域链

• 做用域:变量和函数可访问的一个范围,分为全局变量,全局做用域.局部变量,局部做用域
• JS代码读取时,首先进行预解析,寻找做用域中的变量和函数,而后对其进行提早声明,代码从上往下执行,函数内的变量么有var声明就是全局变量
• 做用域链:执行函数时,先从函数内部寻找局部变量,若是没找到,就会向声明函数的做用域依次向上寻找

四. Array数组的相关方法:

• push:数组末尾添加
• pop:数组末尾删除
• unshift:数组开头添加
• shift:数组开头删除
• sort:数组排序
• join:数组拼接成字符串
• splice:删除数组中第几项,始终返回一个数组
• indexOf:数组中查找第一次出现的位置,未找到时返回-1
• lastIndexOf:数组中从末尾往前查找第一次出现的位置,未找到时返回-1
• concat: 合并两个或多个数组,返回一个新数组
• sort: 数组排序,返回排序后的数组
• reverse: 数组进行翻转(倒序)
• map: 对数组中的每一项数据进行加工处理,造成一个新的数组
• filter: 对数组中的每一项进行逻辑判断,将知足条件的项造成一个新的数组
• some: 判断数组中是否包含符合规则的数据,只要有一个元素符合就返回true,不然返回false,终止遍历的条件为return true
• every: 判断数组中是否全部数据都符合规则,只要有一个不知足就返回false,所有知足才会返回true

五. String字符串的相关方法:

• charAt():经过索引找到对应的字符,不传参数时默认为0,取值范围0-字符串的length-1,若是超出范围,返回一个空空字符串
• charCodeAt():经过索引找到对应字符的Unicode编码,不传参默认为0,取值范围0-字符串length-1,若是超出范围,返回一个NaN
• indexOf():经过字符去找对应的索引,找到字符首次出现的位置(从左往右),未找到时返回-1
• lastIndexOf():跟indexOf做用同样,顺序是从右向左查找,找不到时返回-1
• slice():截取字符串,不包含结束位置的字符,起始位置不能大于结束位置,不然返回一个空字符串,不传参时返回整个字符串,返回值为截取后的字符串.原字符串不变
• split():把字符串按分隔符分割成数组
• substring():截取字符串,参数必须为正数,起始位置能够大于结束位置,会自动把两个位置调换
• substr(start,length): 截取指定起始位置和长度的字符串
• toLowerCase():把字符串转成小写
• toUpperCase():把字符串转成全大写
• trim(): 去掉字符串先后的全部空格

六. 闭包/闭包的优缺点

• 简单来说:函数A中有一个函数B,函数B能够访问到函数A中的变量,那么函数B就是闭包,就是有权访问另外一个函数做用域中的变量

• 当函数执行时,会造成一个私有做用域,会保护里面的私有变量不受外界的干扰,

• 优势:

  • 避免全局变量污染
  • 能够长久的在内存中保存一个私有变量(不被垃圾回收机制回收)
  • 安全性提升,使变量私有化(不会被随意修改)

• 缺点:

  • 过多的使用闭包,可能致使内存泄漏(内存泄漏是指被分配的内存没有被使用,可是也不能被垃圾回收机制回收的一种现象)

七. 面向对象和面向过程

• 面向过程:指的是在开发过程当中专一于每一个功能的具体实现方式
• 面向对象:指的是在开发过程当中,分析大致步骤,找到每一个步骤能够辅助咱们开发的对象(工具)进行操做

八. 面向对象的三个特征

• 封装-->根据功能性,将多个用于相同操做的功能封装到一个对象中(例如内置的Math)
• 继承-->让功能更好的复用
• 多态-->让功能使用的灵活性加强

九. 对象的建立方式

• 对象字面量{}
• 构造函数建立方式new Object()
• 自定义构造函数

十. prototype属性,原型链

• 函数自带的属性--原型

• 做用:用于保存构造函数中公用方法值

• 使用方式: 将构造函数中的方法设置给prototype便可,全部经过当前构造函数建立的对象均可以使用prototype中的方法

• 三者关系

  • 实例对象:都具备__proto__,就是原型对象
  • 原型对象:都具备constructor属性,就是构造函数
  • 构造函数:都具备prototype属性,就是原型对象

• 原型链:

  • 当访问一个对象的某个属性时,会先在这个对象自己属性上查找,若是没找到,则会去他的__proto__隐式原型上查找,既他的构造函数的prototype,若是没找到就会再在构造函数的prototype的__proto__中查找,一层一层的向上查找就会造成一个链式结构,称为原型链.

十一. call/apply/bind不一样点

• 共同点:

  • call和apply均可以调用函数
  • call和apply的参数1均可以设置本次调用中this的值

• 区别:

  • 实参传入方式不一样: call是在参数1后,设置多个参数做为实参,数据形式不限 apply是在参数2设置数组,数组中的每一个元素为实参

• bind设置的全部参数均为永久设置,没法修改(call,apply都不行)

  • bind方法的参数1,用于设置某个函数内的this
  • bind方法的后续参数,用于设置实参
  • bind方法的返回值为当前函数

十二. 递归

• 在函数中调用自身的形式,称为递归函数

• 可能出现的问题: 用多了可能出现死循环的状况

  • 解决方式: 给递归限制执行次数,根据规律设置递归的结束条件

十三. 正则表达式

• 匹配,替换,提取功能

• 正则匹配方式:test()参数为要匹配的字符串,返回值true表示匹配成功(字符串知足正则的规则)false表示是匹配失败

• 正则替换操做:replace()参数1为要替换的内容,参数2为替换的目标值

• 正则提取操做:

  • 字符串方法match()参数为正则表达式,返回值为数组形式,包含提取的内容
  • 正则方法exec()参数为要提取内容的字符串,返回值为数组,特性:经过同一个正则对字符串进行屡次提取操做,内容会进行累计

十四. BOM

• window中的经常使用属性

  • window.document 也是DOM的顶级对象,用于操做浏览器中的页面功能
  • window.console 用于操做浏览器中的控制台功能
  • window.location 用于操做浏览器中的地址栏相关功能
  • window.history 用于操做浏览器中的历史记录相关功能
  • window.navigator 用于操做浏览器与系统的一些相关信息

• window中的经常使用方法

  • window.alert(); -- 弹出提示框
  • window.confirm() ; ---弹出确认提示框
  • window.prompt(); -- 弹出一个提示框,容许用户输入内容
  • window.open(); 用于开启新窗口
  • window.close(); 用于关闭指定窗口

• location对象 (地址栏相关功能)

  • location.href=''; 让页面跳转
  • location.reload(); 让页面刷新
  • window.location.hash ; 哈希值#后面
  • window.location.host; 服务器名+端口号
  • window.location.hostname; 服务器名
  • window.location.port; 端口
  • window.location.pathname; 路径名
  • window.location.protocol; 协议
  • window.location.search; 参数

十五. DOM

• 事件三个阶段

  • 事件冒泡
  • 事件委托
  • 事件捕获

• 阻止事件冒泡

  • stopPropagation()
  • e.cancelBubble = true //兼容IE

• 阻止默认事件

  • e.preventDefault() 取消默认事件
  • return false //推荐使用

• 事件捕获

  • addEventListener() // IE9如下不支持

十六. 常见的元素操做(对DOM元素的增删改查)

• 建立节点的方法:document.createElement().
• 添加:appendChild(),insertBefore(),innerText(),innerHTML()
• 替换:replaceChild()
• 删除:removeChild()

十七. 如何获取页面元素位置?鼠标位置?滚动条的卷曲值?

• 元素位置:offsetLeft(),offsetTop()
• 鼠标位置:offsetWidth(),offsetHeight()
• 卷曲值:scrollTop(),scrollLeft()

十八. async和await的理解:

• 执行异步操做的时候可以以同步的方式写异步的方法,async定义在函数的前面,函数执行后返回一个promise,await后面只能跟一个promise函数.

十九. 事件冒泡和事件捕获?

• 事件冒泡: 当时使用事件冒泡时,子级元素先触发,父级元素后触发
• 事件捕获: 当你使用事件捕获时,父级元素先触发,子级元素后触发

二十. 实现继承有哪些方式?

• 原型继承
• 构造函数继承
• 组合式继承
• 寄生组合式继承
• ES6中的class

二十一. 变量提高如何理解?

• js中,函数及变量的声明都将被提高到函数的最顶部
• js中,变量能够先使用再声明
• js中只用声明的变量会提高,初始化的不会

二十二. 宏任务和微任务(微任务要优先于宏任务执行)

• 宏任务: 进入浏览器事件队列的任务
  • 定时器
  • 事件函数
  • ajax的回调函数
• 微任务: 不进入浏览器事件队列,而是经过js方式模拟出本身的队列
  • Promise的相关回调: then/catch/finally
  • Object.observe()
  • MutationObserve监控DOM的变化