Js创建对象的几种方式(一)
需求：创建 3 个人的对象（姓名name、年龄age、性别gender、打招呼sayHi）
1、使用字面量的方式创建对象
<script>
let person1 = {
name: 'Alice',
age: 18,
gender: '女',
sayHi: function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
}
let person2 = {
name: 'Bob',
age: 20,
gender: '男',
sayHi: function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
}
let person3 = {
name: 'Jane',
age: 19,
gender: '女',
sayHi: function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
}
person1.sayHi()
person2.sayHi()
person3.sayHi()
console.log(person1, person2, person3)
</script>
优点：简易（单个对象）；缺点：代码冗余，维护不变(多个对象)
2、使用工厂函数创建对象
<script>
function createPerson(name, age, gender) {
let person = {}
person.name = name
person.age = age
person.gender = gender
person.sayHi = function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
return person
}
let person1 = createPerson('Alice', 18, '女')
let person2 = createPerson('Bob', 20, '男')
let person3 = createPerson('Jane', 19, '女')
person1.sayHi()
person2.sayHi()
person3.sayHi()
console.log(person1, person2, person3)
</script>
优点：解决了创建多个对象的代码冗余问题
3、使用构造函数创建对象
3.1有参构造函数（适合创建多个）
<script>
function Person(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
this.sayHi = function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
}
let person1 = new Person('Alice', 18, '女')
let person2 = new Person('Bob', 20, '男')
let person3 = new Person('Jane', 19, '女')
person1.sayHi()
person2.sayHi()
person3.sayHi()
console.log(person1, person2, person3)
</script>
3.2无参构造函数（适合创建单个）
<script>
function Person() { }
let person1 = new Person()
person1.name = 'Alice'
person1.age = 18
person1.gender = '女'
person1.sayHi = function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
let person2 = new Person()
person2.name = 'Bob'
person2.age = 20
person2.gender = '男'
person2.sayHi = function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
let person3 = new Person()
person3.name = 'Jane'
person3.age = 19
person3.gender = '女'
person3.sayHi = function () {
console.log(`我是${this.name},我今年${this.age}岁了`)
}
person1.sayHi()
person2.sayHi()
person3.sayHi()
console.log(person1, person2, person3)
</script>
优点：构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
缺点：每调用一次构造函数，就会堆内存中开辟一个新的函数，浪费内存资源
Js创建对象的几种方式(二)
1、使用原型对象的方式 prototype关键字创建对象
原型对象 ： 当声明一个函数的时候，编译器会自动帮你创建一个与之对应的对象，称之为原型对象
原型对象作用 ： 解决构造函数内存资源浪费 + 全局变量污染
如何访问
- 构造函数.prototype
- 实例对象可以直接访问原型中的一切成员
<script>
function Dog() { }
Dog.prototype.name = '旺财'
Dog.prototype.price = 1000
Dog.prototype.sell = function () {
console.log(`我是${this.name},售价${this.price}元`)
}
let wangcai = new Dog()
wangcai.sell()
console.log(wangcai)
</script>
2、混合模式（原型+构造函数）
<script>
function Dog(name, price) {
this.name = name
this.price = price
}
Dog.prototype.sell = function () {
console.log(`我是${this.name},售价${this.price}元`)
}
let mary = new Dog('美瑞', 10000)
mary.sell()
console.log(mary)
</script>
3、动态原型的方式（可以看做是混合模式的一种特例）
<script>
function Dog(name, price) {
this.name = name
this.price = price
if (typeof Dog.sell == "undefined") {
Dog.prototype.sell = function () {
console.log(`我是${this.name},售价${this.price}元`)
}
Dog.sell = true
}
}
Dog.prototype.sell = function () {
console.log(`我是${this.name},售价${this.price}元`)
}
let mini = new Dog('米妮', 8000)
mini.sell()
console.log(mini)
</script>
