JavaScript 函数的特性与原型链讲解

2019-12-06 14:45:51

开篇语
这次给大家带来一个关于 JavaScript 函数与原型链之间的关系的分享，将会从函数开始讲起，一直讲到整个原型链是什么样子的，希望能给大家带来帮助。

函数的三种使用方式

JavaScript 中的函数大致有以下三种使用方式：

一、作为普通函数来使用

例如

// 定义函数
function foo() {}
// 调用函数
foo();

二、作为构造函数来使用

当一个函数被用来创建新对象的时候，就把它叫做：构造函数。

例如

// 按照惯例，作为构造函数的函数名首字母需要大写
function Foo() {}
const obj = new Foo();

这时对于对象 obj 来说，函数 Foo 就叫做它的构造函数。

三、作为对象来使用

访问对象的属性可以使用点操作符和中括号来访问

例如

function foo() {}
foo.name = 'tom';
foo['age'] = 20;

以上这三种使用方式中，以普通函数来调用的方式大家都懂，这里不再赘述。本文主要讲解的就是当一个函数被作为构造函数来使用和被作为对象来使用的时候，分别是什么样的，以及它们之间与原型链的关系是什么样的。

预留问题

在讲接下来的内容之前，我们先来看几个问题：

// 首先，定义一个函数，将会作为构造函数
function Foo() {}

// 实例化出来一个对象
const obj = new Foo();

// 在 Object 的原型上定义一个属性：objProp
Object.prototype.objProp = '我是 Object 原型上的属性';

// 在 Function 的原型上定义一个属性：funcProp
Function.prototype.funcProp = '我是 Function 原型上的属性';

// 你预想一下，以下这些分别会输出什么？
console.log(obj.objProp) // ?
console.log(obj.funcProp) // ?

console.log(Foo.objProp) // ?
console.log(Foo.funcProp) // ?

console.log(Object.objProp) // ?
console.log(Object.funcProp) // ?

console.log(Function.objProp) // ?
console.log(Function.funcProp) // ?

console.log(Array.objProp) // ?
console.log(Array.funcProp) // ?

构造函数

接下来会讲解函数的第二个特性，作为构造函数来使用的时候，它是什么样的。

使用 new 操作符创建对象

当我们使用 new 操作符来从构造函数创建对象的时候，会经历以下几个步骤：

创建一个空对象：{}。
把这个空对象的原型链__proto__指向构造函数的原型对象。
把新对象作为上下文来调用构造函数，即绑定this，这样新对象才能访问到构造函数中的属性。
如果该函数没有返回对象，则返回这个新对象。

文字描述不太好理解，我们用代码来描述一遍，然后再对比着看一下：

// 新建一个构造函数
function Foo() {}
// 使用 new 操作符实例化一个对象
const obj_foo = new Foo()
// ========创建对象的过程：
// 1. 创建一个空对象：`{}`。
const obj = {};
// 2. 原型链的链接过程
obj.__proto__ = Foo.prototype;
// 3. 把新对象作为函数的上下文，即绑定 this
Foo.apply(obj, arguments);
// 4. 因为 Foo 没有返回对象，所以就返回这个新对象
return obj;
// ========END
// 这时 obj_foo 就是返回出来的新对象了

__proto__是什么？

首先你要记住：只有对象才会有__proro__这个属性。它是 js 得以实现原型链的关键，因为它会指向构造函数的原型对象，即prototype属性上的对象，而构造函数原型对象上的__proto__又指向上一级，即：构造函数.prototype.__proto__ -> 上一级构造函数.prototype，以此类推层层往上，就形成了我们所说的原型链。如果不理解，请继续看下文：

prototype 是什么？

前面一直提到构造函数.prototype，这个属性是函数特有的一个属性，它是构造函数的原型对象，所有由它构造出来的对象都会从这个原型对象上继承属性和方法（参考 MDN：JavaScript 是一种基于原型的语言，每个对象都拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性）。就像前面的例子：const obj_foo = new Foo()，obj_foo 的原型对象就是构造它的函数 Foo 的 prototype，obj_foo 从Foo.prototype继承了方法和属性。

又因为构造函数.prototype是一个对象，所以它就会有__proto__这个属性，说明原型对象也是由一个构造函数创建出来的，即：构造函数.prototype.__proto__ -> 上一级构造函数.prototype。

这下你能理解__proto__、prototype 和原型链之间的关系了吧，正因为有了它们俩 JavaScript 才得以实现原型链。

特殊的构造函数

先来回顾一下 JavaScript 中的一些内建构造函数吧，比如：Object、Function、Number、Array、String等。

既然是构造函数，就可以用来创建对象，比如：

var a = new Number('123'); // a === 123 is false
// 因为 Number.prototype 上有 toString() 方法，于是 a 也就继承了该方法：
a.toString(); // a === '123' is true
var b = new String(123); // b === '123' is false
a instanceof Number; // is true
b instanceof String; // is true

有了上述印象，接下来就跟大家讲解其中核心特殊的两个构造函数：Object 和 Function。

Object 构造函数

用来创建对象，例如：

const obj = new Object();

Object 除了是一个构造函数可以用来创建对象以外，它还拥有一个很硬核的能力：派生所有的其它构造函数。

这里用了“派生”二字，在理解上是把它当做一个基类或者说父类来看待的。

也就是：所有的其它构造函数都是由 Object 这个构造函数派生出来的（子类）。

用代码解释一下（注：JavaScript 中没有明确的类的概念）：

// 父类 Object
class Object {}
// 子类 MyFunction
class MyFunction extends Object {}

正因为是由 Object 构造出来的，那么构造函数的原型链就指向了 Object 的原型对象（参考 new 的第二步过程可以加以理解）：

