20230508----重返学习-call()与bind()重写-JS中数据类型检测汇总-装箱与拆箱-类的多种继承方案

方朝端
93 阅读10分钟

day-065-sixty-five-20230508-call()与bind()重写-JS中数据类型检测汇总-装箱与拆箱-类的多种继承方案

call()与bind()重写

call()重写

  • call()的作用例子

    let obj = {
    name: '珠峰培训'
}
const fn = function fn(x, y, ev) {
    console.log(this, x, y, ev)
    return x + y
}
let res = fn.call(obj, 10, 20)
console.log(res)

  • 自定义call()基本原理

    let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};
// 需求：把fn执行，传递10、20，并且让函数中的this指向obj
/* //不行的操作
// console.log(fn(10, 20)) //this:window  x:10  y:20  ->30
// console.log(obj.fn(10, 20)) //Uncaught TypeError: obj.fn is not a function  obj此时和fn没有任何的关系，obj.fn->undefined 
*/
// call的基本原理
obj.fn = fn
console.log(obj.fn(10, 20))  //手动让obj和fn有关系

  • 自定义call()需求

    let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};
// 需求：把fn执行，传递10、20，并且让函数中的this指向obj
let res = fn.call(obj, 10, 20);
console.log(res);
res = fn.apply(obj, [10, 20]);
console.log(res);

  • fn.call()的处理步骤

    1. fn()这个函数，首先基于__proto__找到Function.prototype.call()这个方法

    2. 把找到的call()方法执行

      • call()内部可以访问到的值

        • this:fn
        • context:obj
        • params:[10,20]
      Function.prototype.call = function call(context, ...params) {
  // this:fn「需要改变this指向的函数」
  // context:obj「需要改变的this指向」
  // params:[10,20] 「需要传递给fn函数的实参」
  context.AAA = this; // obj.AAA = fn
  let result = context.AAA(...params); // obj.AAA(10,20)
  delete context.AAA; // delete obj.AAA
  return result;
};

    3. 而在call()方法内部：把fn()执行，把它里面的this改为obj，并且为其传递了10与20这些入参，接收它的返回值并作为call函数执行的返回值

  • 简洁初步版

    Function.prototype.call = function call(context, ...params) {
  // this:fn「需要改变this指向的函数」
  // context:obj「需要改变的this指向」
  // params:[10,20] 「需要传递给fn函数的实参」
  context.AAA = this; // obj.AAA = fn
  let result = context.AAA(...params); // obj.AAA(10,20)
  delete context.AAA; // delete obj.AAA
  return result;
};

  • 初步完善版

    Function.prototype.call = function call(context, ...params) {
  //如果context传递的是null/undefined，则让函数中的this指向window对象
  if (context == null){ context = window;} 

  //如果传递的context值是原始值类型，是无法为其设置成员的，此时我们需要把其转换为对象类型「非标准特殊对象」
  if (!/^(object|function)$/.test(typeof context)){ context = Object(context);} 

  let result,
    key = Symbol("KEY"); //保证给对象新增的成员不会和对象以往的成员有冲突
  context[key] = this;
  result = context[key](...params);
  delete context[key]; //临时设置的这个成员仅仅是为了把函数执行，可以改变其内部的this，用完后需要移除
  return result;
};

bind()重写

  • 需求

    let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};
// 需求：点击BODY执行fn，让fn中的this指向obj，传递给fn函数10/20，包括事件对象也作为最后一个参数传递给fn
/* //不行的操作：
// document.body.onclick = fn //点BODY才会执行fn -> this:document.body  x:事件对象  y:undefined
// document.body.onclick = fn.call(obj, 10, 20) //还不等到点击就把fn执行了，虽然this和参数都改了，但是ev事件对象没有，它相当于先把fn执行，把执行的结果“30”赋值给点击事件...
*/

  • bind基本原理

    let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};
// 需求：点击BODY执行fn，让fn中的this指向obj，传递给fn函数10/20，包括事件对象也作为最后一个参数传递给fn
document.body.onclick = function (ev) {
  // this:document.body  ev:事件对象
  // 在此函数执行的时候，再把我们真正需要执行的函数fn执行
  return fn.call(obj, 10, 20, ev);
};

    • 用bind解决

      let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};
