当前位置： 文江博客话题详情

（开源）JavaScript 原型 OO 示例

发布于 2024-11-18 00:34:27 字数 1273 浏览 4 评论 0原文

赏金编辑：

我正在寻找以纯粹原型OO范例（想想Self）编写的代码。不是原型面向对象和经典面向对象的混合体。我不想看到通用的 OO 包装器，而只想看到典型的 OO 技术的使用，并且仅原型的 OO 技术。

参考相关问题：

JavaScript 中的原型 OO

在上面的问题中，我主要集中于

可以这样编写原型 OO 吗？

我们需要构造函数和初始化逻辑吗？有哪些替代方案？

新问题：

基本上在大型开源项目中是否有任何javascript原型面向对象的好例子？

澄清：

我必须澄清我对原型面向对象的含义：

  • 没有类。只有对象。
  • 对类概念的模拟零，同样只有对象和克隆对象来创建新对象。

进一步澄清原型 OO：

JavaScript 中的原型 OO 和经典 OO 模拟之间的差异是一个非常灰色的区域。这并不是说我重视避免经典的面向对象。我想以学术方式学习原型 OO，而不是学习经典 OO 模拟和原型 OO 的（可能更优化）组合。

这就是为什么我“禁止”类，只是为了我可以以纯粹的方式看到这些技术并扩展我自己的 OO 工具包。

示例：

像 jQuery 这样的流行示例无法满足第二个标准。 jQuery 对象是一个大的类模拟。它专注于从类创建新对象，而不是克隆现有对象。

如果我真的知道任何使用“纯粹”原型面向对象的示例，我就会向您展示。我相信 99% 的 JavaScript OO 都受到经典模拟的严重影响。

奖励分

如果

  • 它有很好的注释/记录
  • 有单元测试
  • 在 github 上。

我还将接受有关如何编写超越简单的 hello world 应用程序的原型 OO 代码的文章/教程和示例。

原文

Bounty Edit:

I'm looking for code written in a pure prototypical OO paradigm (think Self). Not a mixture of prototypical OO and classical OO. I don't want to see generic OO wrappers but simply usage of prototypical OO techniques and only prototypical OO techniques.

Reference Related Question:

Prototypical OO in JavaScript

In the above question I mainly focused on

Can write prototypical OO like this?

Do we need constructors and initialization logic, What are the alternatives?

New question:

Basically are there any good examples of javascript prototypical OO in large open source projects?

Clarification:

I will have to clarify what I mean with prototypical OO :

  • There are no classes. There are only Objects.
  • There is zero emulation of the concepts of classes, again there is only objects and cloning objects to create new objects.

Further Clarification of Prototypical OO:

The difference between prototypical OO in JavaScript and classical OO emulation is a very grey area. It's not that I value avoiding classical OO. I want to learn prototypical OO in an academic fashion in it's own right, without learning the (probably more optimum) combination of classical OO emulation and prototypical OO.

This is why I "ban" classes, just so that I can see these techniques in a pure fashion and extend my own OO tool kit.

Examples:

Popular examples like jQuery fail to meet the second criteria. The jQuery object is one big class emulation. It focuses on creating new objects from a class rather then cloning existing objects.

If I actually knew any example of using "pure" prototypical OO I would have shown you. I believe 99% of JavaScript OO is too heavily influenced by classical emulation.

Bonus points

If

  • It's well comented / documented
  • Has unit tests
  • Is on github.

I will also accept articles / tutorials and examples on how to write prototypical OO code that goes beyond your trivial hello world application.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

假情假意假温柔 2024-11-25 00:34:27

你不会找到它。

我不久前就在寻找这类东西，这就是我发现的： 自述文件组织没有课程的程序（看看Citeseer PDF 版本。）本文讨论了最佳实践对于Self，原始的原型语言，最佳实践是使用“traits object idiom”，即让你的对象继承自“traits object”仅包含方法，不包含对象特定数据。换句话说，一个可疑地像类的对象。

甚至原始的原型语言也模拟类。

You will not find it.

I went looking for this sort of thing a while ago, and this is what I found: the Self Paper Organizing Programs Without Classes (Look at Citeseer for a PDF version.) This paper discusses the best practices for Self, the original prototypal language, and the best practice is to use the "traits object idiom", which is to have your objects inherit from "traits objects" that contain only methods, and no object specific data. In other words, an object that is suspiciously like a class.

Even the original prototypal language emulates classes.

回复 原文
梦罢 2024-11-25 00:34:27

你看过 OMeta/JS 吗？ OMeta是一种基于Smalltalk和Self的实验性研究模式匹配语言。 OMeta/JS 是使用原型 OO 的 javascript 实现。

它有很好的评论和记录，有很多例子。它也在 Github 上。

http://tinlizzie.org/ometa-js/

https://github.com/alexwarth/ometa-js

编辑：OMeta 是 Alexander Warth 博士论文的成果。

Have you taken a look at OMeta/JS? OMeta is an experimental research pattern matching language based on Smalltalk and Self. OMeta/JS is an implementation in javascript using prototypical OO.

It is well commented and documented with many examples. It is also on Github.

http://tinlizzie.org/ometa-js/

https://github.com/alexwarth/ometa-js

Edit: OMeta is the result of Alexander Warth's PhD disertation.

回复 原文
可爱暴击 2024-11-25 00:34:27

我不太确定您在寻找什么，但我当前的框架允许您以面向对象的方式进行编程，如下所示：

Cin.define({
    name: 'MyApp.Logger',
    extends: 'Cin.Component',
    implements: ['MyApp.ILogger'],
    mixes: {
        SomeMixin: 'MyApp.SomeMixin'
    },

    init: function() {
    },

    method: function() {
    },

    statics: {
        staticMethod: function() {}
    }
});

然后您可以编写如下代码：

var instance = new MyApp.Logger();
instance.method();

