Question

我是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大小的数组，并在鼠标点击时交换图像。

Answer 1

Mozilla开发中心（/ Network）的一个良好开端是Working with Objects。

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

您还必须了解Document Object Model（DOM）是什么以及how it connects to JavaScript。

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

现在感到困惑？不要担心，阅读和学习:)）

Answer 2

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

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

Answer 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>

Answer 4

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

你没有在代码方面真正指定你想用OOP做什么，所以我不能真正提供具体的代码，但我强烈建议你阅读这些文章以及你在网上找到的其他文章关于JavaScript是什么样的概念，它如何与DOM一起工作，以及它与OOP的关系。

我希望这会有所帮助。

赫里斯托斯

Answer 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/

测试代码

在JavaScript上使用面向对象

5 个答案: