New个对象过情人节

一年一度的情人节又到了，刚刚熬过春节父母、七大姑八大姨的找对象和催婚唠叨，如今又饱受朋友圈各路大仙秀恩爱的摧残，单身汪们属实太难了。嘻嘻，但是像我这种每天都要和许多对象打交道的人怕是体会不到你们的烦恼了。那么，灵魂拷问：你有对象嘛？没有对象怎么办，没关系，咱帮你 New 一个

首先，我们闲谈一下什么是对象：此对象非彼对象哦，在JavaScript中，对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

• 属性：某个对象所具有的某种特性（或静态特征）：例如人的姓名、性别、年龄、身高、体重......
• 方法：某个对象所具备的某种功能（或动态行为）：例如：唱、跳、rap、洗衣、做饭、撒娇......

创建简单对象

下面就是一个简单的人物对象

let obj = {
    name: '张三',
    sex: '男',
    age: 18,
    height: '172cm',
    weight: '65kg',
    sayHi: function () {
        console.log('吃了嘛，您嘞')
    },
    sing: function () {
        console.log('只因你太美')
    }
}
​
// 在控制台打印这个对象
console.log(obj)
​
// 通过对象名.属性名来访问对象里面的属性值
console.log(obj.name) // 张三
​
// 通过对象名.方法名()来调用对象的某种功能
obj.sayHi() // 吃了嘛，您嘞
obj.sing() // 只因你太美

• 优点：创建简单
• 创建多个对象时会使得代码冗余、维护不便

工厂模式创建对象

• 在函数内创建一个对象，赋予属性及方法后再将对象返回

function Boy(name, sex, age, height, weight) {
    // (1) 创建一个空对象
    let boy = {}
    // (2) 给对象赋值
    boy.name = name
    boy.sex = sex
    boy.age = age
    boy.height = height
    boy.weight = weight
    boy.sayHi = function() {
        console.log('多喝热水');
    }
    // (3) 返回好创建的对象
    return boy
}
​
let boyFriend = Boy('张三', '男', 18, '172kg', '65kg')
console.log(boyFriend.name) // 张三
​
boyFriend.sayHi() // 多喝热水

• 优点：解决创建多个对象代码冗余
• 缺点：每次通过Boy创建对象的时候，所有的sayHi方法都是一样的，但是却存储多次，造成内存资源浪费

构造函数模式创建对象

• 构造函数作用与工厂函数一致，都是创建对象，构造函数创建实例对象要结new 这个关键字来使用

function Girl(name, sex, age, height, weight, cup) {
    this.name = name
    this.sex = sex
    this.age = age
    this.height = height
    this.weight = weight
    this.cup = cup
​
    this.sayHi = function (arg) {
        console.log('i love you ' + arg)
    }
​
    this.cook = function () {
        console.log('煮饭给你吃哦')
    }
}
​
let girlFriend = new Girl('李四', '女', 18, '165cm', '50kg', 'C')
console.log(girlFriend.name) // 李四
​
girlFriend.sayHi('张三') // i love you 张三
girlFriend.cook() // 煮饭给你吃哦

• 优点：构造函数代码更加简洁
• 缺点：内存资源浪费

原型模式创建对象

• 每个函数都会创建一个prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例 共享的属性和方法。实际上，这个对象就是通过调用构造函数创建的对象的原型

function Person() {}
​
Person.prototype.name = '张三'
Person.prototype.sex = '男'
Person.prototype.height = '172kg'
Person.prototype.weight = '65kg'
​
Person.prototype.sayHi = function () {
    console.log('你好')
}
​
let p1 = new Person()
let p2 = new Person()
​
console.log(p1.name) // 张三
console.log(p2.name) // 张三
​
p1.sayHi() // 你好
p2.sayHi() // 你好

• 好处：定义的属性和方法可以被对象实例共享
• 缺点：不能创建自己的属性

构造函数模式和原型组合模式

• 构造函数模式 用于定义实例属性，而原型模式 用于定义方法和共享的属性

function Person(name, sex, age, height, weight) {
    this.name = name
    this.sex = sex
    this.age = age
    this.height = height
    this.weight = weight
}
​
Person.prototype.sayHi = function () {
    console.log('你好')
}
​
let p1 = new Person('张三', '男', 18, '172kg', '65kg')
let p2 = new Person('李四', '女', 18, '165kg', '50kg')
​
p1.sayHi() // 你好
p2.sayHi() // 你好

• 好处：解决了上述所有缺点

new 工作原理

行文至此，简单的讲述一下new的工作原理，这也是面试的高频知识点之一

• 创建一个空的简单对象 { }
• 让this指向这个对象，即this= { }
• 为这个对象添加属性
• 返回这个对象，return this