- 构造函数
- constructor和instanceof区别
- 构造函数和普通函数区别
- 原型模式
- 理解原型对象
- isPrototypeOf()和Object.getPrototypeOf()
- hasOwnProperty()
- 原型和in操作符
- 更简单的原型语法
- 原型的动态性
- 原型对象的问题
构造函数
要创建构造函数的新实例,必须使用new操作符。new是调用的意思,调用构造函数会经历以下4个步骤:
(1)创建一个新对象
(2)将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
(3)执行构造函数中的代码(为这个新对象添加属性)
(4)返回新对象
创建的新对象有一个constructor(构造函数)属性,该属性指向构造函数。
constructor和instanceof区别
实例对象的constructor指向的是创建这个实例的构造函数,具体某一个。
instanceof是检测实例对象的对象类型,也可以检测是不是具体某个构造函数的实例。
构造函数和普通函数的区别
构造函数和普通函数的唯一区别,就在与调用它们的方式不同。构造函数是用new来调用,普通函数是'.'后面加上()来调用。构造函数也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过new操作符来调用,那它就可以作为构造函数;而任何函数如果不通过new操作符来调用,那它跟普通函数没有区别,另外构造函数的首字母是大写。
原型模式
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。
理解原型对象
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。
当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性)指向构造函数的原型对象,这个指针叫[[prototype]]或写成proto,这个属性对脚本则是完全不可见的。
isPrototypeOf()和Object.getPrototypeOf()
isPrototypeOf()方法是用来判断某个对象的原型在另外一个对象的原型链上,返回的是布尔值。
Object.getPrototypeOf()方法是返回对象的原型。例:
function Person () {}
var person1 = new Person()
console.log(Person.prototype.isPrototypeOf(person1)) // true
console.log(Object.prototype.isPrototypeOf(person1)) // true
console.log(Object.prototype.isPrototypeOf(Person)) // true
console.log(Object.getPrototypeOf(person1) === Person.prototype) // true
hasOwnProperty()
这个方法是检测一个属性是存在于实例中还是在原型中,如果是实例中返回true,如果不是返回false。
原型和in操作符
有两种方式使用in操作符:单独使用和在for-in循环中使用。在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。例:
function Person () {}
Person.prototype.name = 'nike'
var person1 = new Person()
console.log('name' in person1) // true
person1.name = 'addidas'
console.log('name' in person1) // true
利用这个特点可以判断属性存在于实例中还是在原型中,例:
function Person () {}
Person.prototype.name = 'nike'
var person1 = new Person()
person1.age = 18
function hasProperty (object, value) {
return !object.hasOwnProperty(value) && (value in object)
}
console.log(person1, 'name') // true 说明name在原型中
console.log(person1, 'age') // false 说明age在实例中
在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括于原型中的属性。屏蔽了原型中不可枚举属性(即将enumerable标记为false的属性)的实例属性也会在for-in循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的。例:
var o = {
toString: function () {
return 'my object'
}
}
for (var prop in o) {
if (prop === 'toString') {
console.log('found toString')
}
}
通过上面的例子我们可以看到定义的toString属性会屏蔽原型上的toString方法,原型上的toString方法不可枚举,但是这个方法定义在实例上就可以被枚举。
要取得对象上所有可枚举的实例属性,可以使用Object.keys()方法,这个方法接受一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。例:
function Person () {}
Person.prototype.name = 'nike'
Person.prototype.age = 29
Person.prototype.job = 'software engineer'
Person.prototype.sayName = function () {
console.log(this.name)
}
var keys = Object.keys(Person.prototype)
console.log(keys) // ["name", "age", "job", "sayName"]
var p1 = new Person()
p1.name1 = 'addidas'
p1.age1 = 10
var p1keys = Object.keys(p1)
console.log(p1keys) // ["name1", "age1"]
var p2keys = []
for (var value in p1) {
p2keys.push(value)
}
console.log(p2keys) // ["name1", "age1", "name", "age", "job", "sayName"]
console.log(Object.getOwnPropertyNames(Person.prototype))
// ["constructor", "name", "age", "job", "sayName"]
console.log(Object.getOwnPropertyNames(p1))
// ["name1", "age1"]
从上面的例子中我们可以看到上面几种方法的区别:
Object.keys()方法取得对象上所有可枚举的属性,只是在实例
上
for in 方法取得对象上所有可枚举的属性,不管在实例上还是在原型上
。
Object.getOwnPropertyNames()方法取得对象上所有实例
属性,无论是否可枚举
更简单的原型语法
我们发现前面例子中每添加一个属性和方法都要敲一遍Person.prototype。为减少不必要的输入,可以用对象字面量来重写整个原型对象,例:
function Person () {}
Person.prototype = {
name: 'nike',
age: 29
}
我们将Peroson.prototype设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor属性不再指向Peroson了,而是指向Object构造函数。尽管instanceof操作符还能返回正确的结果,但通过constructor已经无法确定对象的类型了。
接上面的代码
var friend = new Person()
console.log(friend instanceof Object) // true
console.log(friend instanceof Person) // true
console.log(friend constructor == Person) // false
console.log(friend constructor == Object) // true
如果constructor的值真的很重要,可以像下面这样特意将它设置回适当的值。
function Person () {}
Person.prototype = {
constructor: Person,
name: 'nike',
age: 29
}
这样子constructor就会重新指向Person,但是有一个问题,以这样方法重设constructor属性会导致它的enumerable特性被设置为true,默认情况下是不可枚举的,所以这时候可以用Object.defineProperty()来设置enumerable的值。
原型的动态性
我们对原型对象的修改能够立即从实例上反应出来,即使先创建了实例后修改原型也照样如此,例:
var friends = new Person()
Person.prototype.sayHi = function () {
console.log('hi')
}
friends.sayHi() // hi
如果是我们重写原型对象,那么情况就会不一样了,我们知道,调用构造函数时
会为实例添加一个指向最初原型的[[prototype]]指针
,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。请记住:实例中的指针仅指向原型,而不指向构造函数,例:
function Person () {}
var person1 = new Person()
Person.prototype = {
constructor: Person,
name: 'nike',
age: 29,
friends: ['sha', 'he'],
sayName: function () {
console.log(this.name)
}
}
console.log(person1.sayName()) // error
上面的例子可以看到,当我们new一个实例的时候person1就已经指向了Person最初的原型,这时候重写原型就已经切断了与任何之前已经存在的对象实例之间的联系。
原型对象的问题
原型对象也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的值。另外原型模式最大的问题是由其共享的本性导致的,对于那些包含基本类型值的属性没有影响,因为是通过实例上添加一个同名属性,但是对于包含引用类型值的属性来说就会有问题,例:
function Person () {}
Person.prototype = {
constructor: Person,
name: 'nike',
age: 29,
friends: ['sha', 'he'],
sayName: function () {
console.log(this.name)
}
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push('van')
console.log(person1.friends) // 'sha', 'he','van'
console.log(person2.friends) // 'sha', 'he','van'
从上面的例子中我们可以看到两个问题:
1.修改person1.friends引用的数组,向数组中添加了一个字符串,由于friends存在于Person.prototype中而不是person1中,所以修改的是Person.prototype中friends数组,person2.friends的值也会跟着改变。
2.对比上面两个例子,我们发现如果person1定义在重写原型之前,那么创建的person1实例对象就会指向最初的原型。如果person1定义在重写原型之后,那么创建的person1实例对象就会指向重写原型。