MyApp.Logger.staticMethod();

我在这里不尝试模拟经典的面向对象。我试图提供一种方便且有用的方法来声明继承、混合、接口和通用 OO 概念，以便开发人员可以轻松编写此类 OO 代码。这也让我有机会完成我的自动加载组件，这样您就不再需要处理依赖项，并且可以进行自定义构建并享受更快的开发，因为不需要每次页面加载加载 100 个脚本。

如果你想学习原型的 OO 概念，我认为你应该编写某种继承系统。查看 Dojo Toolkit 或 ExtJS。需要记住的一件好事是，基于原型的系统扭曲和破坏，它们比基于类的 OO 语言更强大。在我看来，编写原型代码没有唯一正确的方法。

但我担心大多数（如果不是全部）继承系统可能看起来都在模仿经典的面向对象。在我看来，我的框架没有，但它甚至还没有完成。

I'm not exactly sure what you are looking for, but my current framework allows you to program in OO fashion like so:

Cin.define({
    name: 'MyApp.Logger',
    extends: 'Cin.Component',
    implements: ['MyApp.ILogger'],
    mixes: {
        SomeMixin: 'MyApp.SomeMixin'
    },

    init: function() {
    },

    method: function() {
    },

    statics: {
        staticMethod: function() {}
    }
});

And then you can write code like:

var instance = new MyApp.Logger();
instance.method();

MyApp.Logger.staticMethod();

I am not trying to emulate classical OO here. I am trying to make a convenient and useful way to declare inheritance, mixins, interfaces, and general OO concepts so that it becomes easy for the developer to write such OO code. This also gives me the chance to finish my auto loading component so that you no longer take care of dependencies and you can make custom builds and enjoy faster development thanks to not needing to load 100 scripts per each page load.

If you want to learn prototypical OO concepts, I think you should write some kind of inheritance system. Take a look at Dojo Toolkit or ExtJS. A good thing to remember is that Prototype-based systems twist and mangle, they are more powerful than Class-based OO languages. In my opinion, there is no single right way to write prototypal code.

I'm afraid though that most if not all inheritance systems might look like they emulate classical OO. In my opinion, my framework does not, but then it's not even finished.

回复 原文
变身佩奇 2024-11-25 00:34:27

可能是 JSLint （Crockford 是原型继承的支持者，但我还没有仔细梳理它的每一寸）。它看起来也比面向对象更实用，但我预计真正拥抱原型继承的代码通常就是这种情况。

Probably JSLint (Crockford's a proponent of prototypical inheritance, but I haven't combed through every inch of it). It's also looks more functional than Object Oriented, but then I expect that's generally the case with code that truly embraces prototypical inheritance.

回复 原文
壹場煙雨 2024-11-25 00:34:27

在我的框架中，一切都是对象或“接口”。

接口定义了对象可能具有的通用函数（方法/property_gets/property_sets）。

您可以像这样创建一个接口： var some_interface = GetInterface(constructor, interface_setup,parent_interface..)

您可以指定任意数量的parent_interface。因此，如果interface_A同时继承interface_B和interface_C，则可以按如下方式创建interface_A：GetInterface(constructor,interface_setup,interface_B,interface_C) ;

如果interface_A继承interface_X并且interface_X继承interface_Y，则interface_A将具有interface_X和interface_Y所具有的所有功能。

不需要构造函数的接口会将构造函数参数保留为 null。 interface_setup 是一个如下所示的函数：

function(proto){
}

proto 参数指向的对象有 4 个方法：SetM、ShadowM、SetP 和 ShadowP。

您可以使用这 4 种方法设置您的界面。

该框架还提供接口的延迟实例化。 （换句话说，安装代码在实际第一次需要之前永远不会真正运行）。

该框架的局限性至少需要支持 Object.keys、Object.getOwnPropertyDescriptor 和 Object.defineProperty。 （换句话说，它适用于最新版本的 FireFox、IE、Chrome、Safari，但不适用于 Opera）

TestPage2.html:

<!doctype html>
<script src="js.js"></script>
<script>
var human = GetInterface(function(){
},function(proto){
    //alert("trace: initing human");
    proto.$SetM("Sleep",function(){
        alert(this.Name+" is sleeping");
    });
    proto.$SetP("Name",function(){
        return this._name;
    },function(value){
        this._name=value;
    });
});

var female = GetInterface(function(){
},function(proto){
    //alert("trace: initing female");
    proto.$SetM("Dance",function(){
        alert(this.Name+" is dancing");
    });
},human);

var male = GetInterface(function(){
},function(proto){
    //alert("trace: initing male");
    proto.$SetM("Fight",function(){
        alert(this.Name+" is fighting");
    });
    proto.$ShadowP("Name",function(parent_get){
        return "Mr. "+parent_get();
    },function(parent_set,value){
        parent_set(value);
    });
},human);

var child = GetInterface(function(){
},function(proto){
    //alert("trace: initing child");
    proto.$SetM("Play",function(){
        alert(this.Name+" is playing");
    });
},human);

var adult = GetInterface(function(){
},function(proto){
    //alert("trace: initing adult");
    proto.$SetM("Work",function(){
        alert(this.Name+" is working");
    });
},human);

var mammal = GetInterface(function(){
},function(proto){
    //alert("trace: initing mammal");
    proto.$SetM("DoMammalStuff",function(){
        alert("doing mammal stuff");
    });
});


var john=new male();
john.Name="john";
john.Sleep();

var mary=new female();
mary.$IsA(child);
mary.$IsA(mammal);
mary.$Setup(function(proto){
    proto.$ShadowP("Name",function(parent_get){
        return "Miss "+parent_get.call(this);
    },function(parent_set,value){
        parent_set.call(this,value);
    });
});
mary.Name="mary";
mary.Play();
</script>

TestPage.html:

 <!doctype html>
