js复习

Posted 不念则忘

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();

原型

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

以上是关于js复习的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

安卓复习8

安卓复习8