所有构造函数.prototype.__proto__ === Object.prototype

重点

因为 Function 也是一个构造函数，那么就可以推导出：

Function.prototype.__proto__ === Object.prototype

Function 构造函数

用来创建函数对象，例如：

const sum = new Function('a', 'b', 'return a + b');
sum instanceof Function; // true

在这里把 sum 叫函数对象，是因为它确实是由 Function 构造出来的对象，但是它跟我们平常定义一个 sum 函数是一样的，这就是我当初的迷惑点所在，即函数有多种表示形态，可以是普通函数，可以是构造函数也可以是函数对象。

我们不难得出：所有的函数对象都是由 Function 构造出来的

证明：sum.__proto__ === Function.prototype

重点

进一步可以推导出：Object.__proto__ === Function.prototype

阶段小结

函数有三种形态：普通函数、构造函数、函数对象；
当使用 new 操作符调用构造函数，会创建一个新对象；
__proto__只有对象才有这个属性，它指向对象的构造函数的原型对象；
prototype 是构造函数的原型对象；
所有的构造函数都是由 Object 创建出来的；
所有的函数对象都是由 Function 创建出来的。

函数是如何确定形态的

前面我们讲了构造函数、函数对象这些东西，那么函数是如何确定终形态的呢？答案是：在使用的时候。

使用 new 来调用它，那么它就是一个可以创建对象的构造函数，如果使用点或者中括号来调用它，那么它就又变成了一个对象（注：排除prototype属性）。

我在前面标了两个重点公式：

// 1
Function.prototype.__proto__ === Object.prototype
// 2
Object.__proto__ === Function.prototype

再次解释一下：

1、看到Function.prototype就说明 Function 此时是被当做构造函数来使用的，前面说过所有构造函数都是由 Object 构造出来的。

2、看到Object.__proto__就说明 Object 此时是被当做对象来使用的，前面说过所有函数对象都是由 Function 创建出来的。

Object 和 Function 之间的关系非常特殊，根据不同的形态可以互生。

解决预留问题

这下我们就可以来解决预留问题了。

// 首先，定义一个函数，将会作为构造函数
function Foo() {}

// 实例化出来一个对象
const obj = new Foo();

// 在 Object 的原型上定义一个属性：objProp
Object.prototype.objProp = '我是 Object 原型上的属性';

// 在 Function 的原型上定义一个属性：funcProp
Function.prototype.funcProp = '我是 Function 原型上的属性';

问题：

1、

console.log(obj.objProp) // ?

答案：
因为对象的原型链指向构造函数的原型对象，所以：obj.__proto__ -> Foo.prototype,
因为所有构造函数都是由 Object 派生出来的，所以：Foo.prototype.__proto__ -> Object.prototype
因为Object.prototype上有 objProp 这个属性，所以 obj.objProp === '我是 Object 原型上的属性'

2、

console.log(obj.funcProp)// ?

答案：
因为对象的原型链指向构造函数的原型对象，所以：obj.__proto__ -> Foo.prototype,
因为所有构造函数都是由 Object 派生出来的，所以：Foo.prototype.__proto__ -> Object.prototype
由于在Object.prototype上找不到 funcProp 属性，根据原型链继续找：Object.prototype.__proto__ -> null
找不到，返回 undefined

3、

console.log(Foo.objProp) // ?

答案：
Foo.objProp是把 Foo 当做对象来使用的，此时它是一个函数对象，所以它是由 Function 创建出来的：Foo.__proto__ -> Function.prototype
由于在Function.prototype上找不到 objProp 属性，根据原型链继续找：Function.prototype.__proto__ -> Object.prototype
在Object.prototype上找到了 objProp 属性，所以 Foo.objProp === '我是 Object 原型上的属性'

4、

console.log(Foo.funcProp) // ?

答案：
Foo.funcProp是把 Foo 当做对象来使用的，此时它是一个函数对象，所以它是由 Function 创建出来的：Foo.__proto__ -> Function.prototype
在Function.prototype上找到了 funcProp 属性，所以 Foo.funcProp === '我是 Function 原型上的属性'

5、

console.log(Object.objProp) // ?

答案：
Object.objProp是把 Object 当做对象来使用的，此时它是一个函数对象，所以它是由 Function 创建出来的：Object.__proto__ -> Function.prototype
在Function.prototype上找不到 objProp 属性，根据原型链继续找：Function.prototype.__proto__ -> Object.prototype
在Object.prototype上找到了 objProp 属性，所以 Object.objProp === '我是 Object 原型上的属性'

6、

console.log(Object.funcProp) // ?

答案：
Object.funcProp是把 Object 当做对象来使用，此时它是一个函数对象，所以它是由 Function 创建出来的：Object.__proto__ -> Function.prototype
在Function.prototype上找到了 funcProp 属性，所以 Object.funcProp === '我是 Function 原型上的属性'

7、

console.log(Function.objProp) // ?

注：为了避免混淆，Function 表示对象， %Function 表示构造函数

答案：
Function.objProp是把 Function 当做对象来使用的，此时它是一个函数对象，所以它是由 %Function 创建出来的：Function.__proto__ -> %Function.prototype
在%Function.prototype上找不到 objProp 属性，根据原型链继续找：%Function.prototype.__proto__ -> Object.prototype
在Object.prototype上找到了 objProp 属性，所以 Function.objProp === '我是 Object 原型上的属性'

8、

console.log(Function.funcProp) // ?

答案：
Function.funcProp是把 Function 当做对象来使用的，此时它是一个函数对象，所以它是由 $Function 创建出来的：Function.__proto__ -> %Function.prototype
在%Function.prototype上找到了 funcProp 属性，所以 Function.funcProp === '我是 Function 原型上的属性'

9、