<script src="js.js"></script>
<script>
var human_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing human");
    proto.$SetM("Sleep",function(){
        alert(this.Name+" is sleeping");
    });
    proto.$SetP("Name",function(){
        return this._name;
    },function(value){
        this._name=value;
    });
});

var female_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing female");
    proto.$SetM("Dance",function(){
        alert(this.Name+" is dancing");
    });
},human_interface);

var male_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing male");
    proto.$SetM("Fight",function(){
        alert(this.Name+" is fighting");
    });
},human_interface);

var child_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing child");
    proto.$SetM("Play",function(){
        alert(this.Name+" is playing");
    });
},human_interface);

var adult_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing adult");
    proto.$SetM("Work",function(){
        alert(this.Name+" is working");
    });
},human_interface);

var mammal_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing mammal");
    proto.$SetM("DoMammalStuff",function(){
        alert("doing mammal stuff");
    });
});

var john={};
john.$IsA(adult_interface);
//the above 2 lines are equal to simply doing:
//var john=new adult_interface();
//you can think of it as a shortcut
john.$IsA(mammal_interface);
john.DoMammalStuff();
john.Name="john";
john.Sleep();

var mary=new female_interface();
mary.$IsA(child_interface);
mary.$IsA(mammal_interface);
mary.DoMammalStuff();
mary.Name="mary";
mary.Play();
mary.Dance();
</script>

Js.js ：

