Javascript 面试经典 （二）

Promise消除回调地狱

方法一：

/*需要借助Promise来消除回调嵌套       链式调用*/
let promiseAjax = function(json) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: json.url,
            dataType: json.dataType,
            type: 'json',
            success(data) {
                resolve(data);
            },
            error(err) {
                reject(err);
            }
        })
    })
}
promiseAjax({
    url: '1.json',
    type: 'get',
    dataType: 'json',
}).then(data => {
    console.log(data);
}).catch(erro => {

})

方法二：

/* 当所有的异步全部成功之后才会执行then，只要有一个异步执行失败，就会执行catch    all([promise,....]).then(allData = >{}).catch(err =>{})  */
let promiseAjax = url => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            dataType: 'json',
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(err)
            }
        })
    })
}
let p1 = promiseAjax('1.json');
let p2 = promiseAjax('2.json');
Promise.all([p1, p2]).then(resolve => {
    console.log(resolve)
})

//jQuery3.X版本之后ajax方法中会自动返回一个Promise对象

Export 和 export default的区别

1. export与export default均可用于导出常量、函数、文件、模块等
2. 在一个文件或模块中，export、import可以有多个，export default仅有一个
3. 通过export方式导出，在导入时要加{ }，export default则不需要
4. 1. 输出单个值，使用export default
   2. 输出多个值，使用export
   3. export default与普通的export不要同时使用

Export 和 module.export的区别

通常exports方式使用方法是：

exports.[function name] = [function name]

moudle.exports方式使用方法是：

moudle.exports= [function name]

这样使用两者根本区别是

exports 返回的是模块函数

module.exports 返回的是模块对象本身，返回的是一个类

使用上的区别是

exports的方法可以直接调用

module.exports需要new对象之后才可以调用

面向对象的继承

ES6继承

Class A extends B{
    Constructor(){
        Super();
    }
    方法名(){
        Super.方法名();
    }
}

ES5继承

// 原型链式继承
function SuperType() {

    this.property = true;
    
}

SuperType.prototype.getSuperValue = function () {

    return this.property;
    
}
function SubType() {

    this.subpropertype = false;
    
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {

    return this.subpropertype;
    
}

var ins = new SubType();

console.log(ins.subpropertype);//false

console.log(ins.getSuperValue());//true

//构造函数式继承

function SuperType(){

    this.color=['1','2','3','4'];
    
}
function SubType(){

    SuperType.call(this);
    
}

var ins1=new SubType();

ins1.color.pop()

console.log(ins1.color);//[1,2,3]

var ins2=new SubType()

ins2.color.push('5');

console.log(ins2.color);//[1,2,3,4,5]

优点：可以在子类型构造函数中向超类型构造函数传递参数

缺点：在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能ES6的新特性

Function Parent (){
}

Parent.prototype=function fn(){

}

Function Child(){
        Parent.apply(this,arguments)
}

New关键字的作用

// 因为JS中，对象都是new 对应的函数()创建出来的，

// new 关键字对函数的影响(new关键字到底做了什么)：

// 1.在该函数内部创建一个对象

// 2.函数内部的this指向创建出来的的这个对象

// 3.对象的proto指向函数的prototype

// 4. 函数默认返回该对象

作用域链和原型链

作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain，不简称sc）来保证对执行环境有权访问的变量和函数的有序访问。

简单来说外面的不能访问作用域里定义的变量，作用域里定义的变量可以访问上级作用域的变量。

原型链

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。原型链的末尾就是Object对象。