这2万字的前端基础知识查漏补缺,请你收藏好

Posted Jay_帅小伙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了这2万字的前端基础知识查漏补缺,请你收藏好相关的知识,希望对你有一定的参考价值。

一,JS基础

1.如何在es5环境下实现let

对于这个问题,我们可以直接查看babel转换前后的结果,看一下在循环中通过let定义的变量是如何解决变量提升的问题
  • 源码
//源码
for(let i=0; i<10; i++)
	console.log(i)

	console.log(i)

babel转码

for(var _i = 0; _i < 10; _i++)
	console.log(_i)

	console.log(i)

babel在let定义的变量前加了道下划线,避免在块级作用域外访问到该变量,除了对变量名的转换,我们也可以通过自执行函数来模拟块级作用域。
(function() 
 for(var i = 0; i < 5; i ++) 
    console.log(i)  // 0 1 2 3 4 
  
 )();
 console.log(i)      // Uncaught ReferenceError: i is not defined

2、如何在ES5环境下实现const

实现const的关键在于Object.defineProperty()这个API,这个API用于在一个对象上增加或修改属性。通过配置属性描述符,可以精确地控制属性行为。Object.defineProperty() 接收三个参数:

Object.defineProperty(obj, prop, desc)

  • 对于const不可修改的特性,我们通过设置writable属性来实现
function _const(key, value)     
   const desc =         
        value,        
        writable: false
       
  Object.defineProperty(window, key, desc)


_const('obj', a: 1)   //定义obj
obj.b = 2               //可以正常给obj的属性赋值
obj =                 //抛出错误,提示对象read-only
参考资料:如何在 ES5 环境下实现一个const ?

手写call()

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

语法:function.call(thisArg, arg1, arg2, …)

call()的原理比较简单,由于函数的this指向它的直接调用者,我们变更调用者即完成this指向的变更:

//变更函数调用者示例
function foo() 
 console.log(this.name)


// 测试
const obj = 
name: '写代码像蔡徐抻'

obj.foo = foo   // 变更foo的调用者
obj.foo()       // '写代码像蔡徐抻'
  • 基于以上原理, 我们两句代码就能实现call()
Function.prototype.myCall = function(thisArg, ...args) 
    thisArg.fn = this              // this指向调用call的对象,即我们要改变this指向的函数
    return thisArg.fn(...args)     // 执行函数并return其执行结果

但是我们有一些细节需要处理:
Function.prototype.myCall = function(thisArg, ...args)   
  const fn = Symbol('fn')  // 声明一个独有的Symbol属性, 防止fn覆盖已有属性   
   thisArg = thisArg || window   // 若没有传入this, 默认绑定window对象    
    thisArg[fn] = this // this指向调用call的对象,即我们要改变this指向的函数    
    const result = thisArg[fn](...args)  // 执行当前函数    
    delete thisArg[fn]          // 删除我们声明的fn属性    
    return result       // 返回函数执行结果
  
    //测试
    foo.myCall(obj)   // 输出'写代码像蔡徐抻'

4. 手写apply()

apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。
apply()和call()类似,区别在于call()接收参数列表,而apply()接收一个参数数组,所以我们在call()的实现上简单改一下入参形式即可
Function.prototype.myApply = function(thisArg, args) 
   const fn = Symbol('fn')        // 声明一个独有的Symbol属性, 防止fn覆盖已有属性
    thisArg = thisArg || window    // 若没有传入this, 默认绑定window对象
    thisArg[fn] = this              // this指向调用call的对象,即我们要改变this指向的函数
    const result = thisArg[fn](...args)  // 执行当前函数
    delete thisArg[fn]              // 删除我们声明的fn属性
    return result                  // 返回函数执行结果


//测试
foo.myApply(obj, [])     // 输出'写代码像蔡徐抻'

5、手写bind()

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
语法: function.bind(thisArg, arg1, arg2, …)

从用法上看,似乎给call/apply包一层function就实现了bind():

Function.prototype.myBind = function(thisArg, ...args) 
 return () => 
   this.apply(thisArg, args)
  

但我们忽略了三点:

  • bind()除了this还接收其他参数,bind()返回的函数也接收参数,这两部分的参数都要传给返回的函数
  • new的优先级:如果bind绑定后的函数被new了,那么此时this指向就发生改变。此时的this就是当前函数的实例
  • 没有保留原函数在原型链上的属性和方法
Function.prototype.myBind = function (thisArg, ...args) 
  var self = this
  // new优先级
  var fbound = function () 
        self.apply(this instanceof self ? this : thisArg, 		args.concat(Array.prototype.slice.call(arguments)))
    
// 继承原型上的属性和方法
    fbound.prototype = Object.create(self.prototype);

return fbound;


//测试
const obj =  name: '写代码像蔡徐抻' 
function foo() 
console.log(this.name)
console.log(arguments)


foo.myBind(obj, 'a', 'b', 'c')()    //输出写代码像蔡徐抻 ['a', 'b', 'c']

6、手写一个防抖函数