// 需求：点击BODY执行fn，让fn中的this指向obj，传递给fn函数10/20，包括事件对象也作为最后一个参数传递给fn
document.body.onclick = fn.bind(obj, 10, 20);
/*
document.body.onclick = function anonymous(ev) { ... }
//当点击的时候，先把bind返回的匿名函数执行
*/

  • 简洁初步版

    Function.prototype.bind = function bind(context, ...params) {
    // this:fn  context:obj  params:[10,20]
    let self = this
    return function anonymous(ev) {
        // this:document.body  ev:事件对象
        // 目的：把fn执行，改变其this指向，并且传递一个个的实参
        params.push(ev)
        return self.call(context, ...params)
    }
}

    • 使用例子

      let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};

Function.prototype.bind = function bind(context, ...params) {
  // this:fn  context:obj  params:[10,20]
  let self = this;
  return function anonymous(ev) {
    // this:document.body  ev:事件对象
    // 目的：把fn执行，改变其this指向，并且传递一个个的实参
    params.push(ev);
    return self.call(context, ...params);
  };
};
document.body.onclick = fn.bind(obj, 10, 20);

  • 初步完善版

    Function.prototype.bind = function bind(context, ...params) {
  let self = this
  return function anonymous(...args) {
    return self.call(context, ...params.concat(args))
  }
}

    • 使用例子

      let obj = {
  name: "珠峰培训",
};
const fn = function fn(x, y, ev) {
  console.log(this, x, y, ev);
  return x + y;
};

Function.prototype.bind = function bind(context, ...params) {
  let self = this;
  return function anonymous(...args) {
    return self.call(context, ...params.concat(args));
  };
};
document.body.onclick = fn.bind(obj, 10, 20);

  • for-if版-最简基础版

    Function.prototype.bind = function bind(context, ...params) {
  let self = this
  return function anonymous(...args) {
    return self.call(context, ...params,...args)
  }
}

    const bind = function bind(callback, context, ...params) {
  let self = callback;
  return function anonymous(...args) {
    //return self.call(context, ...params,...args)//连call()也不用

    // 自己手动实现call()，用原生的可以替代，但为了最基础原理，直接集合在这。
    if (/^(object|function)$/.test(typeof context)) {
      context = window; //undefined//严格模式下
    }
    if (typeof context !== "object") {
      context = Object(context);
    }

    let key = Symbol("call-key");
    let hasProto = false;
    let theContextProto = Object.getPrototypeOf(context);
    if (typeof theContextProto === "object") {
      hasProto = true;
    } else {
      Object.setPrototypeOf(context,{});
    }
    theContextProto[key] = self;

    let res = context[key](...params, ...args);

    if (hasProto) {
      delete theContextProto[key];
    } else {
      Object.setPrototypeOf(context,null);
    }
    return res;
  };
};

Function.prototype.bind = function (context, ...params) {
  bind(this, context, ...params);
};

