前端整理 —— javascript 2

1. es5 实现继承

【 常用继承方式使用组合式继承、寄生式组合继承,具体场景具体使用 】

  1. 通过原型链继承:

    • 就是让对象实例通过原型链的方式串联起来,当访问目标对象的某一属性时,能顺着原型链进行查找,从而达到类似继承的效果,让子类的构造函数的原型对象指向父类的实例对象
    • 存在缺陷:
      • 在创建子类实例的时候,不能向父类的构造函数中传递参数
      • 原型中包含的引用值会在所有实例之间共享,修改一个实例,另一个实例会跟着修改
        (不同子类实例,修改的同一个父类实例的值)
    function Father() {
        this.colors = ['red', 'blue', 'green']
    }
    
    function Son() { }
    Son.prototype = new Father()
    
    let instance1 = new Son()
    instance1.colors.push('black')
    console.log(instance1.colors)  // "red,blue,green,black"
    
    let instance2 = new Son()
    console.log(instance2.colors)  // "red,blue,green,black"
    
  2. 借用构造函数继承:

    • 利用 call 调用父构造函数,且让 this 指向子构造函数
    • 存在缺陷:
      • 子类不能访问父类原型上定义的方法,所以必须在父构造函数中定义方法,因此函数不能复用
    function Father(num) {
        this.num = num;
    }
    Father.prototype.test = function() {
        console.log(111);
    }
    
    function Son(num) {
        Father.call(this, num);
        this.n = num;
    }
    
    let instance = new Son(123)
    console.log(instance.n)  // 123
    console.log(instance.num)  // 123
    console.log(instance.test()) // instance.test is not a function
    
  3. 组合继承:

    • 通过原型链继承来继承方法,借用构造函数继承来继承属性,这样函数可以复用,且子实例进行修改时,不会相互影响
    • 存在缺陷:
      • 组合式继承存在效率问题,父类构造函数会被调用两次,第一次在创建子类原型,第二次在子类构造函数中调用
      • 最终导致子类原型包含父类所有的实例属性,浪费空间(因为属性在子实例上,方法在原型链上,所以子构造函数的原型对象不需要包含父类属性)
    function Father(name) {
       this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    Father.prototype.sayName = function () {
        console.log(this.name);
    };
    
    function Son(name, age) {
        Father.call(this, name); // 第二次调用 Father()
        this.age = age;
    }
    Son.prototype = new Father(); // 第一次调用 Father()
    subType.prototype.constructor = subType;
    Son.prototype.sayAge = function () {
        console.log(this.age);
    };
    
    let instance1 = new Son("Nicholas", 29);
    instance1.colors.push("black");
    console.log(instance1.colors); // "red,blue,green,black"
    instance1.sayName(); // "Nicholas";
    instance1.sayAge(); // 29
    
    let instance2 = new Son("Greg", 27);
    console.log(instance2.colors); // "red,blue,green"
    instance2.sayName(); // "Greg";
    instance2.sayAge(); // 27
    
  4. 原型式继承:

    • 在object()函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。从本质上讲,object()对传入其中的对象执行了一次浅复制
      【 新对象将 person 作为原型,所以它的原型中就包含一个基本类型值属性 name 和一个引用类型值属性 friends。这意味着 person.friends不仅仅属于 person 所有,而且也会被 anotherPerson 以及 yetAnotherPerson 共享。实际上,这就相当于又创建了 person 对象的两个副本 】
    • 存在缺陷:
      • 属性中包含的引用数值,会在对象之间共享,与原型链继承中引用数值会共享类似
    function object(o) {
       function F() { }
        F.prototype = o
        return new F()
    }
    
    let person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    
    let anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");
    
    let yetAnotherPerson = object(person);
    yetAnotherPerson.name = "Linda";
    yetAnotherPerson.friends.push("Barbie");
    
    console.log(person.name); // "Nicholas"
    console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie"
    
  5. 寄生式继承:

    • 将 object 封装,在函数中以某种方式增强这个继承后的对象
    • 存在缺陷:给对象添加函数会导致函数难以重用,与构造函数模式类似
    function object(o) {
       	function F() { }
        F.prototype = o
        return new F()
    }
    
    function createAnother(original, sex) {
        let clone = object(original); // 通过调用函数创建一个新对象
        clone.sex = sex;
        clone.sayHi = function () { // 以某种方式增强这个对象
            console.log("hi");
        };
        return clone; // 返回这个对象
    }
    
    let person = {
        name: "Nicholas",
        friends: ["Shelby", "Court", "Van"]
    };
    
    let anotherPerson = createAnother(person, "famle");
    console.log(anotherPerson.sex); // "famle"
    anotherPerson.sayHi(); // "hi"
    
  6. 寄生式组合继承:

    • 寄生组合继承的模式是现在业内公认的比较可靠的 JS 继承模式,ES6 的 class 继承在 babel 转义后,底层也是使用的寄生组合继承的方式实现的
    • 解决了上述几个方法的问题:
      • 继承属性,靠的是借用构造函数继承,修改不会影响其他子实例
      • 继承方法,指向一个 “空” 的构造函数的实例,这个空的构造函数的原型指向父构造函数的原型
        【 就是在这里,优化了 “父类构造函数会被调用两次” 这个问题,不通过指向 new 父构造函数,间接让父构造函数的原型在原型链上,而是想直接指向。但为了让子实例可以加私有方法,所以 new 一个空构造函数,让这个空构造函数指向父构造函数的原型,这样就避免了 new 父构造函数时,重复运行父类构造函数 】
    // 实现继承的核心函数
    function inheritPrototype(subType, superType) {
        function F() {};
        //F()的原型指向的是superType
        F.prototype = superType.prototype; 
        //subType的原型指向的是F()
        subType.prototype = new F(); 
        // 重新将构造函数指向自己,修正构造函数
        subType.prototype.constructor = subType; 
    }
    
    // 设置父类
    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
        SuperType.prototype.sayName = function () {
            console.log(this.name)
        }
    }
    
    // 设置子类
    function SubType(name, age) {
        //构造函数式继承--子类构造函数中执行父类构造函数
        SuperType.call(this, name); // 只在这里运行了一次父类构造函数
        this.age = age;
    }
    
    // 核心:因为是对父类原型的复制,所以不包含父类的构造函数,也就不会调用两次父类的构造函数造成浪费
    inheritPrototype(SubType, SuperType)
    
    // 添加子类私有方法
    SubType.prototype.sayAge = function () {
        console.log(this.age);
    }
    
    var instance = new SubType("Taec", 18)
    console.dir(instance)
    

