JS

回调函数

回调函数是一种特殊的函数，它作为参数传递给另一个函数，并在被调用函数执行完毕后被调用。回调函数通常用于事件处理、异步编程和处理各种操作系统和框架的API

this指向

确定this的值

在非严格模式下，总是指向一个对象，在严格模式下可以是任意值

1. 全局执行环境中，指向全局对象(非严格模式、严格模式)
2. 函数内部，取决于函数被调用的方式
   1. 直接调用的this值
      • 非严格模式：全局对象(window)
      • 严格模式：undefined
   2. 对象方法调用的this值
      • 调用者
3. 开启严格模式：use strict

指定this的值

1. call() ：
   • 第一个参数，改变this的指向
   • 后面的参数依次赋值给函数的参数列表
2. apply() ：
   • 第一个参数，改变this的指向
   • 第二个参数为一个数组，一次赋值给函数的参数列表
3. bind() ：
   • 第一个参数，改变this的指向
   • 后面的参数依次赋值给函数的参数列表
   • 返回一个函数，不会立即执行
4. 箭头函数： 代码：

    const food = {
            name: '香蕉',
            eat(){
                  setTimeout(()=>{
                        console.log("箭头函数：",this);
                  })
                  
                  setTimeout(function(){
                        console.log("普通函数：",this);
                  })
            }
           } 
    food.eat()
   

   运行结果：

手写call()，bind()，apply()

1. call()

Function.myCall = (thisArg,...arg)=>{
      // this是当前的方法
      const key = Symbol("key")
      thisArg[key] = this
      const res = thisArg[key](...arg)
      delete thisArg[key]
      delete key
      return res
}

const demo = {
      name: 'demo',
      eat(){
            console.log(this.name);
      }
}
const demo1 = {
      name: 'demo1'
}
demo.eat()
demo.eat.call(demo1)

运行结果

2. apply() 代码

Function.myCall = (thisArg,arg)=>{
      // this是当前的方法
      const key = Symbol("key")
      thisArg[key] = this
      const res = thisArg[key](...arg)
      delete thisArg[key]
      delete key
      return res
}

3. bind()

Function.prototype.mybind = function (thisArg, ...args) {
      //返回一个箭头函数，目的是为了使其this指向上一级的this
      return (...reArgs) => {
            this.call(thisArg, ...args, ...reArgs)
      }
}

判断数组类型

1. typeof ：可以判断 string、number、boolean、undefined、symbol、function、bigint ，但判断 typeof(null) 为 'object' ，判断数组和对象时为 'object'，typeof NaN 为 'number'
2. instanceof : 可以判断一个实例是否属于某种类型，也可以判断一个实例是否是其父类型或者祖先类型的实例（Function、Array、对象）
3. Object.prototype.toString.call() : 判断一个对象只属于某种内置类型，无法识别自定义的类或构造函数创建的对象
4. constructor : 判断对象、Symbol、Function、Array的类型（在没有改变它的原型执行上）
5. Array.isArray : 判断数组

继承

class继承 （ES6新增）

语法：

1. super() ：调用父类构造函数，在构造函数的首行
2. extends ：继承父类
3. 静态：通过 static 关键字定义静态方法，静态属性，不能再类的实例上调用，而是通过类本身调用
4. 私有：类属性在默认情况下是公有，可以使用 # 来定义私有字段，声明和访问都需要加上

class Person {
       // 公有属性
       name
       // 私有属性
       #addr
       // 静态属性
       static city
       // 构造函数
       constructor(name){
             this.name = name
       }
       // 公有方法，测试私有
       sayHi(){
             console.log('私有属性：',this.#addr);
             this.#sayYes()
             console.log('sayHi');
       }
       // 静态方法
       static sayNo(){
             console.log('sayNo');
       }
       // 私有方法
       #sayYes(){
             console.log('sayYes');
       }

}
const person = new Person('tom')

原型和构造函数的继承（旧的）

使用Object.create()来新建一个对象，使用call来改变this的指向（调用父类构造函数）

// 父
function Father(name) {
      this.name = name
}
Father.prototype.toThis = function () {
      console.log(this);
}
// 子
function Son(name) {
      // 调用父类构造函数
      Father.call(this, name)
}
function Son1() {
      Father.call(this, name)
}
// 创建对象
Son.prototype = Object.create(Father.prototype, {
      constructor: {
            value: Son
      }
})
Son1.prototype = Object.create(Father.prototype)
const son = new Son()
const son1 = new Son1()

运行结果

fetch，ajax，axios

1. ajax：基于XMLHttpRequest收发请求
2. axios：基于Promise的请求客户端，在浏览器和node中均可使用，使用简便，功能强大
3. fetch：内置api，基于Promise，用法和axios类似

fetch使用

1. FormData

2. JSON

ajax使用

Generator 对象

Generator使用

语法

1. function* : function* 这种声明方式 (function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。
2. yield : yield 关键字用于暂停和恢复生成器函数。

基本使用

// 生成
function* generator(){
      yield 1
      yield 2
      yield 3
}

1. next() 遍历

   • done (布尔类型)
     • 如果迭代器超过迭代序列的末尾，则值为 true。在这种情况下，value 可选地指定迭代器的返回值。
     • 如果迭代器能够生成序列中的下一个值，则值为 false。这相当于没有完全指定 done 属性。
   • value - 迭代器返回的任意的 JavaScript 值。当 done 的值为 true 时可以忽略该值。

2. for...of 遍历

for(const i of generatorTest){
      console.log(i);
}

手写promise

手写 promise 并实现 Promises/A+ 测试

CSS

position

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

HTML