JS中数据类型检测汇总

  • JS中数据类型检测汇总

    1. typeof [value]

      • 返回值：首先是一个字符串，其次字符串中包含了对应的数据类型

        • number

        • object

        • function

        • …

        • 所以两个及两个以上的typeof所得的值必定为字符串string

          console.log(typeof typeof typeof [10, 20]) //"string"

      • 特点

        • typeof null //--> "object"

        • 不能细分对象：基于typeof检测对象的时候，除了函数会返回function，其余的都返回object。

        • 基于typrof检测一个未被声明的变量，不会报错，结果是undefined。

          • 不过暂时性死区除外，依旧会报错。

      • 原理

        • typeof在检测数据类型的时候，是按照数据值在计算机底层存储的二进制值，进行检测的！

          • 其中，如果二进制值的前三位是零，便都被识别为对象。

            • 然后再看此对象是否具备call方法，

              • 具备call方法则返回function，说明其是一个函数
              • 不具备的返回object，说明其是其它对象

          • 而null在计算机底层的二进制值都是零，也就是前三位也是零，所以 typeof null 的结果是 “object” ！

      • 应用

        • 检测除null之外的原始值类型

          • typeof用起来方便，而且性能还好

        • 判断兼容性

          • 查看如Promise是否存在

        • 笼统检测是否为对象

        • …

    2. 对象 instanceof 构造函数

      • 原本的意义是用来检测某个对象是否是相应类的实例

        • 只不过针对于这个特点，可以用其检测一些数据类型

          • 检测是否为数组：值 instanceof Array
          • 检测是否为正则：值 instanceof RegExp //RegExp是Regular Expressions的简写
          • …

        • 也就是基于instanceof，可以弥补typeof不能细分对象的缺陷!

      • 特点：

        • 无法检测原始值类型，返回结果都是false

          • 原因：基于instanceof进行操作，不会对原始值类型进行装箱

            • 10 instanceof Number -> false

        • 原本不是检测数据类型的，现在非要让其检测类型，所以检测的结果不一定精准

          const Fn = function Fn() {
  this.x = 10;
};
Fn.prototype = new Array();
Fn.prototype.name = "Fn";
let f = new Fn();
// f.__proto__ -> Fn.prototype -> Array.prototype -> Object.prototype
console.log(f instanceof Fn); //true
console.log(f instanceof Object); //true
console.log(f instanceof Array); //true//虽然也因为原型链的关系值是true，但f连length这个属性都没有，强行使用Array的方法可能会报错。
console.log(f instanceof RegExp); //false
console.log(f);

      • 原理：

        • 首先看 构造函数Ctor 是否具备Symbol.hasInstance这个属性

          • 具备：CtorSymbol.hasInstance

          • 不具备：依次查找对象的原型链__proto__,一直到Object.prototype，在此过程中，如果构造函数prototype出现在了其原型链的某个环节，则说明当前对象是此构造函数的一个实例，检测结果就是true!

            • 直接Symbol.hasInstance得用ES6中class类写法中的static关键字并在class中声明

              class Fn {
  constructor(name) {
    if (name) this.name = name;
  }
  // 设置其静态私有属性方法「这样重写会生效」
  static [Symbol.hasInstance](obj) {
    //这里可以针对一些特定属性进行检测，进而让符合条件的才表示是该构造函数类的实例。
    return obj.hasOwnProperty("name");
  }
}
let f1 = new Fn();
let f2 = new Fn("珠峰");
console.log(f1 instanceof Fn); //false   Fn[Symbol.hasInstance](f1)
console.log(f2 instanceof Fn); //true   Fn[Symbol.hasInstance](f2)

              • 直接用ES5的方法设置是不行的。

                // 正常情况下，直接这样重写 Symbol.hasInstance 是不会生效的
Array[Symbol.hasInstance] = function (obj) {
  console.log("AAA");
};
const Fn = function Fn() {};
Fn.prototype = new Array();
Fn.prototype.constructor = Fn;
let f = new Fn();
console.log(f);
console.log(f instanceof Array); //true  等价于 Array[Symbol.hasInstance](f)

        • 在支持ES6的浏览器中，Function.prototype上具备Symbol.hasInstance方法，所以只要是函数，也都具备这个方法!

          arr instanceof Array //--> Array[Symbol.hasInstance](arr)

          /*
_instanceof：对内置 instanceof 运算符的重写
  @params
    obj：要检测的对象
    Ctor：要被检测的构造函数
  @return
    布尔值
*/
const _instanceof = function _instanceof(obj, Ctor) {
  // 必须保证Ctor得是一个函数
  if (typeof Ctor !== "function") {
    throw new TypeError(`Right-hand side of 'instanceof' is not callable`);
  }
  // instanceof无法检测原始值类型
  if (obj == null || !/^(object|function)$/.test(typeof obj)) {
    return false;
  }
  // Ctor这个函数必须具备prototype
  if (!Ctor.prototype) {
    throw new TypeError(
      `Function has non-object prototype 'undefined' in instanceof check`
    );
  }

  if (Ctor[Symbol.hasInstance]) {
    // 具备 Symbol.hasInstance 的构造函数，则直接基于这个方法执行去进行校验即可
    return Ctor[Symbol.hasInstance](obj);
  }

  let proto = Object.getPrototypeOf(obj); //获取对象的原型链，类似于 obj.__proto__
  // 一直找，直到找到尽头为止
  while (proto) {
    if (proto === Ctor.prototype) return true; //在查找中，如果出现了Ctor.prototype，说明对象是此构造函数的一个实例，返回true即可
    proto = Object.getPrototypeOf(proto); // 获取其原型对象的原型链
  }
  return false; //都找完也没有符合条件的，说明对象不是此构造函数的一个实例，直接返回false
};
let arr = [10, 20];
console.log(_instanceof(arr, Array)); //true
console.log(_instanceof(arr, Object)); //true
console.log(_instanceof(arr, RegExp)); //false

    3. constructor

      • 获取对象的构造函数，从而判断是否是属于某一个数据类型。

        let arr = [10, 20];
console.log(arr.constructor === Array); //true
console.log(arr.constructor === Object); //false  如果一个对象的constructor等于Object，说明该对象的__proto__直接指向Object.prototype，也就是说明此对象是“标准普通对象”
console.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true

        • 可以检测基本数据类型。

          let num = 10;
