javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js类继承

javascript类继承的实现方法

作者:Fogwind

JavaScript是一种面向对象的语言,而继承是面向对象编程的一个重要特性,在JavaScript中,继承的实现方式有多种,本文将介绍javascript类的继承的实现,感兴趣的朋友一起看看吧

首先需要知道两个概念:

下面的代码来自@better-scroll/core实现了类的继承。

// extendStatics函数的作用是实现类静态方法的继承,构造函数原型继承,最终结果是d可以访问b的属性和方法。
var extendStatics = function (d, b) {
    // Object.setPrototypeOf() 方法设置一个指定的对象的原型(即,内部 [[Prototype]] 属性)到另一个对象或 null。是Object.prototype.__proto__ 的替代
    extendStatics = Object.setPrototypeOf ||
        (
            // 这里的逻辑是:如果当前环境支持 __proto__关键字, 就用__proto__修改原型的指向
            {
                __proto__: []
            }
            // instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
            instanceof Array && function (d, b) {
                d.__proto__ = b; // 把d的原型指向b
            }
        ) ||
        /* 如果以上两者修改原型指向的方法都不支持那么手动将b上的属性添加到d上 */
        function (d, b) {
            for (var p in b) {
                // 如果p是对象b自身的属性,那么将属性p添加到对象d上
                if (Object.prototype.hasOwnProperty.call(b, p)) {
                    d[p] = b[p];
                }
            }
        };
    return extendStatics(d, b);
};
function __extends(d, b) {
    extendStatics(d, b);
    // 这里 __ 函数的作用是: 1. 保证d的构造函数指向正确;2.通过 __ 的实例实现继承;
    function __() {
        this.constructor = d;
    }
    __.prototype = b.prototype;
    //Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__
    // 如果b不是null, d.prototype = new __(); d.prototype.__proto__ = b.prototype;
    d.prototype = b === null ? Object.create(b) : new __();
}

对于__extends函数中的如下代码:

function __() {
    this.constructor = d;
}
__.prototype = b.prototype;
d.prototype = new __();

其实这段逻辑用Object.create()也能实现,用Object.create()实现后的__extends如下:

function __extends(d, b) {
    extendStatics(d, b);
    d.prototype = Object.create(b.prototype);
    d.prototype.constructor = d;
}

到此这篇关于javascript类的继承的实现的文章就介绍到这了,更多相关js类继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文