事关我对于前端面试题的收集--第三弹

331 阅读2分钟

“这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

写在前面:面试这么久,发现了自己的短板好大,尤其是关于JS方面,不管是原型方面还是异步方面,都有很大的提升空间,所以出来这一片文章,深入一下JS原型跟异步(并不全都相关),以及一些没答上来的面试题摘选.

事关我对于前端面试题的收集--第三弹

怎么自己写一个new函数

首先创建一个空的对象,空对象的__proto__属性指向构造函数的原型对象 把上面创建的空对象赋值构造函数内部的this,用构造函数内部的方法修改空对象 如果构造函数返回一个非基本类型的值,则返回这个值,否则上面创建的对象

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype);
    const result = fn.apply(obj, ...arg);
    return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
}

JS里面继承的几种方式

function Person(name){
    this.name = name;
    this.sayHi = function(){
        alert(this.name)
    }
}

原型链继承

重点:让新实例的原型等于父类的实例。

function Son(){
    this.name="Alice"
}
Son.prototype = new Person(); //子类的原型等于父类构造函数的实例,实现原型链继承
var son1 = new Son();
console.log(son1.age) //10

构造函数继承

就是新建一个父类构造函数的实例实现继承

function Person(name){
    var _this = this;
    _this.name = name;
    _this.sayHi = function(){
        alert(_this.name)
    }
} //特点:实现了属性的私有化,但是子类无法访问父类原型上的属性。

组合继承--组合原型链继承和借用构造函数继承(常用)

原型链继承和经典继承双剑合璧

function Person(name){
    this.name = name;
    this.colors = ['red','yellow','blue'];
}
Person.prototype.getName = function(){
    console.log(this.name)
}
function Child(name,age){
    Person.call(this,name);
    this.age = age;
}

Child.prototype = new Person();
Child.prototype.constructor = Child;

var child1 = new Child('Alice','21');

var child2 = new Child('Bob','23');

融合了原型链继承和构造函数继承的优点

寄生继承

创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象

function cerateObj(str){
    var clone = Object.create(str)
    clone.sayName = function(){
        conlose.log('hi')
    }
}

缺点:跟借用构造函数模式一样,每次创建对象都会创建一遍方法。

寄生组合式继承(常用)

你还知道哪些其他关于处理异步的方式

  • callback回调函数
  • 事件监听
  • Promise异步
  • async await函数

如何让a==1&&a==2&&a==3成立

  1. 数据劫持--Object.defineproperty
Object.defineProperty 监听当前对象某个属性的各种情况
    Object.defineProperty(window, 'a', {
      get: function () {
        this.value ? this.value++ : this.value = 1;
        return this.value;
      }
    });
    if (a == 1 && a == 2 && a == 3) {
      console.log('yes!')
    }
  1. 重写toString()或者Valueof()方法
window.onload = function(){
    var a = {
        i:1,
        toString:function(){
            console.log('toString')
            return a.i++;
        }
    }
}

web本地缓存能在两个页面里面进行通信吗

sessionStorage的生命周期是当前窗口或者标签页,而localStorage的生命周期是永久的,除非用户手动删除否则一直存在 因此可以推断:

sessionStorage不能跨页面进行通信,因为生命周期只是当前页面,而localStorage则是可以

End