"use strict";
var GetInterface;
(function(){
    //================================================================================//
    //(constructor:Function, setup:Function?, parent_interfaces:Function..):Function
    GetInterface = function (constructor, setup) {
        var parent_classes = GetParray(arguments, 2);
        var output = function () {
            output.$Init();
            for (var x = parent_classes.length - 1; x >= 0; --x) {
                parent_classes[x](this);
            }
            if(constructor===null){
                constructor.apply(this, arguments);
            }
        };
        output.$Init = Mize(function () {
            var output_proto = output.prototype;
            parent_classes.forEach(function (parent_class) {
                parent_class.$Init();
                Infect(output_proto, parent_class.prototype);
            });
            init_proto(output_proto,setup);
            if(setup!==undefined){
                setup(output_proto);
            }
        });
        return output;
    };
    var init_proto=function(proto){
        $defineProperty(proto, "$SetM", { value: set_m, writable: true, configurable: true });
        $defineProperty(proto, "$ShadowM", { value: shadow_m, writable: true, configurable: true });
        $defineProperty(proto, "$SetP", { value: set_p, writable: true, configurable: true });
        $defineProperty(proto, "$ShadowP", { value: shadow_p, writable: true, configurable: true });
    };
    var set_m = function (method_name, method) {
        this[method_name] = method;
    };
    var set_p = function (property_name, getter, setter) {
        $defineProperty(this, property_name, { get: getter, set: setter, enumerable: true, configurable: true });
    };
    var shadow_m = function (method_name, supplied_method) {
        var old_method = this[method_name];
        this[method_name] = function () {
            var args = GetParray(arguments);
            args.unshift(old_method.bind(this));
            supplied_method.apply(this, args);
        };
    };
    var shadow_p = function (property_name, getter, setter) {
        var old_descriptor = $getOwnPropertyDescriptor(this, property_name);
        var old_get = old_descriptor.get;
        var old_set = old_descriptor.set;
        $defineProperty(this, property_name, { get: function () {
            return getter.call(this, old_get.bind(this));
        }, set: function (value) {
            setter.call(this, old_set.bind(this), value);
        }, enumerable: true, configurable: true
        });
    };
    var $slice=Array.prototype.slice;
    var $defineProperty=Object.defineProperty;
    var $getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor;
    if($defineProperty===undefined){
        throw "Object.defineProperty, Object.getOwnPropertyDescriptor, Object.keys are required";
    }
    //================================================================================//
    //(victim:Object, disease:Object):void
    var Infect=function (victim, disease, excludes) {
        var keys=Object.keys(disease);
        if(excludes!==undefined){
            excludes.forEach(function(exclude){
                ForEach(keys,function(key,x){
                    if(key===exclude){
                        keys.splice(x,1);
                        return false;
                    }
                });
            });
        }
        keys.forEach(function(key){
            $defineProperty(victim, key, $getOwnPropertyDescriptor(disease, key));
        });
    };
    //================================================================================//
    //(args:Object # arguments object #, start_index:int?):Array
    var GetParray = function (args, start_index) {
        if (start_index === undefined) {
            start_index = 0;
        }
        return $slice.call(args, start_index);
    };
    //================================================================================//
    //(array:Array, f:Function(item:Object|null, index:pint):boolean?):Object
    var ForEach=function(array,f){
        for (var x = 0, xx = array.length, last_index=xx-1; x < xx; ++x) {
            var result = f(array[x], x, last_index);
            if (result !== undefined) {
                return result;
            }
        }
    };
    //================================================================================//
    //provides memoization.
    //(f:Function, arity_fixed:boolean?true):Function
    //caching is done according to the inputs. the results of calling function(undefined) and function() are cached differently.
    //if arity is fixed, optimizations can be done
    var Mize=function(f, arity_fixed) {
        if (arity_fixed === undefined) {
            arity_fixed = true;
        }
        var used; //for 0 arg
        var result; //for 0 arg
        var results; //for >0 args
        var used_params; //for 1 arg
        var used_param_sets; //for >1 args
        var f_length = f.length;
        var use_generic = !arity_fixed || f_length > 3;
        if (use_generic) { //if `f_length` <= 3, it will be optimized (i.e. not using generic function)
            results = [];
            used_param_sets = [];
            return function () {
                var params = GetParray(arguments);
                var result_found = false;
                var result = ForEach(used_param_sets,function (used_param_set, x) {
                    if (used_param_set.length === params.length) {
                        var params_match = true;
                        ForEach(params,function (param, y) {
                            if (used_param_set[y] !== param) {
                                params_match = false;
                                return false;
                            }
                        });
                        if (params_match) {
                            result_found = true;
                            return results[x];
                        }
                    }
                });
                if (!result_found) {
                    used_param_sets.push(params);
                    result = f.apply(null, params);
                    results.push(result);
                }
                return result;
            };
        }
        if (f_length === 0) {
            used = false;
            return function () {
                if (!used) {
                    result = f();
                    used = true;
                }
                return result;
            };
        }
        if (f_length === 1) {
            used_params = [];
        } else {
            used_param_sets = [];
        }
        results = [];
        switch (f_length) {
            case 1:
                return function (arg) {
                    var result_found = false;
                    var result = ForEach(used_params,function (used_param, x) {
                        if (arg === used_param) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_params.push(arg);
                        result = f(arg);
                        results.push(result);
                    }
                    return result;
                };
                break;
            case 2:
                return function (arg1, arg2) {
                    var result_found = false;
                    var result = ForEach(used_param_sets,function (used_param_set, x) {
                        if (arg1 === used_param_set[0] && arg2 === used_param_set[1]) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_param_sets.push([arg1, arg2]);
                        result = f(arg1, arg2);
                        results.push(result);
                    }
                    return result;
                };
                break;
            case 3:
                return function (arg1, arg2, arg3) {
                    var result_found = false;
                    var result = ForEach(used_param_sets,function (used_param_set, x) {
                        if (arg1 === used_param_set[0] && arg2 === used_param_set[1] && arg3 === used_param_set[2]) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_param_sets.push([arg1, arg2, arg3]);
                        result = f(arg1, arg2, arg3);
                        results.push(result);
                    }
                    return result;
                };
                break;
            default:
                throw "Invalid `f_length`: " + f_length;
        }
    };
    //================================================================================//
    Object.prototype.$Setup=function(setup){
        setup(Object.getPrototypeOf(this));
    };
    //================================================================================//
    Object.prototype.$IsA=function(_interface){
        var excludes=GetParray(arguments,1);
        if(this.$SetM===undefined){
            this.$SetM=set_m;
            this.$SetP=set_p;
            this.$ShadowM=shadow_m;
            this.$ShadowP=shadow_p;
        }
        _interface.$Init();
        /*var this_proto={};
        init_proto(this_proto);
        Infect(this_proto,Object.getPrototypeOf(this));
        this.__proto__=this_proto;*/
        Infect(Object.getPrototypeOf(this),_interface.prototype,excludes);
    };
    //================================================================================//
})();

In my framework, everything is an object or an "interface".

Interfaces define the common functions (methods / property_gets / property_sets) that objects may have.

You create an interface like this: var some_interface = GetInterface(constructor, interface_setup, parent_interface..)

You can specify any number of parent_interfaces. So if interface_A inherits both interface_B and interface_C, you can create interface_A as such: GetInterface(constructor, interface_setup, interface_B, interface_C);

If interface_A inherits interface_X and interface_X inherits interface_Y, then interface_A will have all the functions which both interface_X and interface_Y has.

Interfaces which do not require a constructor will leave the constructor argument as null. The interface_setup is a function which looks like this:

function(proto){
}

The object that the proto argument points to has 4 methods: SetM, ShadowM, SetP, and ShadowP.

You use these 4 methods to setup your interface.

This framework also provides lazy instantiation of interfaces. (in other words the setup code will never actually be ran until it is actually first needed).

Limitations of this framework requires at least support for Object.keys, Object.getOwnPropertyDescriptor and Object.defineProperty. (In other words it works in the latest versions of FireFox, IE, Chrome, Safari but not Opera)

TestPage2.html:

<!doctype html>
<script src="js.js"></script>
<script>
var human = GetInterface(function(){
},function(proto){
    //alert("trace: initing human");
    proto.$SetM("Sleep",function(){
        alert(this.Name+" is sleeping");
    });
    proto.$SetP("Name",function(){
        return this._name;
    },function(value){
        this._name=value;
    });
});

var female = GetInterface(function(){
},function(proto){
    //alert("trace: initing female");
    proto.$SetM("Dance",function(){
        alert(this.Name+" is dancing");
    });
},human);

var male = GetInterface(function(){
},function(proto){
    //alert("trace: initing male");
    proto.$SetM("Fight",function(){
        alert(this.Name+" is fighting");
    });
    proto.$ShadowP("Name",function(parent_get){
        return "Mr. "+parent_get();
    },function(parent_set,value){
        parent_set(value);
    });
},human);

var child = GetInterface(function(){
},function(proto){
    //alert("trace: initing child");
    proto.$SetM("Play",function(){
        alert(this.Name+" is playing");
    });
},human);

var adult = GetInterface(function(){
},function(proto){
    //alert("trace: initing adult");
    proto.$SetM("Work",function(){
        alert(this.Name+" is working");
    });
},human);

var mammal = GetInterface(function(){
},function(proto){
    //alert("trace: initing mammal");
    proto.$SetM("DoMammalStuff",function(){
        alert("doing mammal stuff");
    });
});


var john=new male();
john.Name="john";
john.Sleep();

var mary=new female();
mary.$IsA(child);
mary.$IsA(mammal);
mary.$Setup(function(proto){
    proto.$ShadowP("Name",function(parent_get){
        return "Miss "+parent_get.call(this);
    },function(parent_set,value){
        parent_set.call(this,value);
    });
});
mary.Name="mary";
mary.Play();
</script>

TestPage.html:

 <!doctype html>
<script src="js.js"></script>
<script>
var human_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing human");
    proto.$SetM("Sleep",function(){
        alert(this.Name+" is sleeping");
    });
    proto.$SetP("Name",function(){
        return this._name;
    },function(value){
        this._name=value;
    });
});

var female_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing female");
    proto.$SetM("Dance",function(){
        alert(this.Name+" is dancing");
    });
},human_interface);

