js复习

Posted 2021-05-25 不念则忘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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();