欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript中的圣杯模式继承

程序员文章站 2022-06-15 12:09:56
...

实现继承的方式有很多种,比如:通过原型链方式、call/apply方式、共享原型、圣杯模式实现继承。这里主要介绍圣杯模式。其主要思想是利用一个临时函数作为中间层以及原型链的方式实现继承。

        Origin.prototype.value = 'origin';
        function Origin() {
        }
        function Target() {
        }
        inherit(Target, Origin);
        var target = new Target();
        console.log(target.value, Target.prototype.constructor);

        function inherit(Target, Origin) {
            function F() { };
            F.prototype = Origin.prototype;
            Target.prototype = new F(); //Target.prototype.__proto__--->Origin.prototype
        }

执行上面的代码可以看到打印出了

origin ƒ Origin() {
        }

我们可以发现,target访问到了Origin.prototype上的属性,实现了继承,但是却发现Target.prototype.constructor却是Origin,所以我们来优化一下方法

//圣杯模式
        function inherit(Target, Origin) {
            function F() { };
            F.prototype = Origin.prototype;
            Target.prototype = new F(); //Target.prototype.__proto__--->Origin.prototype
            Target.prototype.constructor = Target;
            Target.prototype.uber = Origin.prototype;//让Target知道究竟继承自谁
        }

再来优化一下:

//利用立即执行函数以及闭包实现
var inherit = (function () {
            var F = function () { };
            return function (Target, Origin) {
                F.prototype = Origin.prototype;
                Target.prototype = new F();
                Target.prototype.constructor = Target;
                Target.prototype.uber = Origin.prototype;
            }
        }());