var male_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing male");
    proto.$SetM("Fight",function(){
        alert(this.Name+" is fighting");
    });
},human_interface);

var child_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing child");
    proto.$SetM("Play",function(){
        alert(this.Name+" is playing");
    });
},human_interface);

var adult_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing adult");
    proto.$SetM("Work",function(){
        alert(this.Name+" is working");
    });
},human_interface);

var mammal_interface = GetInterface(function(){
},function(proto){
    alert("trace: initing mammal");
    proto.$SetM("DoMammalStuff",function(){
        alert("doing mammal stuff");
    });
});

var john={};
john.$IsA(adult_interface);
//the above 2 lines are equal to simply doing:
//var john=new adult_interface();
//you can think of it as a shortcut
john.$IsA(mammal_interface);
john.DoMammalStuff();
john.Name="john";
john.Sleep();

var mary=new female_interface();
mary.$IsA(child_interface);
mary.$IsA(mammal_interface);
mary.DoMammalStuff();
mary.Name="mary";
mary.Play();
mary.Dance();
</script>

Js.js:

"use strict";
var GetInterface;
(function(){
    //================================================================================//
    //(constructor:Function, setup:Function?, parent_interfaces:Function..):Function
    GetInterface = function (constructor, setup) {
        var parent_classes = GetParray(arguments, 2);
        var output = function () {
            output.$Init();
            for (var x = parent_classes.length - 1; x >= 0; --x) {
                parent_classes[x](this);
            }
            if(constructor===null){
                constructor.apply(this, arguments);
            }
        };
        output.$Init = Mize(function () {
            var output_proto = output.prototype;
            parent_classes.forEach(function (parent_class) {
                parent_class.$Init();
                Infect(output_proto, parent_class.prototype);
            });
            init_proto(output_proto,setup);
            if(setup!==undefined){
                setup(output_proto);
            }
        });
        return output;
    };
    var init_proto=function(proto){
        $defineProperty(proto, "$SetM", { value: set_m, writable: true, configurable: true });
        $defineProperty(proto, "$ShadowM", { value: shadow_m, writable: true, configurable: true });
        $defineProperty(proto, "$SetP", { value: set_p, writable: true, configurable: true });
        $defineProperty(proto, "$ShadowP", { value: shadow_p, writable: true, configurable: true });
    };
    var set_m = function (method_name, method) {
        this[method_name] = method;
    };
    var set_p = function (property_name, getter, setter) {
        $defineProperty(this, property_name, { get: getter, set: setter, enumerable: true, configurable: true });
    };
    var shadow_m = function (method_name, supplied_method) {
        var old_method = this[method_name];
        this[method_name] = function () {
            var args = GetParray(arguments);
            args.unshift(old_method.bind(this));
            supplied_method.apply(this, args);
        };
    };
    var shadow_p = function (property_name, getter, setter) {
        var old_descriptor = $getOwnPropertyDescriptor(this, property_name);
        var old_get = old_descriptor.get;
        var old_set = old_descriptor.set;
        $defineProperty(this, property_name, { get: function () {
            return getter.call(this, old_get.bind(this));
        }, set: function (value) {
            setter.call(this, old_set.bind(this), value);
        }, enumerable: true, configurable: true
        });
    };
    var $slice=Array.prototype.slice;
    var $defineProperty=Object.defineProperty;
    var $getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor;
    if($defineProperty===undefined){
        throw "Object.defineProperty, Object.getOwnPropertyDescriptor, Object.keys are required";
    }
    //================================================================================//
    //(victim:Object, disease:Object):void
    var Infect=function (victim, disease, excludes) {
        var keys=Object.keys(disease);
        if(excludes!==undefined){
            excludes.forEach(function(exclude){
                ForEach(keys,function(key,x){
                    if(key===exclude){
                        keys.splice(x,1);
                        return false;
                    }
                });
            });
        }
        keys.forEach(function(key){
            $defineProperty(victim, key, $getOwnPropertyDescriptor(disease, key));
        });
    };
    //================================================================================//
    //(args:Object # arguments object #, start_index:int?):Array
    var GetParray = function (args, start_index) {
        if (start_index === undefined) {
            start_index = 0;
        }
        return $slice.call(args, start_index);
    };
    //================================================================================//
    //(array:Array, f:Function(item:Object|null, index:pint):boolean?):Object
    var ForEach=function(array,f){
        for (var x = 0, xx = array.length, last_index=xx-1; x < xx; ++x) {
            var result = f(array[x], x, last_index);
            if (result !== undefined) {
                return result;
            }
        }
    };
    //================================================================================//
    //provides memoization.
    //(f:Function, arity_fixed:boolean?true):Function
    //caching is done according to the inputs. the results of calling function(undefined) and function() are cached differently.
    //if arity is fixed, optimizations can be done
    var Mize=function(f, arity_fixed) {
        if (arity_fixed === undefined) {
            arity_fixed = true;
        }
        var used; //for 0 arg
        var result; //for 0 arg
        var results; //for >0 args
        var used_params; //for 1 arg
        var used_param_sets; //for >1 args
        var f_length = f.length;
        var use_generic = !arity_fixed || f_length > 3;
        if (use_generic) { //if `f_length` <= 3, it will be optimized (i.e. not using generic function)
            results = [];
            used_param_sets = [];
            return function () {
                var params = GetParray(arguments);
                var result_found = false;
                var result = ForEach(used_param_sets,function (used_param_set, x) {
                    if (used_param_set.length === params.length) {
                        var params_match = true;
                        ForEach(params,function (param, y) {
                            if (used_param_set[y] !== param) {
                                params_match = false;
                                return false;
                            }
                        });
                        if (params_match) {
                            result_found = true;
                            return results[x];
                        }
                    }
                });
                if (!result_found) {
                    used_param_sets.push(params);
                    result = f.apply(null, params);
                    results.push(result);
                }
                return result;
            };
        }
        if (f_length === 0) {
            used = false;
            return function () {
                if (!used) {
                    result = f();
                    used = true;
                }
                return result;
            };
        }
        if (f_length === 1) {
            used_params = [];
        } else {
            used_param_sets = [];
        }
        results = [];
        switch (f_length) {
            case 1:
                return function (arg) {
                    var result_found = false;
                    var result = ForEach(used_params,function (used_param, x) {
                        if (arg === used_param) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_params.push(arg);
                        result = f(arg);
                        results.push(result);
                    }
                    return result;
                };
                break;
            case 2:
                return function (arg1, arg2) {
                    var result_found = false;
                    var result = ForEach(used_param_sets,function (used_param_set, x) {
                        if (arg1 === used_param_set[0] && arg2 === used_param_set[1]) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_param_sets.push([arg1, arg2]);
                        result = f(arg1, arg2);
                        results.push(result);
                    }
                    return result;
                };
                break;
            case 3:
                return function (arg1, arg2, arg3) {
                    var result_found = false;
                    var result = ForEach(used_param_sets,function (used_param_set, x) {
                        if (arg1 === used_param_set[0] && arg2 === used_param_set[1] && arg3 === used_param_set[2]) {
                            result_found = true;
                            return results[x];
                        }
                    });
                    if (!result_found) {
                        used_param_sets.push([arg1, arg2, arg3]);
                        result = f(arg1, arg2, arg3);
                        results.push(result);
                    }
                    return result;
                };
                break;
            default:
                throw "Invalid `f_length`: " + f_length;
        }
    };
    //================================================================================//
    Object.prototype.$Setup=function(setup){
        setup(Object.getPrototypeOf(this));
    };
    //================================================================================//
    Object.prototype.$IsA=function(_interface){
        var excludes=GetParray(arguments,1);
        if(this.$SetM===undefined){
            this.$SetM=set_m;
            this.$SetP=set_p;
            this.$ShadowM=shadow_m;
            this.$ShadowP=shadow_p;
        }
        _interface.$Init();
        /*var this_proto={};
        init_proto(this_proto);
        Infect(this_proto,Object.getPrototypeOf(this));
        this.__proto__=this_proto;*/
        Infect(Object.getPrototypeOf(this),_interface.prototype,excludes);
    };
    //================================================================================//
})();
回复 原文
南渊 2024-11-25 00:34:27

ExtJS 是 JavaScript OO 的一个很好的例子。它在 JavaScript 中实现了一个非常复杂的企业级 OO 层次结构，可以立即执行许多操作。这可能是一本令人畏惧的读物（我上次检查 3.X 时，它是超过 1MB 的原始、未压缩的 JavaScript），但它会给你很多想法。您可以首先查看文档以获得高级视图。

ExtJS is an excellent example of JavaScript OO. It implements a really sophisticated, enterprise-level OO hierarchy in JavaScript that does a lot of things out of the box. It may be a daunting read (last I checked in 3.X, it was over 1MB of raw, uncompressed JavaScript), but it'd give you a lot of ideas. You could start out by reviewing the documentation to get a high-level view.

回复 原文
帅气称霸 2024-11-25 00:34:27

我目前正在使用继承插件模型，它尝试将原型 OO 模式与 jQuery 插件模式结合起来。它在我的答案中详细发布： 将一个类附加到jQuery 对象

注意： 不要因提及 Class 这个词而被拒绝

I'm currently using a inheritance plugin model which attempts to combine the prototypical OO pattern with jQuery plugin pattern. Its posted in detail in my answer here: attaching a class to a jQuery object

Note: Do not get turned away by mention of the word Class

回复 原文
谁人与我共长歌 2024-11-25 00:34:27

下面的示例展示了您正在寻找的 OO 编程的基础。最好的现实例子可能是 jQuery。

在学习 JavaScript 时，您必须记住，它实际上比 C 或 Java 更接近于Scheme。基本上它是C 语法中的Scheme。

在 JavaScript 中几乎不应该使用“new”，尤其是在编写 API 时。似乎添加了“new”运算符是因为 JavaScript 不确定其原型框架。对于我们大多数开始使用 C、C++ 和 Java 等经典语言进行编程的人来说，这似乎很奇怪，因为“新”通常正是我们正在寻找的东西，因为它很容易翻译。

你问为什么我不应该使用“新”？好吧，由于“new”的实现，您可能会无意中开始清除全局数据（记住，不是 JavaScript 函数中的所有内容）。如果您碰巧陷入这种情况，那么您将不会看到任何错误或通知，而只会看到程序中不可预测的行为。此外，对于“this”在您的“类”中实际绑定的内容可能不清楚，也可能不清楚。

当您编写一个打算用“new”调用的函数而用户不使用“new”时，就会发生在不知情的情况下擦除全局内存的问题。提示为什么在 API 中使用它会导致用户不满意。

面向对象的“类”和继承的正确方法是使用 JavaScript 最强大的属性……对象。

你可以编写一个函数来返回一个对象来建立一个“类”。你放入这个对象中的任何东西（数字、字符串、方法等）都是你的“类”的公共属性。您在函数中编写的任何不在返回的对象内部的内容都是私有的。

要从“类”继承，您可以简单地初始化将返回到“基类”结果的对象，然后扩展其功能。

以下代码部分将展示如何使用私有和公共变量构造基类，以及如何进行 2 级继承。

基础对象

//Base Object
var Animal = function(spec) {

    //This is our output object
    //Everything provided from 'spec' and
    //everything not addded to 'that' will
    //be 'private'. Everything added to
    //'that' is 'public'.
    var that = {};

    //Private Methods
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    var defaults = {
        name : 'Default Name',
        food : 'Default Food',
        saying : 'Default Saying',
    }

    extend(defaults,spec);

    //Public Methods
    that.name = function() {
        return defaults.name;
    }

    that.eats = function() {
        if(typeof(defaults.food) === 'string') {
            return defaults.food;
        } else if(typeof(defaults.food) === 'object') {
            return defaults.food.join(', ');
        }
    }

    that.says = function() {
        return defaults.saying;
    }

    return that;
}

var myAnimal = Animal();       //Create a new instance
alert(myAnimal.name());        //Alerts 'Default Name'
alert(myAnimal.eats());        //Alerts 'Default Food'
alert(myAnimal.says());        //Alerts 'Default Saying'
alert(myAnimal.saying);        //Alerts 'undefined'
//alert(myAnimal.extend());    //Has No Method Error

var myAnimal2 = Animal({       //Create a new instance using a spec
    name : 'Mike',
    food : ['Chicken','Duck'],
    saying : 'Rawr',
});    
alert(myAnimal2.name());        //Alerts 'Mike'
alert(myAnimal2.eats());        //Alerts 'Chicken, Duck'
alert(myAnimal2.says());        //Alerts 'Rawr'

继承

//Inheritance Object
var Mammal = function(spec) {

    //Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Mammal',
        attributes : ['fur'],
    }

    extend(defaults,spec);

    //Inherrit from our Animal Object
    //Use Mammal defaults
    var that = Animal(defaults);


    that.attributes = function() {
        if(typeof(defaults.attributes) === 'string') {
            return defaults.attributes;
        } else if(typeof(defaults.attributes) === 'object') {
            return defaults.attributes.join(', ');
        } else {
            return false;
        }
    }

    return that;
}

//Second-Level Inheritance
var Cat = function(spec) {

    //Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Cat',
        saying : 'Meow',
        food : ['fish','birds','frogs','MeowMix'],
        fur_color : 'Default Fur Color',
        attributes : ['fur','claws','crazy eyes','long tail'],
    }

    extend(defaults,spec);

    //Inherrit from our Mammal Object
    //We use our defaults for the cat
    var that = Mammal(defaults);

    that.fur_color = function() {
        return defaults.fur_color; 
    }

    that.purr = function(n) {
        var str = '';

        for(var i=0;i<n;i++) {
            if(i === 0) {
                str = 'p-';
            } else if(i === n-1) {
                str += 'r';
            } else {
                str += 'r-';
            }
        }

        return str
    };

    return that;
}


