【JavaScript】对象 ③ ( 使用 new Object 创建对象 | 使用构造函数创建对象 | 构造函数语法 | 使用字面量和 new Object 创建对象的方法弊端 )

韩曙亮

发布于 2024-04-20 08:36:02

550

发布于 2024-04-20 08:36:02

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、使用 new Object 创建对象

1、使用 new Object 创建对象语法

使用 new Object 创建对象语法如下 :

var obj = new Object();

创建后的对象是一个空对象 , 后期可以通过追加的方法 , 追加属性和方法 ;

使用 . 操作符追加属性 , 示例如下 :

obj.name = 'Tom';
obj.age = 18;

使用 . 操作符追加方法 , 使用函数表达式语法 , 示例如下 :

obj.hello = function() {
	console.log("hello");
};

2、代码示例 - 使用 new Object 创建对象

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 使用 new Object 创建对象

        // 创建一个空对象
        var person = new Object();

        // 为对象追加属性
        person.name = 'Tom';
        person.age = 18;

        // 为对象追加方法
        person.hello = function() {
            console.log("hello");
        };

        // 访问对象中的属性
        console.log("name : " + person.name + " , age : " + person.age);

        // 调用对象中的方法
        person.hello();
    </script>
</head>

<body>
</body>

</html>

执行结果 :

二、使用构造函数创建对象

1、字面量和 new Object 创建对象的方法弊端

在 JavaScript 中 , 使用字面量和 new Object 的方式创建的对象 , 一次只能创建一个对象 , 而且需要写大量的初始化代码 ;

如果要创建大量的对象 , 如 : 100 个对象 , 使用上述字面量和 new Object 的方式 , 就不合适了 , 会浪费大量的代码空间 ;

字面量创建对象 , 每个对象创建都要写很多代码 ;

		// 使用字面量方式创建 JavaScript 对象
        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                console.log(this.name + " is " + this.age + " years old");
            }
        };

这里引入一个新的创建对象的方式 - 使用 " 构造函数 " 方式创建对象 ;

2、构造函数引入

创建对象时 , 属性和方法的结构都是相同的 , 只是属性值不同 , 这里就可以通过构造函数只设置不同的属性值 , 就可以实现批量构造对象 ;

构造函数的也是一个函数 , 只是其中的函数体不是普通的代码 , 而是一个对象 ;

构造函数的本质就是把对象中的属性和方法抽象出来 , 封装到构造函数的函数体中 ;

3、构造函数语法

在 JavaScript 中 , 可以使用 " 构造函数 " 来创建对象 ,

构造函数本质上是一个普通的函数 , 通常情况下将构造函数函数名的首字母大写 , 以区别于其他普通函数 ;

构造函数语法如下 :

定义构造函数 : 构造函数本质就是一个普通的函数 , 建议函数名以大写字母开头 , 用于区分普通函数 ;

// 1. 声明构造函数语法
function 构造函数名() {
}

构造函数内构建对象 : 使用 this 关键字为对象定义属性和方法 ;

// 1. 声明构造函数语法
function 构造函数名() {
	this.属性名 = 属性值;
	this.方法名 = function(){};
}

调用构造函数创建对象 : 通过 new 关键字可以调用构造函数创建一个新的对象 ;

// 2. 使用构造函数创建对象
var obj = new 构造函数名();

完整语法如下 :

// 1. 声明构造函数语法
function 构造函数名() {
	this.属性名 = 属性值;
	this.方法名 = function(){};
}
// 2. 使用构造函数创建对象
var obj = new 构造函数名();
// 3. 调用对象属性
console.log(obj.属性名);
// 4. 调用对象方法
obj.方法名();

定义构造函数示例 :

// 1. 定义构造函数  
function Person(uname, age) {  
    // 2. 在构造函数内部定义属性和方法  
    this.uname = uname;  
    this.age = age;  
      
    this.hello = function() {  
        console.log( this.uname + " is " + this.age + " years old");
    };  
}

调用构造函数创建对象 :

// 3. 使用 new 关键字调用构造函数，创建对象
var person = new Person('Tom', 18);

访问对象的属性和方法 :

// 4. 访问对象的属性和方法  
console.log(person.uname);
console.log(person.age);
person.hello();

4、代码示例 - 构造函数语法

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 使用 构造函数 创建对象

        // 1. 定义构造函数  
        function Person(uname, age) {
            // 2. 在构造函数内部定义属性和方法  
            this.uname = uname;
            this.age = age;

            this.hello = function() {
                console.log(this.uname + " is " + this.age + " years old");
            };
        }

        // 3. 使用 new 关键字调用构造函数，创建对象
        var person = new Person('Tom', 18);

        // 4. 访问对象的属性和方法  
        console.log(person.uname);
        console.log(person.age);
        person.hello();
    </script>
</head>

<body>
</body>

</html>

执行结果 :