js复习
复习
JS使用AJAX
function myAjax(url) {
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
console.log('xhr.readyState', xhr.readyState);
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText))
} else {
reject(new Error('请求失败'))
}
}
}
xhr.send(null);
})
return promise
}
let url = './a.json'
myAjax(url).then(data => {
console.log('data', data);
}).catch(err => {
console.error('error', err);
})
async(异步)函数执行顺序
异步函数都会返回一个promise对象
await === promise.then()
await 后面的代码,相当于是放到异步中来执行,那么执行异步的时候,就需要等同步执行完之后,在执行异步
async function test1() {
console.log('test1 begin');
const result = await test2();
console.log('result', result);
console.log('test1 end');
}
async function test2() {
console.log('test2');
}
console.log('script begin');
test1();
console.log('script end');
代码解析:
-
先进行同步操作,输出script begin
-
执行test1的异步函数,输出test1 begin
-
遇到await,先执行await后的test2函数,输出test2
-
执行完test2之后,会把await之后的代码放到一个异步操作中
-
先执行同步,输出script end
-
再执行异步,由于test2是一个异步函数,所以会返回一个promise对象,但是由于test2什么也没有返回,所以返回undefined
-
await === promise.then,则result === promise.then,也就是test2返回promise对象的正确结果为undefined
-
输出result undefined和test1 end
-
最终结果
-
script begin test1 begin test2 script end result undefined test1 end
深度克隆
const oldObj = {
name: 'wsl',
age: '24',
colors: ['orange', 'red', 'blue'],
friends: {
name: 'zxy'
}
}
function deepClone(obj = {}) {
if (typeof obj !== 'object' || obj == null) {
return obj
}
let result
if (obj instanceof Array) {
result = []
} else {
result = {}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
}
const newObj = deepClone(oldObj)
newObj.friends.name = 'zs'
console.log(oldObj, newObj);
class类继承
可以继承方法和属性,把共有的方法和属性抽离出来,放到person中,然后通过extends person实现继承
通过super()方法实现继承属性,通过类名.共有方法()继承共有方法
class Person {
constructor(name) {
this.name = name;
}
drink() {
console.log('我可以喝水');
}
}
class Student extends Person {
constructor(name, score) {
super(name);
this.score = score;
}
introduce() {
console.log(`我是${this.name},考了${this.score}分`);
}
}
const student = new Student('张三', 99)
console.log('student', student);
student.introduce();
student.drink();
class Teacher extends Person {
constructor(name, subject) {
super(name);
this.subject = subject;
}
introduce() {
console.log(`我是${this.name},教${this.subject}科目的`);
}
}
const teacher = new Teacher('李四', '数学')
console.log('teacher', teacher);
teacher.introduce();
teacher.drink();
原型
结合上面 student是实例出来的对象 Student是类
student.____proto____是隐士原型 Student.prototype是显示原型
Student.prototype === student.proto
原型链
结合上面 teacher.hasOwnProperty('name')返回true,证明name是teacher自己的属性
teacher.hasOwnProperty('teach')返回false,证明teach不是teacher自己的方法,而是原型链上的方法
就像上面一样teacher自己有introduce方法,但是没有drink方法,drink方法是从person类中继承的
所以:teacher.proto.introduce === teacher.introduce
teacher.proto.proto.drink === teacher.drink
使用 instanceof 作类型判断
js中引用类型都是Object,除了函数fun
使用方法:teacher instanceof Array 判断的内容 instanceof 判断的类型
vue
使用$router.back()返回上一页