var myMammal = Mammal();
alert(myMammal.name());        //Alerts Mammal
alert(myMammal.attributes());  //Alerts 'fur'

var myCat = Cat();
alert(myCat.name());            //Alerts Cat
alert(myCat.says());            //Alerts Meow

var toonces = Cat({
    name : 'Toonces the Driving Cat',
    food : ['Whiskas','ham'],
    saying : 'Meeeooooowww',
    fur_color : 'Black',
    attributes : [ 
        'Can Drive a Car', 'Claws',
        'fur','crazy eyes','long tail',
        'Steals Hub Caps',
    ],
});

alert(toonces.name());            //Alerts 'Toonces the Driving Cat'
alert(toonces.says());            //Alerts 'Meeooooowww'
alert(toonces.eats());            //Alerts 'Whiskas, ham'
alert(toonces.fur_color());       //Alerts 'Black'
alert(toonces.attributes());      //Alerts 'Can Drive a Car, Claws,
                                  //fur, crazy eyes, long tail,
                                  // Steals Hub Caps',
alert(toonces.purr(5));           //Alerts 'p-r-r-r-r'

编辑：有人提醒我没有使用“原型”对象。我这样做是为了避免必须使用“new”运算符，如上面的文字所述。为了完整起见，我将使用下面的原型对象给出一个示例...