console.log(num.constructor === Number); //true  支持原始值类型的检测，因为访问 constructor 属性的时候，原始值会默认的进行装箱

      • 只不过这种方式我们一般很少去使用。

        • 因为constructor值是可以被更改的。

          • 修改值的成本低，一但被更改，则检测结果是不准确的！比如可以设置一个私有属性叫constructor。

      • 不过这个可以让其与实例对象的原型上的constructor进行比较，进而让修改对象的成本变高，也更准确。

    4. Object.prototype.toString.call([value])

      • 不仅仅Object.prototype上有toString方法，在Number()/String()/Boolean()/Array()/Function()…等的原型对象上，也有toString方法。

        • 只不过其它原型上的toString方法都是用来转换为字符串的，只有Object.prototype.toString是用来检测数据类型的。

          let arr = [10, 20];
console.log(arr.toString()); //"10,20"  使用的是Array.prototype.toString
let obj = { x: 10, y: 20 };
console.log(obj.toString()); //"[object Object]" 使用的是Object.prototype.toString

      • 把Object.prototype上的toString方法执行，让方法中的this指向要检测的数据值，这样就可以返回此数据值的数据类型 -> "[object ?]"

        const toString = Object.prototype.toString;
let arr = [10, 20],
  obj = { x: 10, y: 20 };
console.log(toString.call(arr)); //"[object Array]"
console.log(toString.call(obj)); //"[object Object]"

        • 更简洁地使用

          let toString = Object.prototype.toString.call.bind(Object.prototype.toString)//不用call()来改指向this的指向了。
toString(String())//'[object Null]'

      • 特点：

        • 精准且强大

          • 唯一不足就是写起来麻烦一点，相比于typeof。

          • "[object ?]"中的?在一般情况下，就是检测值所属的构造函数。

            • 例子

              const toString = Object.prototype.toString
toString.call(null) //-> “[object Null]”  虽然Null不是构造函数，但是结果还是很准的
toString.call(undefined) //-> “[object Undefined]”
toString.call([]) //-> “[object Array]”
toString.call(/\d+/) //-> “[object RegExp]”
//...

            • 前提是内置的构造函数。

              function Fn() {}
let f = new Fn();
console.log(toString.call(f)); //"[object Object]"

          • 如果被检测的值具备Symbol.toStringTag这个属性，那么属性值是什么，最后检测结果"[object ?]"中的?就是什么。

            • 这个一般是自定义构造函数中来使用的，以便更像原始对象类型，可以让Object.toString()兼容。

              const toString = Object.prototype.toString;
function Fn() {}
Fn.prototype[Symbol.toStringTag] = "Fn";
let f = new Fn();
console.log(toString.call(f)); //"[object Fn]"

            • 在Promise.prototype上，具备Symbol.toStringTag这个属性，属性值是"Promise"。

              let p = new Promise(()=>{})
toString.call(p)// -> "[object Promise]"

        • 此办法虽然不错，但是也不是所有的数据类型检测都使用这个办法。

          • 一般来说：

            • 需要笼统地检测或者按照大的类别去检测，使用typeof会更方便。
            • 而需要很精准地检测的时候，使用toString会更好!

  • 快捷方法

    • isNaN 检测是否为有效数字
    • Array.isArray 检测是否为数组
    • …

  • 对象对象的笼统定义说明

    • 身上有键值对或理论上可以定义及设置、在保存之后依旧可以访问到的设置的键值对属性值的变量。

各种检测方法

  • 检测JavaScript内置的基础对象或包装对象的类型。

    // 检测JavaScript内置的基础对象或包装对象的类型。
const toString = Object.prototype.toString;

  • 检测是否为数组。

    // 检测是否为数组。
const isArray = Array.isArray;

  • 把函数转为字符串。

    // 把函数转为字符串。
const fnToString = Function.prototype.toString;

  • 万能检测数据类型的方法;

    // 检测JavaScript内置的基础对象或包装对象的类型。
const toString = Object.prototype.toString;
// 检测是否为数组。
const typeReg = /^(object|function)$/;

// 万能检测数据类型的方法;
//返回小写的入参的值类型字符串
const isType = function isType(obj) {
  if (obj === null || obj === undefined) {
    return obj + "";
  }

  let type = typeof obj;
  let reg = /^\[object (\w+)\]$/;
  let res = type;
  if (typeReg.test(type)) {
    res = reg.exec(toString.call(obj))[1].toLowerCase(); //对象类型;
  }
  return res;
};

  • 检测是否为对象。

    // 检测是否为对象
