JavaScript ES5 中原型的概念

对象和函数的原型

认识对象的原型

◼ JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。
◼ 那么这个对象有什么用呢？
当我们通过引用对象的属性key来获取一个value时，它会触发[[Get]]的操作；
这个操作会首先检查该对象是否有对应的属性，如果有的话就使用它；
如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

◼ 那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？
答案是有的，只要是对象都会有这样的一个内置属性；
◼ 获取的方式有两种：
方式一：通过对象的__proto__ 属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
方式二：通过Object.getPrototypeOf 方法可以获取到；
案例:
var obj = {
name : 'hdc',
age : 18
}
console.log(obj)
// 获取原型的方式
// 浏览器自己加的属性
console.log(obj.proto)
//标准方法
console.log(Object.getPrototypeOf(obj))

console.log(obj.proto === Object.getPrototypeOf(obj))//true

函数的原型prototype

◼ 那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢？
它的意义是非常重大的，接下来我们继续来探讨；
◼ 这里我们又要引入一个新的概念：所有的函数都有一个prototype的属性（注意：不是__proto__）
◼ 你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢？
不是的，因为它是一个函数，才有了这个特殊的属性；
而不是它是一个对象，所以有这个特殊的属性
案例:

new、constructor

再看new操作符

◼ 我们前面讲过new关键字的步骤如下：
1.在内存中创建一个新的对象（空对象）；
2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性；
◼ 那么也就意味着我们通过Person构造函数创建出来的所有对象的[[prototype]]属性都指向Person.prototype：

1.创建空对象
var obj = {}
2.将这个空对象赋值给this
this = obj
3.将函数的显示原型赋值给这个对象作为他的隐式原型
obj.proto = Preson.prototype
4.执行函数中的代码
5.如果没有返回非空对象将这个对象默认返回

案例:

constructor属性

◼ 事实上原型对象上面是有一个属性的：constructor
默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象；
案例:
// 非常重要的属性:constructor 指向的是函数Person
var PersonProtoType = Person.prototype
console.log(PersonProtoType)
console.log(PersonProtoType.constructor)
console.log(PersonProtoType.constructor === Person) //true
console.log(Person.name)//Person
console.log(PersonProtoType.constructor.name) //Person

将所有的函数定义放到了显式原型上

重写原型对象

◼ 如果我们需要在原型上添加过多的属性，通常我们会重写整个原型对象：
◼ 前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性；
而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是Person构造函数了
案例:

原型对象的constructor

◼ 如果希望constructor指向Person，那么可以手动添加：
◼ 上面的方式虽然可以, 但是也会造成constructor的[[Enumerable]]特性被设置了true.
默认情况下, 原生的constructor属性是不可枚举的.
如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
案例:
console.log(Person.prototype) // {message: 'Hello Person', info: {…}, running: ƒ, eatting: ƒ}
console.log(Object.keys(Person.prototype)) //(5) ['message', 'info', 'running', 'eatting', 'constructor']
// 默认情况下, 原生的constructor属性是不可枚举的.
// 如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了.
Object.defineProperty(Person.prototype,"constructor",{
enumerable:false,
value:Person
})
console.log(Object.keys(Person.prototype)) //(4) ['message', 'info', 'running', 'eatting']