手写new和Ajax

手写new

new 的做用:

1. 首先建立了一个新的空对象
2. 设置原型，将对象的原型设置为函数的 prototype 对象。
3. 让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4. 判断函数的返回值类型，若是是值类型，返回建立的对象。若是是引用类型，就返回这个引用类型的对象。

实现:

function myNew() {
  // 1.建立空对象
  let obj = {}
  let constructor = [...arguments][0]
  let params = [...arguments].slice(1)

  // 2.空对象的原型指向构造函数的原型
  obj.__proto__ = constructor.prototype

  // 3.执行构造函数的代码
  var ret = constructor.apply(obj, params)

  // 4.判断返回值类型：
  // 若是是基本值类型，则返回的建立的'空对象'
  // 若是是引用类型，则返回这个引用类型的对象
  var flag = ret && ret instanceof Object
  return flag ? ret : obj
}
// test
function A(name) {
  this.name = name
}
var a1 = myNew(A, 'Lee')
var a2 = new A('Lee')
console.log(a1, a2)

手写Ajax

AJAX 包括如下几个步骤

1. 建立 XMLHttpRequest 对象，也就是建立一个异步调用对象
2. 建立一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新

通常实现:

const SERVER_URL = '/server'

let xhr = new XMLHttpRequest()

// 建立 Http 请求 第三个参数为async，指定请求是否为异步方式，默认为 true。
xhr.open('GET', SERVER_URL, true)

// 设置请求头信息
xhr.responseType = 'json'
xhr.setRequestHeader('Accept', 'application/json')

// 设置状态监听函数
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return

  // 当请求成功时
  if (this.status === 200) {
    handle(this.responseText)
  } else {
    console.error(this.statusText)
  }
}

// 设置请求失败时的监听函数
xhr.onerror = function () {
  console.error(this.statusText)
}

// 发送 Http 请求
xhr.send(null)

promise 封装实现：

function getJSON(url) {
  // 返回一个 promise 对象
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest()

    // 新建一个 http 请求， 第三个参数为async，指定请求是否为异步方式，默认为 true。
    xhr.open('GET', url, true)

    // 设置状态的监听函数
    xhr.onreadystatechange = function () {
      /*0: 请求未初始化
 1: 服务器链接已创建
 2: 请求已接收
 3: 请求处理中
 4: 请求已完成，且响应已就绪*/
      if (this.readyState !== 4) return

      // 当请求成功或失败时，改变 promise 的状态
      /*200: "OK"
 404: 未找到页面*/
      if (this.status === 200) {
        resolve(this.responseText)
      } else {
        reject(new Error(this.statusText))
      }
    }

    // 设置响应的数据类型
    xhr.responseType = 'json'

    // 设置请求头信息
    xhr.setRequestHeader('Accept', 'application/json')

    // 发送 http 请求
    xhr.send(null)
  })
}