javascript - 面向对象的 JavaScript 示例

Question

我知道一般的面向对象编程原则，如封装、继承、多态、抽象等

但是现在想从 JavaScript 的角度来理解这些概念。有人可以举一个非常基本的示例并运行这些在 JS 上下文中的工作原理（封装、继承、多态性、抽象）

我在网上阅读了很多关于这些的内容，但这些文章让我更加困惑。

谢谢你。

Answer 1

我将描述 Douglas Crockford 模式以模仿面向对象编程语言中使用的风格。它不使用原型继承。结果，它的效率略低，因为每个对象都必须存储对每个方法的引用。但它对于说明目的非常有用。

封装：

function MyClass (a, b)
{
    this.publicProperty = 1;
    var _privateProperty = 2;
    function _privateMethod () {
        // only private methods and privileged methods can call this
    };
    this.publicMethod = function () {
        // can access _privateProperty and call _privateMethod
    };
}
MyClass.classMethod = function () {
    // not tied to any instances
};

只需创建对象var instance = new MyClass(a, b);

遗产：

function DerivedClass(a, b, c) 
{
    // must explicitly call superclass constructor, like in Java
    MyClass.apply(this, arguments);

    this.anotherProperty = 3;
    function _anotherPrivateMethod() { };

    this.publicMethod = function () {
        // can access _privateProperty and call _privateMethod
    };
}
DerivedClass.classMethodMethod = function ()
{
    // not tied to any instances
};

JavaScript 中的多态性主要被 Duck Typing ( http://en.wikipedia.org/wiki/Duck_typing ) 所取代。开发人员通常将方法/属性分组在对象下，您只需测试这些对象是否存在。例如，这就是检测新奇浏览器功能的方式。

抽象与多态性密切相关——只要有东西支持接口，你通常不会关心它在下面是如何工作的。因此，您可以下载一个 Javascript 库并根据其文档直接使用它。

希望这可以帮助。

Answer 2

我认为最有趣的是封装，因为很多人没有正确使用它。

让我们以一个简单的对象为例

var Person = function( firstName, lastName, isMr ) {
    var prefix = isMr ? "Mr." : "Mrs." ; 
    this.getFullName = function() { return prefix + " " 
                                       + firstName + " " + lastName }

}

 var p = new Person ("guy","mograbi", true);
 p.getFullName(); // => "Mr. guy mograbi"
// p.prefix ==> causes an error. 

继承- 只是扩展原型

 var Superhero = function(){
            Person.call(this);

  }

然而，正确的继承本身就是一个问题。查看https://stackoverflow.com/a/4985616/1068746

多态性- 非常简单，给定一个实现“getFullName”的新原型

var Child = function(){
    this.getFullName = function(){ return "not allowed to talk with strangers" }
}

如果 a 是 Person，您将获得function(a){ a.getFullName() } 全名，如果 a 是 Child，您将获得“不允许..”。

抽象- 更像是一种类型安全的语言。 https://stackoverflow.com/a/4082496/1068746

Answer 3

您可以使用函数来定义单例对象

var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

如下所示使用它

apple.color = "reddish";
alert(apple.getInfo());

new function(){...}同时做两件事：定义一个函数（一个匿名构造函数）并用 new 调用它。

Answer 4

查看以下链接：

1. Introduction_to_Object-Oriented_JavaScript
2. 面向对象的javascript基本概念