const isObject = function isObject(obj) {
  return obj !== null && typeReg.test(typeof obj);
};

  • 检测是否是window对象。

    // 检测是否是window对象
const isWindow = function isWindow(obj) {
  return obj != null && obj === obj.window;
};

  • 检测是否为函数。

    // 检测是否为函数
const isFunction = function isFunction(obj) {
  return typeof obj === "function";
};

  • 检测是否为数组或者伪数组。

    // 检测是否为数组。
const isArray = Array.isArray;
// 检测是否是window对象
const isWindow = function isWindow(obj) {
  return obj != null && obj === obj.window;
};

// 检测是否为函数
const isFunction = function isFunction(obj) {
  return typeof obj === "function";
};
// 检测是否为数组或者伪数组
const isArrayLike = function isArrayLike(obj) {
  if (isArray(obj)) return true;
  let length = !!obj && "length" in obj && obj.length;
  if (isFunction(obj) || isWindow(obj)) return false;
  return (
    length === 0 ||
    (typeof length === "number" && length > 0 && length - 1 in obj)
  );
};

  • 检测是否为一个纯粹的对象(标准普通对象)。

    // 检测JavaScript内置的基础对象或包装对象的类型。
const toString = Object.prototype.toString;
// 检测是否为数组。
const typeReg = /^(object|function)$/;

// 把函数转为字符串。
const fnToString = Function.prototype.toString;

// 检测是否为函数
const isFunction = function isFunction(obj) {
  return typeof obj === "function";
};
// 万能检测数据类型的方法;
//返回小写的入参的值类型字符串
const isType = function isType(obj) {
  if (obj === null || obj === undefined) {
    return obj + "";
  }

  let type = typeof obj;
  let reg = /^\[object (\w+)\]$/;
  let res = type;
  if (typeReg.test(type)) {
    res = reg.exec(toString.call(obj))[1].toLowerCase(); //对象类型;
  }
  return res;
};
// 检测是否为一个纯粹的对象(标准普通对象)
const isPlainObject = function isPlainObject(obj) {
  if (isType(obj) !== "object") {
    return false;
  }
  let proto, Ctor;
  proto = Object.getPrototypeOf(obj);
  if (!proto) {
    return true; //匹配 Object.create(null) 这种情况
  }
  Ctor = proto.hasOwnProperty("constructor") && proto.constructor;
  return (
    isFunction(Ctor) && fnToString.call(Ctor) === fnToString.call(Object)
  );
};

  • 检测是否为空对象。

    // 检测是否为对象
const isObject = function isObject(obj) {
  return obj !== null && typeReg.test(typeof obj);
};
// 检测是否为空对象
const isEmptyObject = function isEmptyObject(obj) {
  if (!isObject(obj)) {
    throw new TypeError(`obj is not an object`);
  }
  let keys = Reflect.ownKeys(obj);
  return keys.length === 0;
};

  • 检测是否为有效数字。

    // 检测JavaScript内置的基础对象或包装对象的类型。
const toString = Object.prototype.toString;
// 检测是否为数组。
const typeReg = /^(object|function)$/;

// 万能检测数据类型的方法;
//返回小写的入参的值类型字符串
const isType = function isType(obj) {
  if (obj === null || obj === undefined) {
    return obj + "";
  }

  let type = typeof obj;
  let reg = /^\[object (\w+)\]$/;
  let res = type;
  if (typeReg.test(type)) {
    res = reg.exec(toString.call(obj))[1].toLowerCase(); //对象类型;
  }
  return res;
};
// 检测是否为有效数字
const isNumeric = function isNumeric(obj) {
  let type = isType(obj);
  return (type === "number" || type === "string") && !isNaN(+obj);
};

装箱与拆箱

let num = 10 //原始值类型
console.log(num.toFixed(2)) //"10.00"  默认进行了“装箱”操作（把原始值转换为对象）num->Object(num)
let num2 = new Number(10) //对象类型
console.log(num2 + 10) //20  默认进行了“拆箱”操作（把对象转换为原始值）num2[Symbol.toPrimitive] -> num2['valueOf']()

  • 把原始值变成对象类型，就是装箱操作

    • 比如对原始值变量调用包装类的方法，(10).toFixed(2)//'10.00'

  • 把对象类型变成原始值，就是拆箱操作

    • 比如：数学运算，Number(10) + 10//20