2. es5 实现箭头函数

其实就是拿个变量保存上下文的 this(通常用 _this)

ES6 function foo() { 
    setTimeout(() => { 
        console.log('id:', this.id); 
    }, 100); 
  } 

ES5 function foo() { 
    var _this = this; 
    setTimeout(function () { 
        console.log('id:', _this.id); 
    }, 100); 
}

3. == 和 ===

  • ==

    • 用来进行一般比较检测两个操作数是否相等,可以允许进行类型转换

    • 规则 1:NaN 和其他任何类型比较永远返回 false(包括和他自己)

    • 规则 2:Boolean 和其他任何类型比较,Boolean 首先被转换为 Number 类型

    • 规则 3:String 和 Number比较,先将 String 转换为 Number 类型

    • 规则 4:null == undefined 比较结果是 true,除此之外,null,undefined 和其他任何结果的比较值都为 false

      • 特殊规则,并不是转换为 Number 类型
        Number(null); // 0
        Number(undefined); // NaN
        
    • 规则 5:原始类型和引用类型做比较时,引用类型会依照 ToPrimitive 规则转换为原始类型

      • ToPrimitive 规则,是引用类型向原始类型转变的规则,它遵循先 valueOf 后 toString 的模式期望得到一个原始类型
      • 如果还是没法得到一个原始类型,就会抛出 TypeError
    • [ ] == ! [ ]

      第一步,! [ ] 会变成 false
      第二步,应用 规则2 ,题目变成: [ ] == 0
      第三步,应用 规则5 ,[ ] 的 valueOf 是 0,题目变成: 0 == 0
      所以, 答案是 true

    • [ undefined ] == false

      第一步,应用 规则5 ,[ undefined ] 通过 toString 变成 ‘’,
      题目变成 ‘’ == false
      第二步,应用 规则 2 ,题目变成 ‘’ == 0
      第三步,应用 规则 3 ,题目变成 0 == 0
      所以, 答案是 true
      但是 if( [ undefined ] ) 又是个 true

  • ===

    • 用于严格比较,只要类型不匹配就返回flase
    • null === null 和 undefined === undefined 都是返回 true
      (虽然显而易见,但我在被面试官追问的时候,说了为 false,细节掌握的不自信了)
  • 但是对于 Array,Object 等高级类型之间比较,== 和 === 是没有区别的

4. js 数据类型

es5 的时候,是 number,string,boolean,object,null,undefined
es6 的时候新增 symbol
es10 的时候新增 bigint

基本类型:number,string,boolean,null,undefined,symbol,bigint
引用类型:object (但这个时候并不是等着你只说 object,我就翻过车 )

引用类型包括 Object 类型,Array 类型,Function 类型,Map 类型,WeakMap 类型,WeakSet 类型,Set 类型,RegExp 类型等等

5. 深拷贝

(深拷贝需考虑特殊情况,undefined,function,symbol,相互引用)

  • 通过 JSON.parse(JSON.stringify(obj))
    • 但这种方式有局限性,当值为 undefined,symbol,Function 会在转换过程中被忽略
    • 如果被拷贝的对象中,存在 bigint,会报错
    • 如果被拷贝的对象中,存在循环引用的时候,会报错
      let obj = { }
      obj.a = obj
      JSON.parse(JSON.stringify(obj)) // 会报错
      
    • 如果 obj 里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变成了字符串
    • 如果 obj 里有 Set,Map,RegExp,Error 对象,则序列化的结果将只得到空对象,如果直接 JSON.parse(JSON.stringify( )) 这些对象的时候,得到的也只是空对象,但是可以拷贝 Array 数组
    • 如果 obj 里有 NaN、Infinity 和 -Infinity,则序列化的结果会变成 null
    • 不能拷贝函数,JSON.stringify(function) 为 undefined
  • 所以还得自己实现递归函数进行深拷贝
    • 先考虑各种特殊情况
      • 拷贝函数
        function fn(a, b, c) {
        	return a * b * c;
        }
        
        // 方式 1,很多函数库都是用这个方法
        var newFn = new Function('return ' + fn.toString())();
        
        // 方式 2,利用 bind 返回函数,如果 bind 没有参数,或者传入的为 null,则指向 window
        var newFn = fn.prototype.bind();
        
      • 拷贝 symbol
        // 方法 1,返回对象身上全部 symbol 类型组成的数组
        Object.getOwnPropertySymbols(…)
        
        // 方法 2, 获取所有的键,同时包括 Symbol,但不会获取深拷贝原型链上的数据
        Reflect.ownKeys(…)
        
      • 解决循环引用
        • 用 map 存各个值或引用,如果碰到重复,直接返回引用

你可能感兴趣的:(前端整理,javascript,前端,原型模式)