原型对象的继承

//Building a class to use the prototype object
var Dog = function(spec) {

var that = this;

//Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Dog',
        saying : 'Woof',
        food : ['bacon'],
        fur_color : 'Default Fur Color',
        attributes : ['fur','Barks at Mailman'],
    }


    //Attach the properties of a Mammal to "self"
    this.self = new Mammal(defaults);

    //Add a function to get the name
    this.getName = function() {
        return that.self.name();
    }
}

//Extend the prototype
Dog.prototype.growl = "grrrrrrr";

//Make a new dog...HAVE TO CALL NEW HERE OR ELSE BAD THINGS CAN HAPPEN
d= new Dog();

alert(d.growl);            //Alerts 'grrrrrrr'
alert(d.getName());        //Alerts 'Dog'
alert(d.self.says());      //Alerts 'Woof'

请随时向我询问有关本文的任何内容。享受。

Here is an example showing the basis of the OO programming that you are looking for. Best real-world example would be jQuery probably.

When learning JavaScript, you have to keep in mind that it is actually closer to Scheme than it is C or Java at its roots. Basically it is Scheme in C's syntax.

There is almost never a case where you should use "new" in JavaScript, especially if you are writing APIs. It seems as the "new" operator was added in because it JavaScript was not sure about its prototypal framework. For most of us that start programming with classical languages such as C, C++, and Java, this seems odd, as "new" is generally exactly what we are looking for, because it translates easily.

Why shouldn't I use "new" you ask? Well, due to the implementation of "new", you can inadvertently start wiping out your global data (which remember, is everything not in a function in JavaScript). If you happen to fall prey to this, then you will not see any errors, or notifications, but only see unpredictable behavior in your program. Also, it may or may not be clear as to what "this" actually is bound to within your "class".

The wipe out your global memory without knowing it problem mainly occurs when you write a function that is intended to be called with "new" and the user does not use "new". Hints why using it in APIs can lead to unhappy users.

The correct way to object oriented "classes" and inheritance is to use JavaScript's most powerful attribute...the object.