类的多种继承方案

  • 类的多种继承方案

多态

  • 多态：一个函数的多种形态

    • 相同的方法名，但是因为 参数个数、类型、返回值类型 等不同，构建出了多个不同作用的同名方法。

      • 是因为后端很多请求，都调用同一个方法的话，会导致某个方法的压力比较大

    • 前端JS中是没有类似于后台这样的多态处理的

      • 因为前端大多是客户端由客户来操作，客户一个人的压力而已。

      • 前端多态：同一个函数，根据传参不同，在函数中做不同的事情

        • 压力可以用模块来分担。

  • 后端多态

    public  void  sum(int x,int y){
  //.....
} 
public  String  sum(int x,int y,boolean flag){
  //.....
} 
sum(10,20)
sum(10,20,true)

  • 前端多态

    function sum(x,y,flag){
  //....
}
//前端多态：同一个函数，根据传参不同，我们在函数中做不同的事情

继承

  • 继承的目的：让子类的实例，除了具备子类提供的属性方法，还要具备父类提供的属性和方法。

  • 实现继承的方案：

    1. 原型继承

      • 让子类的原型对象指向父类的一个实例。

        Child.prototype = new Parent()
//子类构造函数.prototype=父类构造函数

      • 问题：

        • 父类提供的属性和方法，全部都成为子类实例公有属性和方法。

          • 一般想要的是：父类公有的变成子类公有的。父类私有的变成子类私有的。

        • 子类的原型对象被重定向后，丢失了constructor属性。

          • 可以手动加上，用以弥补。

            Child.prototype.constructor=Child
//子类构造函数.prototype.constructor=子类构造函数

      • 特点

        • 原型继承并不是拷贝式继承，也就是，并不是把父亲的东西copy一份给儿子，而是让儿子基于原型链，找到父亲的方法，再去使用。

          • 拷贝式继承就是把父亲的东西copy一份给儿子，之后就是儿子的东西了。

            • 儿子怎么改动这些属性与方法都与父亲关系不大。

          • 原型继承是非拷贝式继承，这样就存在一个隐患：

            • 如果儿子基于原型链，把父亲原型上的方法改了，这样对父亲的其它实例也有影响。

              • 原则上，子类修改了自己能修改的属性或方法后，一定不会影响到父类或其它实例。
      // 父类
function Parent() {
  this.x = 10;
  this.y = 20;
}
Parent.prototype.sum = function sum() {
  return this.x + this.y;
};

// 子类
function Child() {
  this.x = 100;
  this.z = 300;
}
Child.prototype=new Parent()
Child.prototype.constructor=Child
Child.prototype.minus = function minus() {
  return this.z - this.x;
};

let c=new Child()
console.log(`c-->`, c);

    2. call继承

      • 把父类当做普通函数执行，让函数中的this指向子类的实例

      • 问题：

        • 仅仅实现了把父类私有的属性继承给了子类实例的私有属性

          • 有冲突，则以子类为主
          • 但是父类公有的方法并没有被子类实例继承过去！

      • 特点

        • 它是拷贝式继承。
      // 父类
function Parent() {
  this.x = 10;
  this.y = 20;
}
Parent.prototype.sum = function sum() {
  return this.x + this.y;
};

// 子类
function Child() {
  Parent.call(this)//this:子类的实例c
  this.x = 100;
  this.z = 300;
}

Child.prototype.minus = function minus() {
  return this.z - this.x;
};

let c=new Child()
console.log(`c-->`, c);

    3. 寄生组合式继承

      • 把call继承和变异版原型继承混合在一起
      • 基于这样的方案，就实现了：父亲私有的给了儿子私有的，父亲公有的给了儿子公有
      // 父类
function Parent() {
  this.x = 10;
  this.y = 20;
}
Parent.prototype.sum = function sum() {
  return this.x + this.y;
};

// 子类
function Child() {
  Parent.call(this)//call继承部分：拷贝式继承
  this.x = 100;
  this.z = 300;
}
//原型继承部分：非拷贝式继承
Child.prototype= Object.create(Parent.prototype)
Child.prototype.constructor=Child
Child.prototype.minus = function minus() {
  return this.z - this.x;
};

let c=new Child()
console.log(`c-->`, c);

    4. 基于ES6中的class创建类，其自带了继承方案

      • 原理类似于寄生组合式继承

进阶参考

avatar
文章
阅读
粉丝