创建对象的方式 (需要能够方便我们批量创建对象)
-
- 字面量的方式 这个方式不合适, 不利于批量创建
-
- 内置构造函数 这个方式不合适, 不利于批量创建
-
- 工厂函数的方式 其实就是 创建一个函数, 但是函数内部可以创建一个对象, 我们把这种函数叫做工厂函数
//1. 字面量的方式
let obj = {
name: 'QF001',
age: 18
}
//2. 内置构造函数
let obj = new Object()
// 3. 工厂函数
function createObj(num) {
// 3.1 手动创建一个对象
const obj = {}
// 3.2 手动给对象上添加一些属性
obj.name = 'QF001' // 添加一个 固定的字符串, 每次创建对象他的属性都是 ''QF001
obj.age = num // 利用形参给对象的属性赋值一个 '变量', 这样每次创建对象时都可以修改这个属性的值
// 3.3 手动给对象返回
return obj
}
let obj1 = createObj(18)
let obj2 = createObj(66)
console.log(obj1)
console.log(obj2)
自定义构造函数的方式
什么是构造函数？
- 本质上就是一个普通函数, 如果再调用的时候, 前边加上一个关键字 new，那么我们把这种函数叫做 构造函数。
- 构造函数的书写：
-
- 构造函数的函数名首字母 大写 (建议, 非强制), 目的就是为了和普通函数做一个区分
-
- 构造函数内 不要写 return， 如果 return 的是一个 基本数据类型, 写了也没用， 如果 return 的是一个 引用数据类型, 写了就会导致构造函数没用。
-
- 构造函数调用时, 必须和 new 关键字连用、如果不连用, 也能调用, 但是构造函数就没用了。
-
- 构造函数内部的 this 当一个函数 和 new 关键字连用的时候, 那么我们说这个函数是 构造函数，然后这个函数内部的 this 指向本次调用被自动创建出来的那个对象
-
- 构造函数不能使用 箭头函数，因为箭头函数内部没有 this
// 构造函数的书写
function Person(name, age) {
// 因为 构造函数自动创建出来的对象可以通过 this 来访问, 所以我们需要向这个对象上添加属性的时候, 可以通过 this 来添加
this.name = name
this.age = age
this.a = '我是随便添加的一个属性 a, 我是固定的内容'
// return '我是一个 没有意义的字符串'
// return {
// t: '当你看到我的时候, 说明构造函数失效了'
// }
}
const p1 = new Person('QF666', 18)
console.log(p1)
构造函数的缺点
构造函数内部 如果有这个引用数据类型, 比如函数在多次调用构造函数时, 每一次都会重新创建一个函数, 必然会造成这个内存空间的浪费。
// 原版构造函数 (有小问题)
function Person(name, age) {
this.name = name
this.age = age
this.a = '我是随便添加的一个属性 a, 我是固定的内容'
this.fn = function () {
console.log('我是 fn 函数')
}
}
// 更新版 构造函数
function winFn() {
console.log('我是 fn 函数')
}
function Person(name, age) {
this.name = name
this.age = age
this.a = '我是随便添加的一个属性 a, 我是固定的内容'
this.fn = winFn
}
const p1 = new Person('QF666', 18)
p1.fn()
const p2 = new Person('QF001', 99)
const p3 = new Person('QF001', 99)
