文章目录
ES5 创建对象
直接对象字面量
const obj = {
name: 'dz',
age: 23
}
使用内置构造函数
const obj = new Object()
obj.name = name
obj.age = age
1.工厂模式
- 套路: 通过工厂函数动态创建对象并返回
- 适用场景: 需要创建多个对象
- 问题:
对象没有一个具体的类型
, 都是Object类型
//返回一个对象的函数===>工厂函数
function createPerson(name, age) {
var obj = {
name: name,
age: age,
setName: function (name) {
this.name = name
}
}
return obj
}
// 创建2个人
var p1 = createPerson('Tom', 12)
var p2 = createPerson('Bob', 13)
// p1/p2是Object类型
function createStudent(name, price) {
var obj = {
name: name,
price: price
}
return obj
}
var s = createStudent('张三', 12000)
// s也是Object
缺点:
- 无法通过constructor识别对象,以为都是来自Object,无法得知来自Person
- 每次通过Person创建对象的时候,所有的say方法都是一样的,但是却存储了多次,浪费资源。
2.构造函数模式
- 套路: 自定义构造函数, 通过new创建对象
- 适用场景: 需要创建多个
类型确定
的对象,与上方工厂模式有所对比 - 问题: 每个对象都有相同的数据, 浪费内存
//定义类型
function Person(name, age) {
this.name = name
this.age = age
this.setName = function (name) {
this.name = name
}
}
var p1 = new Person('Tom', 12)
p1.setName('Jack')
console.log(p1.name, p1.age)
console.log(p1 instanceof Person)
function Student (name, price) {
this.name = name
this.price = price
}
var s = new Student('Bob', 13000)
console.log(s instanceof Student)
var p2 = new Person('JACK', 23)
console.log(p1, p2)
优点:
- 通过constructor或者instanceof可以识别对象实例的类别
- 构造函数简化了工厂模式的操作过程, 并且通过实例化对象, 可以知道该对象的标识, 能识别是被哪一个
构造函数
创造的, 使用instanceof
来判断是否属于某个构造函数的实例
缺点:
- 多个实例的say方法都是实现一样的效果,但是却存储了很多次(两个对象实例的say方法是不同的,因为存放的地址不同)
认识构造函数
JavaScript中的构造函数是怎么样的?
- 构造函数也是一个普通的函数,从表现形式来说,和千千万万个普通的函数没有任何区别;
- 那么如果这么一个普通的函数被使用new操作符来调用了,那么这个函数就称之为是一个构造函数;
3.原型模式
function Person() {}
Person.prototype.name = 'lisi';
Person.prototype.say = function() {
alert(this.name);
}
Person.prototype.friends = ['xiaofeixa'];
var person1 = new Person();
优点:
-
say方法是共享的了,所有的实例的say方法都指向同一个。
-
可以动态的添加原型对象的方法和属性,并直接反映在对象实例上。
var person1 = new Person() Person.prototype.showFriends = function() { console.log(this.friends) } person1.showFriends() //['xiaofeixia']
缺点:
-
出现引用的情况下会出现问题具体见下面代码:
var person1 = new Person(); var person2 = new Person(); person1.friends.push('zhangsan'); console.log(person2.friends) //['xiaofeixia', 'zhangsan']
因为js对引用类型的赋值都是将地址存储在变量中,所以person1和person2的friends属性指向的是同一块存储区域。
-
第一次调用say方法或者name属性的时候会搜索两次,第一次是在实例上寻找say方法,没有找到就去原型对象(Person.prototype)上找say方法,找到后就会在实例上添加这些方法or属性。
-
所有的方法都是共享的,没有办法创建实例自己的属性和方法,也没有办法像构造函数那样传递参数。
-
但是有一个大问题就是, 大家都是共享的, 因此每一个实例都可能更改这个原型里面的属性, 后面创建的对象包含的属性会覆盖上次一创建的对象的属性
注意:
-
优点②中存在一个问题就是直接通过对象字面量给
Person.prototype
进行赋值的时候会导致constructor
改变,所以需要手动设置,其次就是通过对象字面量给Person.prototype
进行赋值,会无法作用在之前创建的对象实例上var person1 = new Person() Person.prototype = { name: 'Pan', setName: function(name){ this.name = name } } person1.setName() //Uncaught TypeError: person1.set is not a function(…)
这是因为对象实例和对象原型直接是通过一个指针链接的,这个指针是一个内部属性[[Prototype]],可以通过
__proto__
访问。我们通过对象字面量修改了Person.prototype指向的地址,然而对象实例的__proto__
,并没有跟着一起更新,所以这就导致,实例还访问着原来的Person.prototype
,所以建议不要通过这种方式去改变Person.prototype
属性
对于constructor
丢失的解决办法:
手动添加
Person.prototype = {
constructor: Person,
name: 'Pan',
setName: function(name){
this.name = name
}
}
上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true.
- 默认情况下, 原生的constructor属性是不可枚举的.
- 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
Object.defineProperty(Person.prototype, "constructor", {
enumerable: false;
value: Person
})
4.构造函数和原型组合模式(组合模式)
- 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
- 适用场景: 需要
创建多个类型确定
的对象 - 放在原型上可以节省空间(只需要加载一遍方法)
//在构造函数中只初始化一般函数
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.setName = function (name) {
this.name = name
}
var p1 = new Person('Tom', 23)
var p2 = new Person('Jack', 24)
console.log(p1, p2)
优点:
- 解决了原型模式对于引用对象的缺点()
- 解决了原型模式没有办法传递参数的缺点
- 解决了构造函数模式不能共享方法的缺点
这种方式结合两者的有点, 每个实例拥有自己的属性和方法, 以及共享相同的方法, 用的较多一种模式
5.动态原型模式
function Person(name, age) {
this.name = name
this.age = age
if(typeof this.sayname != 'function') {
Person.prototype.sayname = () => {
console.log(this.name)
}
}
}
const p1 = new Person('dz', 23)
console.log(p1.sayname) // -> dz
优点:
-
可以在初次调用构造函数的时候就完成原型对象的修改
-
修改能体现在所有的实例中
-
这里只在
sayname
方法不存在的情况下才添加到原型中, 只会在初次调用
构造函数时才会执行.这样的代码, 使得每个对象的name、age、sex都是
各自的
(不共有), 然后函数写在原型上, 就又是共享的.
注意: 使用动态原型模式时, 不能
使用 对象字面量重写原型
. 如果在已经创建了实例的情况下重写原型, 那么就会切断现有实例与新原型之间的联系.
6.寄生构造函数模式
function Person(name) {
var o = new Object()
o.name = name
o.say = function() {
alert(this.name)
}
return o
}
var peron1 = new Person('xiaofeixia')
优点:
- 和工厂模式基本一样,除了多了个new操作符
缺点:
- 和工厂模式一样,不能区分实例的类别,所以如果用
instanceof
操作符来检测的话, 结果只能是false
。
7.稳妥构造模式
function Person(name) {
var o = new Object()
o.say = function() {
alert(name)
}
}
var person1 = new Person('xiaofeixia');
person1.name // undefined
person1.say() //xiaofeixia
优点:
- 安全,name好像成为了私有变量,只能通过say方法去访问
缺点:
- 不能区分实例的类别
- 即使有其他代码会给这个对象添加方法或属性, 但也不可能有别的办法访问传入到构造函数中的原始数据 .
- 和工厂模式一样,不能区分实例的类别,所以如果用
instanceof
操作符来检测的话, 结果只能是false
。