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

posted @ 2021-05-25 16:49  穷人绅士  阅读(63)  评论(0编辑  收藏  举报
/* 鼠标点击求赞文字特效 */ /*鼠标跟随效果*/