JavaScript开发：对象和方法定义所经历的阶段

最新推荐文章于 2025-03-18 00:00:00 发布

原创最新推荐文章于 2025-03-18 00:00:00 发布 · 置顶 · 172 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript学习的三个阶段，从全局定义函数到封装变量和函数，再到返回对象以实现多个对象间的互不干扰。每个阶段都附有示例代码，展示了如何避免全局变量污染和解决对象属性更改的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个开发语言的学习是一个由浅入深、循序渐进的过程，JavaScript也不例外。

第一阶段：全局定义函数。请看下面的一个示例：

show("我的中国心"); //不报错，因为系统在编译时首先对函数初始化

function show(word) {
    alert(word);
}

function sort(a) {
    alert("排序操作");
    return "排序";
}

如果想使用上面的函数，就可以进行全局调用。但是这样定义会出现一些问题，那就是污染了全局变量，如果一个网页开发项目这样定义函数，等到将来修改代码时会出现不小的难度。因此，随着JavaScript的不断深入，我进入了第二阶段。

第二阶段：将函数和变量封装在一个大括号内。请看下面的一个示例：

var TEXTDISPLAY = {
    text: "我的中国心",
    show: function() {
        alert(this.text);
    }
};

TEXTDISPLAY.text = "你不要这样地看着我，我的脸会变成红苹果";
TEXTDISPLAY.show();

实际运行时，就会弹出一个消息框，内容是：你不要这样地看着我，我的脸会变成红苹果。这样定义有一个优点，就是把原来的全局变量和全局函数归在一个全局变量的名下，防止出现名称冲突，但这样定义也会出现一个问题，那就是当TEXTDISPLAY对象的text属性发生改变时，就会影响后续的代码。为了解决这一问题，在第二阶段的基础上，我进入了第三阶段：

第三阶段，返回一个对象，定义多个相似的对象时互不干扰。请看下面的一个示例：

var TEXTDISPLAY = {
    init: function(div) {
        return {
            text: "我的中国心",
            show1: function() {
                div.innerHTML = this.text;
            },
            show2: function(t) {
                div.innerHTML = t;
            }
        }
    }
};

var div = document.getElementById("myDIV");
var t = TEXTDISPLAY.init(div);
t.show1();

这样定义的一个好处就是可以建立通过init方法建立多组对象，使各个对象互不干扰，但是这些对象中的属性和方法都是公共方法，没有属于自己的“私人空间”。解决第三阶段所引发的问题，我有一套新方法，下班后再介绍。如果有什么好的补充方法，欢迎在下方留言。拜拜！