手写new
new 的作用:首先创建了一个新的空对象
设置原型,将对象的原型设置为函数的 prototype 对象。
让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。
实现: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 包括以下几个步骤创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
使用 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)
})
}