JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

一、同步异步

JavaScript代码的执行分为同步和异步两种方式。同步是指代码执行的顺序和书写顺序一致,代码执行时必须等待上一行执行完成，才执行下一行。异步是指代码执行的顺序和书写顺序不一致，可以在等待某些操作完成时执行其他代码，操作完成时再回调执行。

JavaScript的异步编程实现有两种方式：
1. 回调函数
2. Promise

其中Promise是回调函数的升级版，使用Promise可以处理回调地狱的问题，代码更加易读易维护。

示例1：使用回调函数实现异步操作

function ajax(url, callback){
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            callback(xhr.responseText);
        }
    };
    xhr.send();
}

ajax('https://api.github.com/users/maoyuwan', function(data){
    console.log(data);
});

示例2：使用Promise实现异步操作

function ajax(url){
    return new Promise(function(resolve, reject){
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    resolve(xhr.responseText);
                }else{
                    reject();
                }
            }
        };
        xhr.send();
    });
}

ajax('https://api.github.com/users/maoyuwan').then(function(data){
    console.log(data);
}).catch(function(){
    console.log('error');
});

二、作用域和闭包

作用域是指一个变量的生命周期和可访问范围。JavaScript的作用域分为全局作用域和函数作用域。闭包是指一个函数可以访问另一个函数内部的变量，甚至访问外部函数的变量，形成一个封闭的作用域。

示例1：全局作用域

var a = 10;

function foo(){
    console.log(a); // 10
}

foo();

示例2：函数作用域及闭包

function foo(){
    var a = 10;
    function bar(){
        console.log(a); // 10
    }
    return bar;
}

var test = foo();
test();

三、原型和原型链

JavaScript中的继承是通过原型链来实现的，每个对象都包含一个 proto 属性，指向它的原型对象，而原型对象也有 proto 属性，指向它的父级原型对象，这样就构成了一个链式结构。

示例1：原型继承

function Animal(name){
    this.name = name;
}

Animal.prototype.sayName = function(){
    console.log(this.name);
}

function Dog(name, voice){
    Animal.call(this, name);
    this.voice = voice;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayVoice = function(){
    console.log(this.voice);
}

var dog = new Dog('小黑', '汪汪');
dog.sayName(); // 小黑
dog.sayVoice(); // 汪汪

示例2：原型链

function Person(){
    this.name = 'Tom';
}

Person.prototype.getName = function(){
    console.log(this.name);
}

function Student(){
    this.age = 20;
}

Student.prototype = new Person();
Student.prototype.getAge = function(){
    console.log(this.age);
}

var student = new Student();
student.getName(); // Tom
student.getAge(); // 20