防抖和节流的概念都比较简单,所以我们就不在“防抖节流是什么”这个问题上浪费过多篇幅了,简单点一下:
防抖,即短时间内大量触发同一事件,只会执行一次函数,实现原理为设置一个定时器,约定在xx毫秒后再触发事件处理,每次触发事件都会重新设置计时器,直到xx毫秒内无第二次操作,防抖常用于搜索框/滚动条的监听事件处理,如果不做防抖,每输入一个字/滚动屏幕,都会触发事件处理,造成性能浪费。
function debounce(func, wait) 
 let timeout = null
 return function() 
  let context = this
  let args = arguments
  if (timeout) clearTimeout(timeout)
   timeout = setTimeout(() => 
            func.apply(context, args)
    , wait)
   

7、手写一个节流函数

防抖是延迟执行,而节流是间隔执行,函数节流即每隔一段时间就执行一次,实现原理为设置一个定时器,约定xx毫秒后执行事件,如果时间到了,那么执行函数并重置定时器,和防抖的区别在于,防抖每次触发事件都重置定时器,而节流在定时器到时间后再清空定时器

方式一 延时器

function throttle(func, wait) 
let timeout = null
return function() 
let context = this
let args = arguments
if (!timeout) 
            timeout = setTimeout(() => 
                timeout = null
                func.apply(context, args)
            , wait)
        

    

实现方式2:使用两个时间戳prev旧时间戳和now新时间戳,每次触发事件都判断二者的时间差,如果到达规定时间,执行函数并重置旧时间戳

function throttle(func, wait) 
var prev = 0;
return function() 
let now = Date.now();
let context = this;
let args = arguments;
if (now - prev > wait) 
            func.apply(context, args);
            prev = now;
        
    

数组扁平化

对于[1, [1,2], [1,2,3]]这样多层嵌套的数组,我们如何将其扁平化为[1, 1, 2, 1, 2, 3]这样的一维数组呢:
  • 1.ES6的flat()
const arr = [1, [1,2], [1,2,3]]
arr.flat(Infinity)  // [1, 1, 2, 1, 2, 3]
  • 2.序列化后正则
const arr = [1, [1,2], [1,2,3]]
const str = `[$JSON.stringify(arr).replace(/(\\[|\\])/g, '')]`
JSON.parse(str)   // [1, 1, 2, 1, 2, 3]
  • 3.递归
    对于树状结构的数据,最直接的处理方式就是递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr) 
let result = []
for (const item of arr) 
    item instanceof Array ? result = result.concat(flat(item)) : result.push(item)
  
return result


flat(arr) // [1, 1, 2, 1, 2, 3]
  • 4.reduce()递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr) 
return arr.reduce((prev, cur) => 
return prev.concat(cur instanceof Array ? flat(cur) : cur)
  , [])


flat(arr)  // [1, 1, 2, 1, 2, 3]
  • 5.迭代+展开运算符
let arr = [1, [1,2], [1,2,3]]
while (arr.some(Array.isArray)) 
  arr = [].concat(...arr);


console.log(arr)  // [1, 1, 2, 1, 2, 3]

9. 手写一个Promise

异步编程二三事 | Promise/async/Generator实现原理解析 | 9k字

二、JS面向对象

在JS中一切皆对象,但JS并不是一种真正的面向对象(OOP)的语言,因为它缺少类(class)的概念。虽然ES6引入了class和extends,使我们能够轻易地实现类和继承。但JS并不存在真实的类,JS的类是通过函数以及原型链机制模拟的,本小节的就来探究如何在ES5环境下利用函数和原型链实现JS面向对象的特性。

在开始之前,我们先回顾一下原型链的知识,后续new和继承等实现都是基于原型链机制。很多介绍原型链的资料都能写上洋洋洒洒几千字,但我觉得读者们不需要把原型链想太复杂,容易把自己绕进去,其实在我看来,原型链的核心只需要记住三点:

  • 每个对象都有__proto__属性,该属性指向其原型对象,在调用实例的方法和属性时,如果在实例对象上找不到,就会往原型对象上找
  • 构造函数的prototype属性也指向实例的原型对象
  • 原型对象的constructor属性指向构造函数

1、模拟实现new

首先我们要知道new做了什么
  • 创建一个新对象,并继承其构造函数的prototype,这一步是为了继承构造函数原型上的属性和方法
  • 执行构造函数,方法内的this被指定为该新实例,这一步是为了执行构造函数内的赋值操作
  • 返回新实例(规范规定,如果构造方法返回了一个对象,那么返回该对象,否则返回第一步创建的新对象)
// new是关键字,这里我们用函数来模拟,new Foo(args) <=> myNew(Foo, args)
function myNew(foo, ...args) 
// 创建新对象,并继承构造方法的prototype属性, 这一步是为了把obj挂原型链上, 相当于obj.__proto__ = Foo.prototype
let obj = Object.create(foo.prototype)

