【JavaScript】对象 ③ ( 使用 new Object 创建对象

2024-07-17 02:35| 来源: 网络整理| 查看: 265

一、使用 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复制 JavaScript // 使用 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();

执行结果 :

二、使用构造函数创建对象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复制 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"); }; } // 3. 使用 new 关键字调用构造函数，创建对象 var person = new Person('Tom', 18); // 4. 访问对象的属性和方法 console.log(person.uname); console.log(person.age); person.hello();

执行结果 :

【本文地址】

公司简介

联系我们