前端知识总结之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

五. 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属性,就是原型对象

• 原型链:

  • 当我们在获取一个对象的属性时,如果这个对象上没有这个属性,那么js会沿着对象的prototype链一层一层的去找,没找到就返回undefined.

十一. 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函数.