在JavaScript中是使用构造函数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性,它的属性值是一个对象,这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针指向构造函数的 prototype 属性对应的值,在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的,但是现在浏览器中都实现了 __proto__ 属性来访问这个属性,但是最好不要使用这个属性,因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法,可以通过这个方法来获取对象的原型。
当访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。
1. 构造函数
function Person(name) {
this.name = name
}
let person = new Person('Alan')
一般情况下,我们将构造函数的首字母大写。 这里的Person就是person的构造函数
2. prototype和__proto__
person.__proto__ 和Person.prototype 指向同一个对象,这个对象包含了该构造函数的所有实例共享的属性和方法。 而Person.prototype 也是一个对象,所以他也存在一个__proto__ 属性,指向他的原型。 我们观察下面的代码:
function Person(name) {
this.name = name
}
let p = new Person('hello')
console.log(p.__proto__ === Person.prototype)
值得注意的是,一个原型对象被该构造函数的所有实例共享,所以,当我们写了p.__proto__.age=19 ,会给所有Person对象都增加了一个属性值为19的age属性。
3. constructor
每个原型对象中包含了共享属性和方法,共享属性中有一个constructor 属性,这个属性是构造函数的一个引用。
console.log(p.constructor)
值得注意的是,虽然我们可以通过p.constructor 获取到构造函数,但是constructor是存在于p的原型中作为共享属性而存在的。 所以下面的输出就很明确了:
console.log(p.hasOwnProperty('constructor'))
console.log(p.__proto__.hasOwnProperty('constructor'))
4. 更改原型
Person.prototype.getName = function() { return this.name }
p.__proto__.age = 19
注意,当我们在原型上增加了age属性之后,此时的age=19 可以说是每个Person实例的默认age属性值,观察下面代码:
p.__proto__.age = 19
console.log(p.hasOwnProperty('age'))
p.age = 20
console.log(p.hasOwnProperty('age'))
console.log(p.age, p.__proto__.age)
这里的p.age = 20 其实并不是更新了p的age值,而是为p增加了一个age属性,其属性值为20。
再次观察下面的代码:
function Person(name) {
this.name = name
}
let p = new Person('Alan')
Person.prototype = {
age: 19,
setAge: function (age) {
this.age = age
}
}
console.log(p.age)
这里会输出什么呢? 我们以对象字面量的方式给Person.prototype 赋值,这时就不再会影响p.__ptoto__ 指向的值了: 所以,下面的代码该如何输出呢?
console.log(p.__proto__ === Person.prototype)
console.log(p.__proto__.constructor)
console.log(Person.prototype.constructor)
此时的Person.prototype 和p.__proto__ 就不再指向同一个原型了,这种情况是很危险的,但是,某些情况,我们需要向Person.prototype 直接赋值,这时候,我们还需要重新设置Person.prototype.constructor=Person ,实例化对象需要在这一步之后再进行!
|