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()返回上一页