JS中建立对象的方法

JS中建立对象的方法

最近手头一个项目刚完成，下一个显目还在准备中，趁这个空档期，拿起尘封多年的JS书， 重温一遍JS面向对象程序设计，而后就得出下文，算是一个总结吧。

也许，你会说 “建立对象不就是一对花括号的事吗？”，是的，目前咱们最经常使用， 也是最便捷的方式就是所谓的一对花括号的事，也就是咱们常说的JSON对象（严格意义上，这其实不算JSON对象，具体咱们这里不作深刻），以下：

let obj = {
    name:'xiaohong',
    age: 17,
    gender: 'female'
}
复制代码

这是就是咱们常说的对象字面量(Literal)的方法建立对象，应该是目前使用最普遍的方法了。 这总方法基本上等同与下面（建立Object实例）的方法

let obj = new Object()
obj.name = 'xiaohong'
obj.age = 17
obj.gender: 'female'
复制代码

可是因为 对象字面量的方法，比较简洁直观，足以知足大部分场景下的需求，因此被开发着们普遍采用， 而Object实例的方式就不多有人问津了。 不过字面量方法也是有缺点的，缺点就是彻底没有复用性可言，若是须要建立多个对象， 就会有不少重复的代码，好比：

var studentA = {
    name: 'xiaohong'
    age: 17,
    gender: 'female'
}
var studentB = {
    name: 'xiaoming'
    age: 18,
    gender: 'male'
}
var studentC = {
    name: 'lili'
    age: 17,
    gender: 'female'
}
复制代码

不难看出，三个对象只有冒号后面的内容不同，其余的代码都是冗余的，那有什么办法能够避免这个冗余呢？ 日常开发中，若是咱们碰到一个要重复用到的功能的时候，咱们会怎么作？对的， 就是把这个功能封装成一个函数，而后重复调用：

function Student(name,age,gender){
    // 如下代码还能够用es6这样写 return {name,age,gender}
    // 详情请参考es6 属性简写
    return {
        name:name,
        age:age,
        gender:gender
    }
}
// 而后在须要的时候，调用一下这个函数，传进一些参数便可
var studentA = Student('xiaohong',17,'f')
var studentB = Student('xiaoming',18,'m')
var studentC = Student('lili',17,'f')
复制代码

这样是否是简洁不少，每次只要调用一下Student这个函数，而后传进名字，年龄，性别， 就能获得一个你想要的对象了。 这种方法叫 工厂模式 ，是否是真的很像一个加工厂呢？ 这种方法对建立多个对象的时候颇有用， 不过这种方法也是有缺点的，就是没法知道对象的类型，好比， 我想经过条件语句判断studentA是否是一个Student对象，就作不到

typeof studentA === 'Student'   //false
studentA instanceof Student     // false
复制代码

因为工厂模式在对象识别的问题上不堪重任，因此咱们一般用 构造函数 模式来解决对象识别的问题

function Student(name,age,gender){
    this.name = name
    this.age = age
    this.gender = gender
}
// 经过调用构造函数，new一个对象（这个估计是有其余面向对象语言基础的童鞋对容易接受的一种方式）
var studentA = new Student('xiaohong',17,'f')
var studentB = new Student('xiaoming',18,'m')
var studentC = new Student('lili',17,'f')
复制代码

构造函数跟工厂模式的很类似，区别主要在如下2点：

1. 没有返回对象，而是直接把参数赋值给this做用域下的同名变量，由于new的时候， 会把this指向调用new出来的那个实例对象，因此就完成了赋值操做
2. 调用构造函数的时候，在构造函数前面加一个new（ 若是没加new,就当作普通函数使用，做用域会在当前代码块的环境下面，函数里面的值会赋给当前做用域）

经过构造函数new出来的对象，咱们是能检测到它的类型的

studentA instanceof Student // true
studentA instanceof Object  // true
复制代码

事实上，当咱们使用 new 实例化一个构造函数的时候，js其实偷偷的在背后作了4件事，这个也是个比较经典的面试题：

1. 建立一个新对象(prototype 指向构造函数的prototype)
2. 把做用域（this）指给这个对象
3. 执行构造函数的代码
4. 返回这个对象

然而，构造函数也不是没有缺点，使用构造函数建立的对象里面都是数据是没啥问题， 可是若是对象里面有函数（方法）呢？ 仍是上面那个代码，咱们拿来稍微修改一下，须要给学生增长一个学习的技能：

function Student(name,age,gender){
    this.name = name
    this.age = age
    this.gender = gender
    this.study = fucntion() { console.log('我在学习...')}
 }
复制代码

这样咋看起来，也没啥毛病，调用一些实例的study,也能够打印出“我在学习...”

var studentA = new Student('xiaohong',17,'f')
studentA.study()   // 我在学习...
复制代码

可是，若是咱们这样

var studentA = new Student('xiaohong',17,'f')
var studentB = new Student('xiaoming',18,'m')
studentA.study == studentB.study  // false
复制代码

咱们发现，2个实例的study不是指向同一个函数，而是2个不一样的函数，可是他们的功能如出一辙 至关于这样

studentA.study = fucntion() { console.log('我在学习...')}
studentB.study = fucntion() { console.log('我在学习...')}
studentC.study = fucntion() { console.log('我在学习...')}
复制代码

这让强迫症怎么接受？ 事实证实，写代码的，大部分都有强迫症，因而，就有了原型模式 原型模式的原理，就是我不把方法和属性添加到构造函数里面去，我直接添加到构造函数的原型里面去， 因为原型的共享的，因此咱们在这边就解决了冗余：

function Student(){}   // 声明一个空函数
Student.prototype.name = 'xiaohong'
Student.prototype.age = 17
Student.prototype.gender = 'f'
Student.prototype.study = fucntion() { console.log('我在学习...')}

var studentA = new Student()
var studentB = new Student()
studentA.study == studentA.study  // true
复制代码

这样，就能解决函数重复声明的问题，全部的实例，都共享原型上的函数study.然而，函数是共享了没错， 不过其余数据也共享了，全部实例上都会有相同的name,age,gender，这也不是咱们想要的效，这时， 聪明的你确定会想，把数据放在构造函数里面，只把方法放在原型里面:

function Student(name,age,gender){
    this.name = name
    this.age = age
    this.gender = gender
 }
 Student.prototype.study = fucntion() { console.log('我在学习...')}
复制代码

这样把普通的数据放在构造函数里面声明，把函数（方法）放在原型上声明的模式， 咱们称之为组合模式（即组合使用构造函数模式和原型模式），组合模式，既有数据的独立，又有方法的共享 能够说是比较完美的一种对象的建立方式了。ES6的class语法糖实现的原理大致上也是利用组合模式。

以上就是ES5里面建立对象的一些经常使用模式，固然还有一些不经常使用的奇葩的模式，好比动态原型模式， 寄生构造函数模式，稳妥构造函数模式...等等，，这里就不一一列举了，感兴趣的童鞋自行百度一下

好了，关于建立对象的话题，就到这里了，感谢收看！

若是以为对您有用，请给本文的github加个star,万分感谢，另外，github上还有其余一些关于前端的教程和组件，有兴趣的童鞋能够看看，大家的支持就是我最大的动力。