JavaScript原型Prototype详情

1、概述

1.1原型是什么

在JavaScript中，函数是一个包含属性和方法的Function类型的对象。而原型（Prototype ）就是Function类型对象的一个属性。

在函数定义是包含了prototype属性，它的初始值是一个空对象 。在JavaScript中并没有定义函数的原始类型，所以原型可以是任何类型。

原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法。

示例代码验证如下：

function fun() {  console.log('函数原型')}console.log(fun.prototype) // {}

fun.prototype返回的也是一个空对象，但是这不说明Object.prototype中没有属性或者方法，这些属性和方法为不可枚举的，示例代码如下所示：

function fun() {  console.log('函数原型')}console.log(fun.prototype) // {}// 通过 Object.getOwnPropertyNames() 获取全部属性console.log(Object.getOwnPropertyNames(fun.prototype)) // [ 'constructor' ]

其中，constructor属性指向该构造函数的引用，代码如下：

// constructor属性console.log(fun.prototype.constructor) // [Function: fun]console.log(fun.prototype.constructor === fun) // true

1.2获取原型

了解了原型的概念以及作用之后，我们需要获取到原型才能对其进行操作，在JavaScript中获取原型的方式有两种，如下所示：

通过构造函数的prototype属性。

通过Object.getPrototypeOf(obj)方法。

这两个的区别就是构造函数的prototype属性一般只配合构造函数使用，而Object.getPrototypeOf(obj)方法一般是获取构造函数实例化后的对象的原型方法。

实例代码如下：

// 构造函数function Person(name) {  this.name = name}// 指向构造函数的原型var p1 = Person.prototypevar person = new Person('一碗周')// 指向构造函数的原型var p2 = Object.getPrototypeOf(person)console.log(p1 === p2) // true

获取原型后可以跟操作对象似的进行操作，因为原型本身就是一个对象。

2、原型属性

在JavaScript中，函数本身也是一个包含了方法和属性的对象。接下将学习函数对象的另一个属性
下载地址:
分享5个JS
JavaScript两张图搞懂原型链