// 执行构造方法, 并为其绑定新this, 这一步是为了让构造方法能进行this.name = name之类的操作, args是构造方法的入参, 因为这里用myNew模拟, 所以入参从myNew传入
let result = foo.apply(obj, args)

// 如果构造方法已经return了一个对象, 那么就返回该对象, 一般情况下,构造方法不会返回新实例,但使用者可以选择返回新实例来覆盖new创建的对象 否则返回myNew创建的新对象
return typeof result === 'object' && result !== null ? result : obj


function Foo(name) 
this.name = name

const newObj = myNew(Foo, 'zhangsan')
console.log(newObj)                 // Foo name: "zhangsan"
console.log(newObj instanceof Foo)  // true

2、ES5如何实现继承

说到继承,最容易想到的是ES6的extends,当然如果只回答这个肯定不合格,我们要从函数和原型链的角度上实现继承,下面我们一步步地、递进地实现一个合格的继承
  • 1). 原型链继承
    原型链继承的原理很简单,直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承
// 父类
function Parent() 
this.name = '写代码像蔡徐抻'

// 父类的原型方法
Parent.prototype.getName = function() 
return this.name

// 子类
function Child() 

// 让子类的原型对象指向父类实例, 这样一来在Child实例中找不到的属性和方法就会到原型对象(父类实例)上寻找
Child.prototype = new Parent()
Child.prototype.constructor = Child // 根据原型链的规则,顺便绑定一下constructor, 这一步不影响继承, 只是在用到constructor时会需要

// 然后Child实例就能访问到父类及其原型上的name属性和getName()方法
const child = new Child()
child.name          // '写代码像蔡徐抻'
child.getName()     // '写代码像蔡徐抻'

原型继承的缺点:

  • 由于所有Child实例原型都指向同一个Parent实例, 因此对某个Child实例的父类引用类型变量修改会影响所有的Child实例
  • 在创建子类实例时无法向父类构造传参, 即没有实现super()的功能
// 示例:
function Parent() 
 this.name = ['写代码像蔡徐抻']

Parent.prototype.getName = function() 
 return this.name

function Child() 

Child.prototype = new Parent()
Child.prototype.constructor = Child

// 测试
const child1 = new Child()
const child2 = new Child()
child1.name[0] = 'foo'
console.log(child1.name)          // ['foo']
console.log(child2.name)          // ['foo'] (预期是['写代码像蔡徐抻'], 对child1.name的修改引起了所有child实例的变化
  • 2)、 构造函数继承
    构造函数继承,即在子类的构造函数中执行父类的构造函数,并为其绑定子类的this,让父类的构造函数把成员属性和方法都挂到子类的this上去,这样既能避免实例之间共享一个原型实例,又能向父类构造方法传参
function Parent(name) 
 this.name = [name]

Parent.prototype.getName = function() 
 return this.name

function Child() 
    Parent.call(this, 'zhangsan')   // 执行父类构造方法并绑定子类的this, 使得父类中的属性能够赋到子类的this上


//测试
const child1 = new Child()
const child2 = new Child()
child1.name[0] = 'foo'
console.log(child1.name)          // ['foo']
console.log(child2.name)          // ['zhangsan']
child2.getName()                  // 报错,找不到getName(), 构造函数继承的方式继承不到父类原型上的属性和方法

构造函数继承的缺点:

继承不到父类原型上的属性和方法
  • 3)、 组合式继承

既然原型链继承和构造函数继承各有互补的优缺点, 那么我们为什么不组合起来使用呢, 所以就有了综合二者的组合式继承

function Parent(name) 
this.name = [name]

Parent.prototype.getName = function() 
return this.name

function Child() 
// 构造函数继承
    Parent.call(this, 'zhangsan')

//原型链继承
Child.prototype = new Parent()
Child.prototype.constructor = Child

//测试
const child1 = new Child()
const child2 = new Child()
child1.name[0] = 'foo'
console.log(child1.name)          // ['foo']
console.log(child2.name)          // ['zhangsan']
child2.getName()                  // ['zhangsan']
组合式继承的缺点:
  • 每次创建子类实例都执行了两次构造函数(Parent.call()和new Parent()),虽然这并不影响对父类的继承,但子类创建实例时,原型中会存在两份相同的属性和方法,这并不优雅

  • 4)、寄生式组合继承
    为了解决构造函数被执行两次的问题, 我们将指向父类实例改为指向父类原型, 减去一次构造函数的执行

function Parent(name) 
this.name = [name]

Parent.prototype.getName = function() 
return this.name

function Child() 
// 构造函数继承
    Parent.call(this, 'zhangsan')

//原型链继承
// Child.prototype = new Parent()
Child.prototype = Parent.prototype  //将`指向父类实例`改为`指向父类原型`
Child.prototype.constructor = Child

//测试
const child1 = new Child()
const child2 = new Child()
child1.name[0] 查漏补缺系列前端基础补充

查漏补缺系列前端基础补充

查漏补缺系列前端基础补充

查漏补缺系列前端基础补充

webpack5 查漏补缺

webpack5 查漏补缺