JavaScript 对象实例化

梦里梦外; 2021-09-15 08:46 311阅读 0赞

参考资料：《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="正确的调用" οnclick="aObject.showInfo1()">
    <input type="button" value="错误的调用" οnclick="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" οnclick="person1.infoShow()"><br>
    <input type="button" value="show info on Eve" οnclick="person2.infoShow()">
    
    </body>
    </html>