手写JavaScript：继承、拷贝、instanceOf

继承

继承目前有八种以上的方式实现：原型链继承、构造函数继承、组合继承、寄生式、组合寄生式继承、ES6类继承extends等等。

组合寄生式继承：最成熟和完美的继承方式，解决了组合式两次调用父类的构造函数造成浪费的缺点。组合式继承还有个问题，子类不是父类的实例，而子类的原型是父类的实例。寄生式继承依托于原型继承，寄生就像虫子一样，依托于某个对象，在其内部生长（添加新方法和属性），它是对原型继承的第二次封装。

思路：我们通过原型继承拿到父类的副本，但还不能直接赋值给子类，因为父类原型对象复制得到的副本中constructor指向不是子类对象，所以在寄生式继承中对这个副本做一次增强，修复其constructor属性指向不明确的问题，最后得到的副本赋值给子类的原型。

核心代码

function inheritPrototype(subType, superType){
// 创建对象，创建父类原型的一个副本
  var prototype = Object.create(superType.prototype); 
// 增强对象，弥补因重写子类原型而失去的默认的constructor属性
  prototype.constructor = subType;    
// 指定对象，将新创建的对象赋值给子类的原型                
  subType.prototype = prototype;                      
}

继承实例

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 定义子类，借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function SubType(name, age){
  //构造函数式继承
  SuperType.call(this, name);
  //子类新增属性
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型方法
SubType.prototype.sayAge = function(){
  alert(this.age);
}
//测试
var instance1 = new SubType("xyc", 23);
var instance2 = new SubType("lxy", 23);

instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]

拷贝

参考文章: js 深拷贝vs浅拷贝

数据类型的赋值

基本类型

基本数据类型存放在栈中（系统自动分配和释放内存）
基本数据类型的值不可改变，动态改变返回的是一个新的变量
基本类型的比较，是值的比较

引用类型

引用类型存放在堆中（内存不会自动释放），变量实际上是一个指向存放在栈内存的指针
引用类型的值可以改变
引用类型比较是引用的比较（指针指向相同）

赋值和拷贝的区别

深拷贝：将 B 对象拷贝到 A 对象中，包括 B 里面的子对象，

浅拷贝：将 B 对象拷贝到 A 对象中，但不包括 B 里面的子对象

赋值和拷贝对比

浅拷贝核心代码

function shallowCopy(src) {
  var dst = {};
    for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
            dst[prop] = src[prop];
        }
    }
    return dst;
}

深拷贝核心代码

乞丐版
《你不知道的JavaScript（上）》中提及：
对于JSON安全（也就是可以被序列化为一个JSON字符串并且可以根据这个字符串解析出一个结构和值完全一样的对象）的对象来说，有一种巧妙的复制方法，代码如下：

var newObj = JSON.parse(JSON.stringify(someObj));

这种方法要保证对象是JSON安全的，所以只适用于部分情况。

完美版
思路：遇到简单类型，直接复制return；遇到复杂类型，赋值简单类型，递归遍历子复杂类型。

function deepCopy(obj){
    //判断是否是简单数据类型
    if(typeof obj == 'object'){
    //复杂数据类型
    var result = obj.constructor == Array ? [] : {};
        for(let i in obj){
        //若是对象，就是result[属性名]；若是数组，就是result[下标]
        result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    }
    else{
    //简单数据类型
        var result = obj;
    }
    return result;
}

instanceOf

思路是顺着原型链一直找，直到null

function instanceOf(left,right){
    let proto = left.__proto__;
    let prototype = right.prototype;
    while(true) {
        if(proto === null) return false
        if(proto === prototype) return true
        proto = proto.__proto__;
    }
}

最后编辑于：2019.11.21 11:05:45