今天学到/复习了

键盘手艺人
244 阅读5分钟

好记性不如烂笔头

2019/10/15

Array.includes()
es6泛指一个历史版本,包含es2015、es2016、es2017、es2018、es2019的内容
React中ref的使用（v16.3及以上版本）
```
class MyConponent extends React.Component {
    constrcutor(props) {
        super(props)
        this.inputRef = React.createRef()
    }
    componentDidMount() {
        this.inputRef.current.focus()
    }
    render() {
        return (
            <input ref={this.inputRef}/>
        )
    }
}
```
[参考链接](https://juejin.cn/post/6844903641816498184)

2019/10/16

面向对象设计（OOD）原则
五大基本原则——SOLID<br>
S-单一原则<br>
O-开闭原则<br>
L-里氏替换原则<br>
I-接口隔离原则：客户端不应该依赖它不需要的接口；一个类对另一个类的依赖应该建立在最小的接口上。要为各个类建立专用的接口，而不要试图去建立一个很庞大的接口供所有依赖它的类去调用<br>
D-依赖倒置原则Dependence Inversion Principle<br>
定义：高层模块不应该依赖低层模块，两者都应该依赖其抽象；抽象不应该依赖细节，细节应该依赖抽象。<br>
[参考链接](https://blog.csdn.net/zhengzhb/article/details/7289269)<br>

2019/10/17

ES6解构赋值

定义：ES6中允许按照一定的模式，从数组或者对象中提取值，对变量进行赋值。
作用：可以减少赋值语句或者减少通过下表访问数组或对象，使代码更加优雅，可读性更佳
解构赋值的本质是模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值
1、数组的解构赋值：

const [a, b, c] = [1, 2, 3]
a // 1
b // 2
c // 3
/************部分赋值***************/
const [, , third] = [1, 2, 3]
third // 3
/************默认值***************/
const [a, b, c， d = 4] = [1, 2, 3]
d // 4

2、对象的解构赋值

const obj = {
    name: 'lta', 
    id: '890425', 
    subObj: {
       wifeName: 'xtt' 
    }
}
const { name, id } = obj
name // lta
id // 890425
/**************修改变量名***************/
const {name: firstName, id: code} = obj
firstName // lta
code // 890425
/**************赋初始值***************/
const {subObj: {wifeName:lp = ''} = obj
lp // xtt

2019/10/18

JavaScript 防抖和节流
  • 防抖
    定义：
    事件触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
    源码：
function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}
var fn = function () {
  console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次
  • 节流
    定义：
    规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
    源码:
function throttle(fn, gapTime) {
  let _lastTime = null;
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}

let fn = ()=>{
  console.log('boom')
}

setInterval(throttle(fn,1000),10)

2019/10/22

JavaScript继承

1、原型链继承

核心：将父类的实例作为子类的原型对象

function Parent () {
    this.name = 'parent'
}
function Child () {
    this.parentName = '我的父亲'
}
Parent.prototype.age = 60
Child.prototype = new Parent() // Child继承Parent
const child = new Child()
console.log(child.age) // 60
console.log(child.name) // parent
console.log(child.parentName) // 我的父亲

优点：

  • 简单易复用
  • 父类新增的原型方法和原型属性子类都可以访问

缺点：

  • 父类中引用对象的值发生变化，所有子类的值都改变；子类实例共享了父类构造函数的引用属性
  • 创建子类实例的时,无法向父类构造器传参
  • 无法多继承

2、构造函数继承
核心：借用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类

function Parent () {
    this.name = 'parent'
}
function Child () {
    Parent.call(this)
    this.parentName = '我的父亲'
}
Parent.prototype.id = '100'
const child = new Child()
child.name // parent
child.id // undefined

优点：

  • 创建子类实例，可以向父类构造函数传参数
  • 子类实例不共享父类构造函数的引用属性
  • 可以多继承

缺点：

  • 只能继承父类的属性和方法，无法继承父类原型属性和方法
  • 父类的方法不能复用

3、组合继承

核心：通过调用父类构造函数，继承父类属性及向父类传参。通过将子类原型对象指向父类实例，复用父类的方法。本质上就是构造函数继承和原型链继承的组合。

function Parent () {
    this.name = 'parent'
}
Parent.prototype.parentAge = 40
function Child () {
    Parent.call(this)
    this.parentName = '我的父亲'
}
Child.prototype = new Parent()
const child = new Child()
child.name // parent 访问父类属性
child.parentAge // 40 访问父类原型对象属性

优点：

  • 弥补可构造函数继承和原型链继承的缺点

缺点：

  • 调用两次父类构造函数，创建两个父类实例对象

4、寄生组合继承

核心：通过寄生的方式，替换父类实例属性。这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Parent () {
    this.name = 'parent'
}
Parent.prototype.parentAge = 40
function Child () {
    Parent.call(this)
    this.parentName = '我的父亲'
}
(function() {
    const Supper = function () {}
    Supper.prototype = Parent.prototype
    Child.prototype = new Supper()
})()
const child = new Child()
child.name // parent 访问父类属性
child.parentAge // 40 访问父类原型对象属性

优点：

  • 相当的完美

缺点：

  • 实现起来相对复杂一些

JS实现继承的几种方式

深入理解JavaScript原型链与继承

JavaScript各种继承

2019/10/25

JavaScript中new的过程
function Parent (name) {
    this.name = name
}
const parent = new Parent('张一山')

new Parent('张一山') 可以分为4个步骤。

1、const obj = {}
2、obj._proto_ = Parent.prototype
3、const result = Parent.call(this, '张一山')
4、return typeof result === 'obj'? result : obj
  1. 创建一个空对象obj
  2. 将obj的proto指向Parent的原型对象(Parent.prototype)。建立obj的原型链
  3. 在obj的执行空间，调用Parent的构造函数。执行完这一步，obj中就有了name的属性，并且它的值为'张一山'。
  4. 根据第3步返回值的类型，如果无返回值或者返回值是一个非对象，则将obj返回作为新对象。否则返回值作为新对象。

new的过程到底发生了什么

2019/11/07

React v16.4之前的生命周期

2019/11/20

DOM的重排(layout)和重绘(painting)

2019/12/19

ES2017的几个常用特性
  • Object.values
  • object.entries
  • padStart
  • padEnd
数组去重的两种方法
  • 使用filter加includes去重
const arrays = ['1', '2', '3', '4', '1']
const newArrays = arrays.filter(item => {
    return !arrays.includes(item)
})
console.log(newArrays) // ['1', '2', '3', '4']
  • 使用es6中的Set去重
const arrays = ['1', '2', '3', '4', '1']
const newArrays = [...new Set(arrays)]
console.log(newArrays) // ['1', '2', '3', '4']
avatar
文章
阅读
粉丝