深入对象
创建对象三种方式
<body>
<script>
// 1. 利用字面量创建对象(常用的一种方式)
const o = {
name: '佩奇'
}
console.log(o)
// 2. 利用 new Object 创建对象 (了解)
// const oo = new Object({ name: '佩奇' })
const oo = new Object()
oo.name = '佩奇'
console.log(oo)
// 3. 利用构造函数创建对象
</script>
构造函数
构造函数: 是一种特殊的函数,主要用来创建对象(初始化对象)
使用场景: 常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数来快速创建多个类似的对象
<body>
<script>
// 构造函数:是一种特殊的函数,用来创建对象(并完成初始化对象)
// 1. 构造函数的2个约定 首字母要大写, 利用new关键字来调用函数
// function Pig() {
// }
// console.log(new Pig)
// console.log(Pig())
function Pig(name, age, gender) {
// this.name 属性
// name 是形参也就是属性值
this.name = name
this.age = age
this.gender = gender
// return 123
}
const peiqi = new Pig('佩奇', 6, '女')
console.log(peiqi)
const qiaozhi = new Pig('乔治', 3, '男')
console.log(qiaozhi)
// 2. 构造函数创建对象说明
// 2.1 new 关键字 实例化对象
// 2.2 如果构造函数没有参数,则可以省略小括号
// 2.3 构造函数里面无需写 return
// 2.4 new Object() new Date() 也是在实例化对象
</script>
</body>
说明:
- 使用 new 关键字调用函数的行为被称为实例化
- 实例化构造函数时没有参数时可以省略 ()
- 构造函数内部无需写return,返回值即为新创建的对象
- newObject() new Date()也是实例化构造函数
new 实例化过程
- 创建新空对象
- 构造函数this指向新对象
- 执行构造函数代码
- 返回新对象
实例成员&静态成员
实例成员
实例成员:
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)
<body>
<script>
// 实例成员和静态成员
// 1. 实例成员:实例对象上的属性和方法属于实例成员
function Pig(name) {
this.name = name
}
const peiqi = new Pig('佩奇')
const qiaozhi = new Pig('乔治')
peiqi.name = '小猪佩奇' // 实例属性
peiqi.sayHi = () => { // 实例方法
console.log('hi~~')
}
console.log(peiqi)
console.log(qiaozhi)
console.log(peiqi === qiaozhi)
</script>
说明:
- 为构造函数传入参数,创建结构相同但值不同的对象
- 构造函数创建的实例对象彼此独立互不影响
静态成员
构造函数的属性和方法被称为静态成员(静态属性和静态方法)
<script>
// 2. 静态成员 : 构造函数上的属性和方法称为静态成员
function Pig(name) {
this.name = name
}
Pig.eyes = 2 // 静态属性
Pig.sayHi = function () { // 静态方法
console.log(this)
}
Pig.sayHi()
console.log(Pig.eyes) // 2
</script>
说明:
- 静态成员只能构造函数来访问
- 静态方法中的this指向构造函数
比如 Date.now() Math.PI Math.random()
一切皆对象
引用类型:
Object,Array,RegExp,Date等
基本数据类型:
字符串、数值、布尔、undefined、null
但是,我们会发现有些特殊情况:
其实字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型 包装类型执行过程:
- 创建一个 String 类型的实例
- 调用实例上的特定方法
- 销毁实例
JS中几乎所有的数据都可以基于构造函数创建,不同的构造器创建出来的数据拥有不同的属性和方法
<body>
<script>
// 包装类型
// const str = 'andy'
// console.log(str.length)
// 包装过程
// const str = new String('andy')
// str.substring()
// str = null
</script>
</body>