深入对象
• 创建对象三种方式:
1. 利用对象字面量创建对象
<script>
const i ={
name:'佩奇'
}
</script>
2. 利用 new Object 创建对象
<script>
const i = new Object({name:'佩奇'})
console.log(i); //{name:'佩奇'}
</script>
3. 利用构造函数创建对象
这里首先要明白构造函数是什么:构造函数 :是一种特殊的函数,主要用来初始化对象
构造函数的使用场景:常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一 遍,此时可以通过构造函数来快速创建多个类似的对象
<script>
function Pig(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇',6,'女')
// 创建乔治对象
const George = new Pig('乔治',3,'男')
// 创建猪妈妈对象
const Mum = new Pig('猪妈妈',30,'女')
// 创建猪爸爸对象
const Dad = new Pig('猪爸爸',32,'男')
console.log(Peppa); //age: 6, gender: "女", name: "佩奇"
</script>
构造函数在技术上是常规函数。 不过有两个约定:
1. 它们的命名以大写字母开头。
2. 它们只能由 "new" 操作符来执行
说明:
1. 使用 new 关键字调用函数的行为被称为实例化
2. 实例化构造函数时没有参数时可以省略 ()
3. 构造函数内部无需写return,返回值即为新创建的对象
4. 构造函数内部的 return 返回的值无效,所以不要写return
5. new Object() new Date() 也是实例化构造函数
构造函数的实例化执行过程:
1. 创建新对象
2. 构造函数this指向新对象
3. 执行构造函数代码,修改this,添加新的属性
4. 返回新对象
构造函数的实例成员: 通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。
1. 实例对象的属性和方法即为实例成员
2. 为构造函数传入参数,动态创建结构相同但值不同的对象
3. 构造函数创建的实例对象彼此独立互不影响
构造函数的静态成员: 构造函数的属性和方法被称为静态成员
1. 构造函数的属性和方法被称为静态成员
2. 一般公共特征的属性或方法静态成员设置为静态成员
3. 静态成员方法中的 this 指向构造函数本身
内置构造函数
在 JavaScript 中最主要的数据类型有 6 种: 基本数据类型:字符串、数值、布尔、undefined、null 引用类型: 对象 但是,我们会发现有些特殊情况:
<script>
// 普通字符串
const str = 'andy'
console.log(str.length); //4
</script>
其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型。 JS中几乎所有的数据都可以基于构成函数创建
引用类型 : Object,Array,RegExp,Date 等
包装类型 : String,Number,Boolean 等
Object:
Object 是内置的构造函数,用于创建普通对象。
<script>
// 通过构造函数创建普通对象
const user = new Object({name:'小李',age:18})
</script>
推荐使用字面量方式声明对象,而不是 Object 构造函数
Array
Array 是内置的构造函数,用于创建数组
<script>
const arr = new Array(3,5)
console.log(arr); //[3,5]
</script>
创建数组建议使用字面量创建,不用 Array构造函数创建
String
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法
<script>
// 字符串类型
const str ='hello'
// 统计字符的长度(字符数量)
console.log(str.length);
// 数值类型
const price = 12.345
// 保留两位小数
price.toFixed(2)
</script>
之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被 称为包装类型
Number
Number 是内置的构造函数,用于创建数值 常用方法: toFixed() 设置保留小数位的长度
<script>
// 数值类型
const price = 12.345
// 保留两位小数 四舍五入
console.log(price.toFixed(2)); //12.35
</script>