JavaScript 对象实例化

最新推荐文章于 2025-10-10 20:40:52 发布

原创最新推荐文章于 2025-10-10 20:40:52 发布 · 1.4w 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

本文介绍了JavaScript中通过内置对象和构造函数创建对象的方法。利用Object内置对象可以创建空白对象并添加属性与方法，通过构造函数则能批量实例化具有相同属性和方法的对象。

参考资料：《JavaScript入门经典》

利用内置对象创建直接实例

JavaScript有一个内置对象Object，利用它可以创建一个空白的对象。

aObject = new Object();

添加属性

这样，我们就创建了没有任何属性和方法的空白对象。现在我们可以用以下方法为对象添加属性：

aObject.info = "I am a obeject";

现在，我们成功为aObject对象添加了一个名为info的属性，它是一个文本字符串。

添加方法

为对象添加方法也很简单，首先我们需要定义一个函数，然后把函数关联到aObject对象上就可以了。如

function show(){
alert(this.info);}//定义一个函数
aObject.showInfo=show; //附加到aObject的方法上
aObject.showInfo();// 调用showInfo方法

注意：把函数关联到对象上时，不能包括函数括号，只能使用函数名称。因为我们是要把函数show（）赋予aObject.showInfo方法，而不是调用函数。

如果加上括号，如

aObject.showInfo=show();// 表示调用函数，并把函数的返回值赋予aObject.showInfo

在这里，我们定义函数的时候，用到了this关键字，在以这种方式使用时，this指代当前调用这个函数的对象。

但是如果直接调用show（）函数时，会显示"undefined",因为这时候调用函数的对象是全局对象window，而window对象并没有名为info的属性。

事实上，给对象设置方法还有一种更简单方便的方法，那就是使用匿名函数。

aObject.showInfo=function () {
            alert(this.info);
        } // 同样实现了给aObject对象添加了showInfo方法。但不需要给自定义的函数命名，所以被叫做匿名函数

使用类似的语句，我们可以给实例化的对象添加任意多的属性和方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script>
        aObject = new Object();
        aObject.info = "I am a Object";
        function  show() {
            alert(this.info);
        }
        aObject.showInfo1 = show;
        // aObject.showInfo=function () { 两种方法有同样的效果
        //     alert(this.info);
        // }

    </script>
</head>

<input type="button" value="正确的调用" onclick="aObject.showInfo1()">
<input type="button" value="错误的调用" onclick="show()">

</body>
</html>

利用构造函数实例化对象

当我们需要实例化多个对象时，有必要使用构造函数来创建对象。

构造函数的声明

       function Person(personName) { // 括号内为参数，可以设置多个参数来定制对象。
            this.name = personName; // 将传入的personName值赋予name属性
            this.info = 'I am called' + this.name; //设置info属性
            this.infoShow = function () {   // 利用匿名函数添加方法
                alert(this.info);
            }
        }

对象实例化

    var person1 = new Person('Adam');
    var person2 = new Person('Eve'); //利用构造函数实例化了两个对象，并根据传入的参数的不同，定制了两个不同的对象。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script>
        function Person(personName) {
            this.name = personName;
            this.info = 'I am called' + this.name;
            this.infoShow = function () {
                alert(this.info);
            }
        }
            var person1 = new Person('Adam');
            var person2 = new Person('Eve');

    </script>
</head>
<body>
<input type="button" value="show info on Adam" onclick="person1.infoShow()"><br>
<input type="button" value="show info on Eve" onclick="person2.infoShow()">

</body>
</html>