Introduction to JS inheritance

This article mainly introduces the introduction of JS inheritance, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

ClassA

• consists of two parts: the constructor and the prototype.

• Part of the constructor, each instance is independent.

• The prototype part is shared by each instance.

// 构造函数
function ClassA(sColor) {
    this.color = sColor;
}

// 原型
ClassA.prototype.sayColor = function () {
    alert(this.color);
};

Generate an instance

• Internal operation:

1. this points to a new { }, the __proto__ of this object points to ClassA.prototype.

2. Execute constructor ClassA.

3. Return the { } pointed to by this.

var a = new ClassA();

console.log(a.__proto__ === ClassA.prototype);
// a 的继承对象指向 ClassA
console.log(a.constructor === ClassA);

Inheritance of the prototype part

function ClassB() {
    // 实现继承 ClassA 构造函数部分的继承
}

ClassB.prototype = new ClassA();
// ClassB.prototype 指向新对象时，原有的 ClassB.constructor 属性会消失。
// new ClassA().hasOwnProperty('constructor') 为 false，新生成的对象无 constructor 属性。
// 在此修复这个问题。
ClassB.constructor = ClassB;
// 不过还存在 new ClassA().hasOwnProperty('color') 为 true 问题
// 实现继承 ClassA 构造函数部分的继承,生成的属性优先级比 new ClassA().color 高，顾可以忽略

Inheritance of the constructor part--object impersonation

1. Place ClassA When ClassB is introduced as a method, the two share this.

2. Execute constructor ClassA.

3. Delete the temporary introduction.

function ClassB(sColor) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

Inheritance of the constructor part--apply/call/bind

• It is a function implementation of object impersonation

• Bind this of ClassB to this of ClassA and execute the constructor ClassA.

function ClassB(sColor) {
    ClassA.call(this, sColor);
    // 以下两种方式效果一样，只是实现方式不同
    // ClassA.apply(this, [sColor]);
    // ClassA.bind(this, sColor)();
}

Inheritance

• Inheritance consists of two parts: constructor inheritance and prototype inheritance. You can choose any combination of inheritance methods.

• The attribute --constructor in the prototype of the constructor always points to the constructor itself. If it was modified during inheritance, please correct it at the end.

• Inheritance retains the original characteristics, so you can extend the new constructor or prototype properties after inheritance.

Inheritance of Date

// 需要考虑polyfill情况
Object.setPrototypeOf = Object.setPrototypeOf ||
    function(obj, proto) {
        obj.__proto__ = proto;
        return obj;
    };
/**
 * 用了点技巧的继承，实际上返回的是Date对象
 */
function MyDate() {
    // bind属于Function.prototype，接收的参数是：object, param1, params2...
    var dateInst = new(Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
    // 更改原型指向，否则无法调用MyDate原型上的方法
    // ES6方案中，这里就是[[prototype]]这个隐式原型对象，在没有标准以前就是__proto__
    Object.setPrototypeOf(dateInst, MyDate.prototype);
    dateInst.abc = 1;
    return dateInst;
}
// 原型重新指回Date，否则根本无法算是继承
Object.setPrototypeOf(MyDate.prototype, Date.prototype);
MyDate.prototype.getTest = function getTest() {
    return this.getTime();
};
let date = new MyDate();
// 正常输出，譬如1515638988725
console.log(date.getTest());

// 继承的重点语句
var dateInst = new(Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();
// 使用经典方法实现继承的时候，由于 Date 是内部对象，使用上有限制
// 提示 “this is not a Date object”
// 说明 Date 上的方法只能由 Date 的实例调用，它会识别内部的 [[class]]，浏览器无法修改。
// 所以想到了如下方案
var dateInst = new Date(...arguments);
// 能实现构造函数的只有 bind
var dateInst = new (Date.bind(null, ...arguments))();
// ES5下无法实现 ...，只能转成数组
[null].concat(Array.prototype.slice.call(arguments));
// 参数中带数组的只有 ayyly
var dateInst = new (Function.prototype.bind.apply(Date, [null].concat(Array.prototype.slice.call(arguments))))();

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Native JS writing Ajax request function function

The above is the detailed content of Introduction to JS inheritance. For more information, please follow other related articles on the PHP Chinese website!