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

开篇语

这次给大家带来一个关于 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、
console.log(Array.objProp) // ?
复制代码答案：自己尝试着分析一下吧，欢迎在评论区给出
10、
console.log(Array.funcProp) // ?
复制代码答案：自己尝试着分析一下吧，欢迎在评论区给出
原型链图片
我画了一张原型链的图片，供大家对比着上述的流程作参考：

如果本文有什么错误之处，还请大家帮忙指出，我会继续改进。

作者：梓航
链接：https://juejin.im/post/5de7b4fa6fb9a0164577bc24
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。