文章目录
- 一、使用 new Object 创建对象
- 1、使用 new Object 创建对象语法
- 2、代码示例 - 使用 new Object 创建对象
- 二、使用 构造函数 创建对象
- 1、字面量 和 new Object 创建对象的方法弊端
- 2、构造函数引入
- 3、构造函数语法
- 4、代码示例 - 构造函数语法
一、使用 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>执行结果 :
