【问题标题】:Object oriented JavaScript with example [closed]带有示例的面向对象的 JavaScript [关闭]
【发布时间】:2013-02-05 00:39:40
【问题描述】:

我了解一般的面向对象编程原则,例如封装、继承、多态性、抽象等

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

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

谢谢。

【问题讨论】:

  • 为什么不找一个你感兴趣的问题,看看你能不能用这些技术解决它,如果你有具体的技术问题再回来。其中一些概念并不那么重要,或者与 c++ 等语言相比,在 JS 中的实现方式不同。
  • 您应该以较慢的速度再次浏览这些文章。慢慢地吸收事物往往会减少混乱。也就是说,我投票结束这个问题,因为教程请求与 Stack Overflow 无关。
  • 你应该阅读类和原型之间的区别。例如,一个很好的答案是关于经典继承和原型继承:stackoverflow.com/a/186279/1068746。一旦你得到了正确的原型,剩下的就是小菜一碟了。

标签: javascript html css


【解决方案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 库并根据其文档直接使用它。

希望这会有所帮助。

【讨论】:

  • +1:这就是我要找的:一个描述 OOJS 的私有/公共属性/方法和继承的简单示例。
【解决方案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" }
}

给定function(a){ a.getFullName() } 如果 a 是 Person,您将获得全名,如果 a 是 Child,您将获得“not allowed..”。

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

【讨论】:

  • 为此非常感谢...您是否可以在相同的内容中添加更多细节...就像当您给出封装示例时,您能说出封装的确切位置吗?另外,如果您可以通过简单的示例更详细地解释继承/多态性?
【解决方案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 调用它。

【讨论】:

  • apple 不是类(或构造函数,因为从技术上讲,JS 中没有任何类),它是匿名构造函数的一个实例。
  • function前面使用new有什么意义?
  • @jfriend00 实例化函数,返回{type: "macintosh", color: "red", getInfo: function(){...}}
  • @Asad - 为什么不直接定义你想要的对象呢?
【解决方案4】:

【讨论】:

  • 我之前已经浏览过这 2 个链接,它们似乎很混乱,尤其是第二个(2.object-oriented-javascript-fundamental-concepts)
猜你喜欢
  • 2011-04-03
  • 1970-01-01
  • 2013-07-20
  • 1970-01-01
  • 2011-04-12
  • 1970-01-01
  • 2011-06-11
相关资源
最近更新 更多