原始数据类型 和 引用数据类型

原始数据类型 存在栈中 空间小 大小固定 频繁更换

  • Undefined
  • Null
  • String
  • Boolean
  • Number
  • Symbol
  • BigInt

引用数据类型 存在栈和堆中 栈保存引用堆的指针
Object（Function Array Date）

数据类型判断

  • typeof()只用于判断原始数据类型 引用数据类型全是Object
  • a instanceof b 通过判断是否是b数据类型的实例 不能判断 数字、字符串、布尔 因为他们不是某一数据类型的实例
  • a.constructor === b 判断实例的构造函数
  • Object.prototype.toString.call(a)

隐式类型转换

  1. 字符串连接符与算术运算符
    num+Number（xxx）
  2. 关系运算符：会把其他数据类型转换成number之后再比较关系
  3. 复杂数据类型在隐式转换时会先转成String，然后再转成Number运算
  4. 逻辑非隐式转换与关系运算符隐式转换搞混淆

事件流 事件捕获 事件冒泡 事件委托 监听事件（上层绑定 防止内存泄露）

  • 事件流：

用户和网页的交互事件从页面中传播的顺序。

  • 3种事件模型：
  • DOM0:网页中定义监听函数或者JS指定监听
  • IE模型：
    事件处理：执行目标元素绑定的事件
    事件冒泡：从目标元素一直冒泡到document，依次检查经过的节点是否绑定事件监听函数，有则执行
    可以添加多个监听函数，按顺序执行
  • DOM2：事件捕获阶段：捕获的是从document一直向下传播的目标元素，检查经过的节点是否绑定函数事件，有则执行
  • 事件委托 / 代理：
  • 利用事件冒泡，因为冒泡会上传到父节点，并且父节点可以通过事件对象获取到目标节点，所以在父节点设置监听函数统一处理。
  • 减少内存消耗，动态绑定，新增子节点不需要设置监听函数了
  • 事件捕获 / 冒泡：
  • 捕获：window--document--html--body--目标元素
  • 冒泡：当前元素--body--html--document--window

    可选参数useCapture，默认值为false，事件将在冒泡阶段中发生，如果为true 则事件将在捕获阶段中发生
  • 事件监听
    第一个参数是：事件的类型（如：“click”,“mousedown”）；
    第二个参数是：事件触发后调用的函数。
    第二个参数是：布尔值 用于描述事件是冒泡还是捕获。true：表示捕获；false表示冒泡。（该参数是可选的）
element.addEventListener(event,function,useCapture);

原型和原型链

①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype


①一直往上层查找，直到到null还没有找到，则返回undefined
②Object.prototype.__proto__ === null
③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

静态方法 原型方法

    function Person(){this.name = '小明';// 实例方法this.getName = function(){console.log('他的名字叫 ',this.name);};// 内部方法const getSex = function(){console.log('性别是男的');}}// 静态方法Person.sayHi = function(){console.log('Hi!');}// 原型方法Person.prototype.sayBye = function(){console.log('Bye!');}const p = new Person();p.getName(); // 实例方法只能被实例调用，内部方法只能被类调用Person.sayHi(); // 静态方法只能被类调用p.sayBye(); // 原型方法只能被实例调用

class 创建对象 实现继承 instance super

class Point{}
class ColorPoint extends Point{}

子类必须在constructor方法中调用super方法，否则新建实例时会报错，因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法，如果不调用super方法，子类就得不到this对象

classPoint{constructor(x, y) {this.x = x;this.y = y;}
}
classColorPoint extends Point{constructor(x, y, color) {//this.color = color; // ReferenceErrorsuper(x, y);this.color = color; // 正确}
}

上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的，正确的继承之后，我们就可以创建实例了

let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true

作用域

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

作用域链

寻找变量，一层一层往上找。

闭包

闭包就是有权访问另一个函数作用域内变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量
外面的this是外面
但是里面是window

箭头函数的this

具体参考this 指向详细解析（箭头函数）

绑定函数的源码

  • bind

bind的特点：

  1. 接受调用传参和新建对象构造函数传参
  2. 如果是外部没有传入this就要新建一个this
  3. 和call接受的参数和实现的回调功能一样
  4. 返回的是一个新创建的原来传入的this克隆的对象
//函数的构造函数 ： Function
//用es6解构rest的方式传参
Function.prototype.myBind = function(objThis,...params){//定义指向当前函数this的指针const thisTn = this;//因为最终返回的是一个函数，所以声明一个函数返回//用let表示块作用域let funcForBind = function(...secondParams){/*因为例如let sayClone = obj.say.bind(obj2,1,2,3);sayClone(4);这里还是可以进行传参，最终传的就是1，2，3，4，所以可以用解构  ...secondParams*///判断是不是新创建的对象 如果新创建的对象的话 this就是当前函数的this 不是新创建的话就是传进来的那个对象的上下文const isNew = this instanseof funcForBind;const thisArg = isNew ? this : objThis;//返回调用 并分别解构传入的参数params和创建对象传入的参数secondParamsreturn thisFn.call(thisArg,...params,...secondParams);}//因为bind返回的是克隆的对象，所以还要把原型链进行克隆funForBind.prototype = Object.create(thisFn.prototype);return funcForBind;
}
  • call 和 apply
    之前的例子：
//给obj2增加一个obj的call的函数，然后用传入的参数进行调用返回最终值
obj.say.call(obj2,1,2,3);

Function.prototype.myCall = function(thisArg,...arr){if(thisArg == null || thisArg == undefined){thisArg = window;}//定义一个不重复的方法名称const specialMethod = Symbol('anything');//将这个不重复的方法Function的指针给thisArg的specialMethod方法thisArg[specialMethod] = this;//调用函数并结果返回let result = thisArg[specialMethod](...arr);//delete 新增的属性delete thisArg[specialMethod];return result;
}
obj.say.myCall(obj2,1,2,3);

Function.prototype.myApply = function(thisArg,arr){if(thisArg == null || thisArg == undefined){thisArg = window;}//定义一个不重复的方法const specialMethod = Symbol('anything');//将这个不重复的方法的指针给thisArg的specialMethod方法thisArg[specialMethod] = this;//调用函数并结果返回let result = thisArg[specialMethod](...arr);//delete 新增的属性delete thisArg[specialMethod];return result;
}
obj.say.myApply(obj2,[1,2,3]);

GET POST区别

  • 请求

请求次数。
GET发送一次接受一次
POST发送多次接收多次（先发header再发body）

  • 参数

GET放在URL中，POST请求体中

  • 编码

GET在URL上只能ASCII，POST支持更多

  • 缓存

GET主动缓存，POST不行（除了流式传输）

  • 应用场景

GET搜索关键字，分页操作。POST注册。

ajax五个请求 回调 和 promise区别 手写

ajax

创建HTTP请求异步对象
设置回调函数
open方法建立连接
send发送数据
回调函数对响应状态进行处理

promise封装

创建promise对象
新建请求
配置请求头部
设置 状态监听函数resolve / 错误监听reject
设置响应数据类型
发送HTTP请求

状态码

缓存