前端零散知识点汇总

224 阅读3分钟

JS篇

一、引用类型

       var test = function (val) {
            val.age = 1000
            val = {
                name: 'wang',
                age: 2
            }
            return val
       }
       var obj = {
           name: 'zhao',
           age: 25
       }
       var res = test(obj)
       console.log(obj)

由于object类是引用类型,作为参数传递时,我们实际传递的是它的指针,所以在test函数中的赋值操作就是对所指空间对象的操作

接下来val的指向了一个新的对象,然后将这个指针返回。函数的返回值是一个新的对象空间

typeof 和 instanceof

typeof

它只能检测基本类型(null, undefined, number, string, boolean, symbol),对于引用类型(除function外)都显示object

instanceof

由于typeof对于判断类型上十分的模糊,我们需要用instanceof更进一步判断

instanceof是基于原型链查询的,可以用来判断数组对象这两种类型

Object.prototype.toString.call

返回值是[object Array]

二、类型判断

‘==’

等号两边先进行boolean转换, 然后再进行数字转换

三、闭包

闭包问题就是实际上就是考察变量所在的环境,它的本质就是,当前环境中存在指向父级作用域的引用

      let one
      function test (){
          let a = 666
          one = function(){
              console.log(a)
          }
          console.log('this is test')
      }
      test()
      one()
      其中one中的a就是对父级作用域中的引用

所以说异步事件使用的回调函数,实际上都是闭包操作

四、 原型链

apply、bind、call

这三个函数本质上都是改变当前的this指向

五、类

实现继承的方法

原型链继承

        function one (){
            this.name = 'zhao'
            this.go = function(){
                console.log('this is ones go')
            }
        }
        function two(){
            this.name= 'li'
        }
        two.prototype = new one()
        let test = new two()
        console.log(test)
        test.go()
        //
        但是这种继承发放存在一个问题:
        那就是所有的实例都共同指向同一个原型,一旦圆形中的属性改变
        那么所有实例对应的属性都会发生改变

六、数组以及相关操作

1、高阶函数

所谓的高阶函数就是以一个函数作为参数的函数,或者返回值为函数

高阶函数有map ,filter, sort, reduce

2、arguments为什么是类数组?

因为arguments实际上就是一个类,它的属性就是从0开始标记的属性

但是这个类同时还拥有lengthcallee这两个属性

处理类数组的方法

Array.prototype.slice.call(arguments)

Array.from

[...arguments]

Array.prototype.concat.apply([], arguments)

3、如何在forEach中退出循环

使用try ... catch

4、数组扁平化

JS内部原理

数据类型我们一般都用栈存储,比如创建切换函数执行上下文,而引用类型我们一般都用堆来处理

对于堆中的垃圾回收

区分宏任务和微任务

事件在js中的执行流程就是宏任务执行完一轮,检查一次微任务队列。这是一个完整的事件处理

宏任务分为:

渲染事件

用户交互事件

js脚本执行

网络请求、文件读写完成事件等等

微任务分为:

微任务的初衷主要是解决回调这个问题

MutationObserver

Promise.then(或.reject)

Promise 为基础开发的其他技术(比如fetch API)

V8 的垃圾回收过程

HTML

DOM事件

Html事件

html事件是指事件直接写在html标签中,相对来说不便于维护

<input placehold="请输入数字" onchange="alert('hello)">

Dom0级事件

dom0事件就是通过选择器,进行选择元素并添加事件

var a = document.getElementById('app');
a.onclick=function(){
alert('this is changing')
}

注意:当同一个元素注册多个同一种事件时,元素只会执行最后定义那个事件

Dom2级事件

dom2级事件和dom0级差不多,通过事件监听的方式,对元素添加事件

var a = document.getElementById('app')
a.addEventListener('click',function...,false)

注意:当同一个元素注册多个同一种事件时,元素会顺序依次执行所定义的事件