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

2024-04-20 08:36:02 浏览数 (4)

一、使用 new Object 创建对象

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

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

代码语言:javascript复制
var obj = new Object();

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

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

代码语言:javascript复制
obj.name = 'Tom';
obj.age = 18;

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

代码语言:javascript复制
obj.hello = function() {
	console.log("hello");
};

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

代码示例 :

代码语言:javascript复制
<!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复制
		// 使用字面量方式创建 JavaScript 对象
        var person = {
            name: "Tom",
            age: 18,
            hello: function() {
                console.log(this.name   " is "   this.age   " years old");
            }
        };

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

2、构造函数引入

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

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

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

3、构造函数语法

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

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

构造函数 语法如下 :

  • 定义构造函数 : 构造函数 本质 就是一个普通的函数 , 建议 函数名 以大写字母开头 , 用于区分普通函数 ;
代码语言:javascript复制
// 1. 声明构造函数语法
function 构造函数名() {
}
  • 构造函数内构建对象 : 使用 this 关键字为 对象 定义属性和方法 ;
代码语言:javascript复制
// 1. 声明构造函数语法
function 构造函数名() {
	this.属性名 = 属性值;
	this.方法名 = function(){};
}
  • 调用构造函数创建对象 : 通过 new 关键字 可以 调用 构造函数 创建一个新的对象 ;
代码语言:javascript复制
// 2. 使用构造函数创建对象
var obj = new 构造函数名();

完整语法如下 :

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

定义构造函数示例 :

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

调用构造函数创建对象 :

代码语言:javascript复制
// 3. 使用 new 关键字调用构造函数,创建对象
var person = new Person('Tom', 18);

访问对象的属性和方法 :

代码语言:javascript复制
// 4. 访问对象的属性和方法  
console.log(person.uname);
console.log(person.age);
person.hello();

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

代码示例 :

代码语言:javascript复制
<!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>

执行结果 :

0 人点赞