原型模式
要了解原型,首先要了解原型对象。
每个函数都有一个prototype属性,这个属性是一个指针,指向原型对象。他的优点是可以让实例共享他(原型对象)的所有属性和方法。
那么怎么理解原型对象呢?
- 创建新函数,该函数会创建一个prototype的属性,属性指向原型对象
- 原型对象自动获得constructor属性,该属性指向prototype所在函数。
- 创建构造函数后,原型对象只有一个constructor属性,其余属性和方法挂载到Object上面。
- 当通过该函数创建实例的时候,实例内部包含一个属性proto,指向原型对象。
function Person () {}
Person.prototype.name = "simoon"
Person.prototype.age = "18"
Person.prototype.job = "web"
Person.prototype.sayName = function () {
console.log(this.name)
}
var person1 = new Person()
var person2 = new Person()
person1.sayName()
person2.sayName()
输出如下:
simoon
simoon
如何确定实例和原型对象的关系?
- isPrototypeOf
console.log(Person.prototype.isPrototypeOf(person1))
console.log(Person.prototype.isPrototypeOf(person2))
2、H5新增:Object.getPrototypeOf(),可以用来方便的获取一个对象的原型。
console.log(Object.getPrototypeOf(person1) === Person.prototype) //true
console.log(Object.getPrototypeOf(person1).name)//simoon
原型链:
每当代码读取某个属性的时候,都会执行一次搜索,目标是具有给定名字的具体属性。如果实例中有的话,就停止查找。如果实例中没有的话,就会查找proto指向的原型对象去查找。
检测一个属性是存在与原型还是实例中?
hasOwnProperty()
console.log(person1.hasOwnProperty("name")) //false
person2.name = "banner"
console.log(person2.hasOwnProperty("name")) //true
// 当重新给person的name属性赋值了,就会返回true
原型与in
单独使用in的时候,它不管属性是原型还是实例的,只要有该属性,都会返回true。
console.log("name" in person1) //true
console.log("name" in person2) //true
通过上面就能知道确定属性是不是原型属性了。
如果in返回true,而hasOwnProperty返回false,那么这个属性就是原型属性。
在es5中,constructor和property的属性是不可枚举的。
如何获得对象的可枚举属性?
Object.keys(Person.prototype)
如何获得对象的所有属性么?
Object.getOwnPropertyNames(Person.prototype)
var keys = Object.keys(Person.prototype)
console.log(keys)
//(4) ["name", "age", "job", "sayName"]
var allKeys = Object.getOwnPropertyNames(Person.prototype)
console.log(allKeys)
//(5) ["constructor", "name", "age", "job", "sayName"]
更简单的原型语法—> 用字面量的方法
person.prototype = {
name: 'simoon',
age: 20,
job: 'web',
sayName () {
alert(this.name)
}
}
这样会很方便,但是会有一个问题
问题:这时候的constructor就不再指向Person了,指向Object.
原因:完全重写对象,相当于new了一个Object.
解决办法:
person.prototype = {
constructor: Person,
name: 'simoon',
age: 20,
job: 'web',
sayName () {
alert(this.name)
}
}
但是这时候,这个constyuctor又是可枚举的,而原生的是不可枚举的.
Es新增的方法解决:
person.prototype = {
name: 'simoon',
age: 20,
job: 'web',
sayName () {
alert(this.name)
}
}
Obeject.defineProperty(Person.prototype, 'constructor', {
enumerable: false,
value: Person
})
原型的动态性
- 如果先创建实例,后修改原型,依然能访问到这个原型的属性。
- 但是如果重写整个原型对象,就不可以了,因为重写之后,就切断了实例和新原型对象的关系。
原型对象有什么问题?
- 它省略了构造函数初始化的参数,所有实例默认情况下参数一致
- 最大的问题是,原型中的属性和方法被实例共享,这对于函数和基本类型合适,但是对于引用类型就不合适了。
Person.prototype = {
name: 'simoon',
age: 20,
job: 'web',
sayName () {
alert(this.name)
},
firends: ['banner', 'conner']
}
var person1 = new Person()
var person2 = new Person()
person1.firends.push('mingming')
console.log(person1.firends)
["banner", "conner", "mingming"]
console.log(person2.firends)
["banner", "conner", "mingming"]
// 这时候我并不想改便person2的firends啊
解决办法这里提供两种:
- 组合使用构造函数和原型模式
function Person(name, age, job) {
this.name = name,
this.age = age,
this.job = job,
this.firends = ['a', 'b']
}
Person.prototype = {
constructor: Person,
sayName () {
console.log(this.name)
}
}
var person1 = new Person()
var person2 = new Person()
person1.firends.push('mingming')
console.log(person1.firends)
//["a", "b", "mingming"]
console.log(person2.firends)
//["a", "b"]
优点:
构造函数上面挂实例属性,原型上面挂方法和共享的属性,每个实例又有自己的副本,同时又共享方法引用,还支持向构造函数传参
2、 动态原型模式
把所有的信息都封装到构造函数中,通过在构造函数中初始化原型,又保持了原型和构造函数的优点。
function Person(name, age, job) {
this.name = name,
this.age = age,
this.job = job,
this.firends = ['a', 'b']
if (typeof this.sayName != 'function') {
Person.prototype.sayName = function () {
console.log(this.name)
}
}
}
var person1 = new Person('simoon', 28, 'web')
person1.sayName()
//simoon