(十一) js中对象创建的方式

个人想法: 对于面向对象编程的实现方式, 无论是 像java python c++等语言中的类,或者说js中的原型继承, 说到底都只是一种实现方式而已, 就像下雨天可能绝大多数人的习惯是打伞, 但是我穿雨衣也同样可以, 好与不好因人而异, 因需求而异

---

1. 通过字面量的方式

var person = {
  name: '猫',
  age: 18
}

2. 工厂模式

工厂: 批量生产物品, 不对用户暴露生产细节, 用户只需要会使用就行

同样, 工厂模式 也是这样一个原理, 不会对用户暴露创建逻辑, 并且是通过封装特定的接口来创建新的对象

**步骤: **

• 新建一个对象
• 定义属性和方法
• return出去

function createPerson(name, age) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  obj.sing = function () {
    console.log(this.name, '会唱歌');
  }

  return obj
}

var p1 = createPerson('张三', 18)
var p2 = createPerson('李四', 20)

3. 构造函数模式

在ES6之前, 我们约定俗成的将 首字母大写的函数 定义为构造函数

function Person(name, age) {
  this.name = name
  this.age = age
  this.introduce = function () {
    console.log('我的名字是:', this.name, "我的年龄是:", this.age);
  }
}

const p1 = new Person('张三', 18)
const p2 = new Person('李四', 18)

p1.introduce()		// 我的名字是: 张三 我的年龄是: 18
p2.introduce()		// 我的名字是: 李四 我的年龄是: 20

使用构造函数来模拟类会使得每个方法会在每个实例都创建一次, 也就意味着不同实例的同名方法实际上是不一致的

4. 原型模式

简单回顾一下原型和原型链:

• 每个函数都有一个prototype属性, 指向一个原型对象
• 每个对象都有一个__proto__属性, 指向其构造函数的prototype

因此利用原型和原型链, 我们可以不必在构造函数中定义对象的信息, 而是将这些信息直接添加到原型对象中

function Person(nme) { }

Person.prototype.hobby = ['唱歌', '跳舞']
Person.prototype.surname = '猫'

Person.prototype.introduce = function () {
  return ('我的爱好是:', this.hobby)
}

const p1 = new Person()
const p2 = new Person()

console.log(p1.surname, p2.surname);		// 猫 猫
console.log(p1.introduce());			// ["唱歌", "跳舞"]
console.log(p2.introduce());			// ["唱歌", "跳舞"]

5. 组合使用构造函数和原型

是最常见、使用最广泛的方式

顾名思义: 就是将构造函数模式和原型模式结合起来使用, 取其精华, 剔其糟粕

• 构造函数模式定义实例属性
• 原型模式定义共有属性和方法

function Person(name) {
  this.name = name
}

Person.prototype = {
  surname: '猫',
  introduce: function () {
    console.log('我的姓名是: ', this.surname + this.name);
  }
}

const p1 = new Person('三')
const p2 = new Person('四')

p1.introduce()		// 我的姓名是:  猫三
p2.introduce()		// 我的姓名是:  猫四

6. 动态原型模式

动态原型模式将所有信息都封装在了构造函数中，初始化的时候，通过检测某个应该存在的方法时候有效，来决定是否需要初始化原型

if判断只会在初次调用构造函数时才会执行, 之后再调用不会执行

function Person(name) {
  this.name = name

  if (typeof this.introduce != 'function') {
    this.introduce = function () {
      return this.name
    }
  }
}

const p1 = new Person('张三')
console.log(p1.introduce());		// 张三

7. 寄生构造函数模式

这种模式的基本思想就是创建一个函数，该函数的作用仅仅是封装创建对象的代码，然后再返回新建的对象

function Person(name, age) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  obj.sing = function () {
    console.log(this.name, '会唱歌');
  }

  return obj
}

var p1 = new Person('张三', 18)
var p2 = new Person('李四', 20)

这种模式与工厂模式没有什么不同, 非得要找出个不一样, 该模式用了new关键字, 并且把封装的函数首字母大写,当构造函数叫

8. 稳妥构造函数模式

所谓 稳妥 就是指 没有公共属性, 而且方法也不引用this

function Person(name) {
  var obj = new Object()
  obj.name = name

  obj.sayName = function () {
    return name
  }

  return obj
}

const p1 = Person('猫九')
console.log(p1.sayName());		// 猫九