在 JavaScript 上使用面向对象答案

【问题标题】：Use object oriented on JavaScript在 JavaScript 上使用面向对象
【发布时间】：2011-05-24 01:42:13
【问题描述】：

我是 JavaScript 新手，我正在尝试学习如何在我的屏幕上上传图像然后交换它。我管理它的方式是使用以下代码：

 for(i = 0; i <= 5; i++) { 
  N= " + i;
  document.write("<img id= " + N + " src='graphics/" + N + ".jpg' onclick='swap(id)'/>");  
}

但是，我想学习如何使用面向对象的方式来做这件事并使用对象，但我发现让它工作起来非常困难。如何使用OO？使用 OO，我想使用 3*3 大小的数组并在鼠标单击时交换图像。

【问题讨论】：

codeproject.com/Articles/5608/…

标签： javascript oop object

【解决方案1】：

来自 Mozilla 开发中心 (/Network) 的 Working with Objects 是一个好的开始。

实际上，您已经在使用对象，因为 JavaScript 中的几乎所有内容（甚至函数）都是对象。

您还必须了解Document Object Model (DOM) 和how it connects to JavaScript 是什么。

阅读整个MDC JavaScript guide 并没有错，尤其是关于函数，因为函数在 JavaScript 中非常强大（主要是因为它们是对象）。

现在很困惑？别担心，阅读和学习:)

【讨论】：

+1 指出了 DOM 在 JavaScript 中执行几乎所有 UI 任务的重要性。

【解决方案2】：

这可能是一个很好的起点：

var myImage = document.getElementByID('myImage');
myImage.src = 'someurl';

【讨论】：

【解决方案3】：

您可以查看Mozilla Developer Network 上的介绍性文章。

此外，我还创建了这个小示例（希望是说明性示例）。（注意私有方法以及当您尝试从“外部”访问它时会发生什么！）

<body>
<script type="text/javascript">
function Gallery() {

    // private members
    var apple   = document.getElementById('apple');
    var orange  = document.getElementById('orange'); 
    var hasSwapped = false;

    // private method
    hasSwapped = function() {
        hasSwapped = true;
    }

    // public method
    this.swap = function() {
        var swap = apple.src;
        apple.src = orange.src;
        orange.src = swap;
        hasSwapped();
    }

    // public method
    this.getInfo = function() {
        return hasSwapped ? "Swapped!" : "Not swapped!"; 
    }
}
</script>

<img src="apple.jpg" id="apple" />
<img src="orange.jpg" id="orange" />

<script type="text/javascript">
alert("Starting ...");

var gallery = new Gallery(); 
gallery.swap(); 
alert(gallery.getInfo());

if(gallery.hasSwapped()) {
    alert("Swapped?!");
}
</script>

</body>

【讨论】：

【解决方案4】：

使用 JavaScript 的 OOP 有点不同。和你一样，我对这个话题比较陌生，所以在过去的几个月里我一直在努力自学。我建议阅读其他用户发布的一些文章以及其中一些文章：

您并没有在代码方面具体说明您想用 OOP 做什么，所以我无法提供具体的代码，但我强烈建议您阅读这些文章以及您在网络上找到的其他文章以获得大致了解 JavaScript 是什么样的，它如何与 DOM 一起工作，以及它与 OOP 的关系。

我希望这会有所帮助。

Hristo

【讨论】：

+1 用于链接到对象模型的详细信息。如果一个来自基于类的 OOP，继承等可能真的很难掌握。
@Felix... 谢谢。当我处于这种情况时......我实际上是在尝试模仿 Java，以便该链接提供了非常好的示例。

【解决方案5】：

这是一个简单的例子，说明如何制作一个对象并为其创建“方法”。

function Hej( name )//Define the function that will define your Object.
{
    //DEFINE OBJECT VARIABLES
    this.name = name;


    //DEFINE THE METHODS    
    this.Get_Name = Get_Name;

    function Get_Name()
    {
        return name;
    }
}

打印到控制台

xx = new Hej("kalle"); //Create a new object
console.log( xx.Get_Name() );

yy = new Hej("pelle"); //Create a new object
console.log( yy.Get_Name() );

在Chrome 中，这会将其打印到console。在 Chrome 中按 F12 即可找到控制台。

用http://jsfiddle.net/测试代码

【讨论】：