You can write a function to return an object to establish a "class". Anything you put into this object (numbers, strings, methods, etc.) are all public properties of your "class". Anything you write within your function that is not inside that object that is being returned, is private.

To inherit from your "class", you can simply initialize your object that you will be returning to a your "base class" result and then extend its functionality.

The following sections of code will show how to construct a base class with private and public variables, and the do 2 levels of inheritance.

Base Object

//Base Object
var Animal = function(spec) {

    //This is our output object
    //Everything provided from 'spec' and
    //everything not addded to 'that' will
    //be 'private'. Everything added to
    //'that' is 'public'.
    var that = {};

    //Private Methods
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    var defaults = {
        name : 'Default Name',
        food : 'Default Food',
        saying : 'Default Saying',
    }

    extend(defaults,spec);

    //Public Methods
    that.name = function() {
        return defaults.name;
    }

    that.eats = function() {
        if(typeof(defaults.food) === 'string') {
            return defaults.food;
        } else if(typeof(defaults.food) === 'object') {
            return defaults.food.join(', ');
        }
    }

    that.says = function() {
        return defaults.saying;
    }

    return that;
}

var myAnimal = Animal();       //Create a new instance
alert(myAnimal.name());        //Alerts 'Default Name'
alert(myAnimal.eats());        //Alerts 'Default Food'
alert(myAnimal.says());        //Alerts 'Default Saying'
alert(myAnimal.saying);        //Alerts 'undefined'
//alert(myAnimal.extend());    //Has No Method Error

var myAnimal2 = Animal({       //Create a new instance using a spec
    name : 'Mike',
    food : ['Chicken','Duck'],
    saying : 'Rawr',
});    
alert(myAnimal2.name());        //Alerts 'Mike'
alert(myAnimal2.eats());        //Alerts 'Chicken, Duck'
alert(myAnimal2.says());        //Alerts 'Rawr'

Inheritance

//Inheritance Object
var Mammal = function(spec) {

    //Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Mammal',
        attributes : ['fur'],
    }

    extend(defaults,spec);

    //Inherrit from our Animal Object
    //Use Mammal defaults
    var that = Animal(defaults);


    that.attributes = function() {
        if(typeof(defaults.attributes) === 'string') {
            return defaults.attributes;
        } else if(typeof(defaults.attributes) === 'object') {
            return defaults.attributes.join(', ');
        } else {
            return false;
        }
    }

    return that;
}

//Second-Level Inheritance
var Cat = function(spec) {

    //Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Cat',
        saying : 'Meow',
        food : ['fish','birds','frogs','MeowMix'],
        fur_color : 'Default Fur Color',
        attributes : ['fur','claws','crazy eyes','long tail'],
    }

    extend(defaults,spec);

    //Inherrit from our Mammal Object
    //We use our defaults for the cat
    var that = Mammal(defaults);

    that.fur_color = function() {
        return defaults.fur_color; 
    }

    that.purr = function(n) {
        var str = '';

        for(var i=0;i<n;i++) {
            if(i === 0) {
                str = 'p-';
            } else if(i === n-1) {
                str += 'r';
            } else {
                str += 'r-';
            }
        }

        return str
    };

    return that;
}


var myMammal = Mammal();
alert(myMammal.name());        //Alerts Mammal
alert(myMammal.attributes());  //Alerts 'fur'

var myCat = Cat();
alert(myCat.name());            //Alerts Cat
alert(myCat.says());            //Alerts Meow

var toonces = Cat({
    name : 'Toonces the Driving Cat',
    food : ['Whiskas','ham'],
    saying : 'Meeeooooowww',
    fur_color : 'Black',
    attributes : [ 
        'Can Drive a Car', 'Claws',
        'fur','crazy eyes','long tail',
        'Steals Hub Caps',
    ],
});

alert(toonces.name());            //Alerts 'Toonces the Driving Cat'
alert(toonces.says());            //Alerts 'Meeooooowww'
alert(toonces.eats());            //Alerts 'Whiskas, ham'
alert(toonces.fur_color());       //Alerts 'Black'
alert(toonces.attributes());      //Alerts 'Can Drive a Car, Claws,
                                  //fur, crazy eyes, long tail,
                                  // Steals Hub Caps',
alert(toonces.purr(5));           //Alerts 'p-r-r-r-r'

EDIT: I was alerted that I did not use the "prototype" object. I did this, as to avoid HAVING to use the "new" operator, as mentioned in the text above. For completeness, I will give an example using the prototype object below...

Inheritance with the Prototype Object

//Building a class to use the prototype object
var Dog = function(spec) {

var that = this;

//Private Methods

    //Have to redefine this since
    //I decided to use this as an
    //example of a private method
    function extend(obj1,obj2) {
        for(var key in obj2) {
            obj1[key] = obj2[key];
        }
    }

    //Private Variables
    //New list of defaults
    var defaults = {
        name : 'Dog',
        saying : 'Woof',
        food : ['bacon'],
        fur_color : 'Default Fur Color',
        attributes : ['fur','Barks at Mailman'],
    }


    //Attach the properties of a Mammal to "self"
    this.self = new Mammal(defaults);

    //Add a function to get the name
    this.getName = function() {
        return that.self.name();
    }
}

//Extend the prototype
Dog.prototype.growl = "grrrrrrr";

//Make a new dog...HAVE TO CALL NEW HERE OR ELSE BAD THINGS CAN HAPPEN
d= new Dog();

alert(d.growl);            //Alerts 'grrrrrrr'
alert(d.getName());        //Alerts 'Dog'
alert(d.self.says());      //Alerts 'Woof'

Please feel free to ask me about any of this post. Enjoy.

回复 原文
~没有更多了~

关于作者

最美的太阳

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

初遇

文章 0 评论 0

听闻余生

文章 0 评论 0

Z_dy

文章 0 评论 0

左岸枫

文章 0 评论 0

1848719402

文章 0 评论 0

婷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文