关于javascript:手写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)
  })
}