大厂常见面试：原型与原型链

前言

让你感受不一样的原型链

Function.prototype.a = 1;
Object.prototype.b = 2;

function A() {}
var a = new A();

console.log(A.a, A.b);
console.log(a.a, a.b);
console.log(Function.b, Object.a);

上述输出什么？

答案：

console.log(A.a, A.b); // 1 2
console.log(a.a, a.b); // undefined 2
console.log(Function.b, Object.a); // 2 1

原因：

普及一下九大内置对象：String、Number、Boolean 、Object、Function、Array、Date、RegExp、Error，同时也是内置函数，内置函数本身是Function作为构造器调用生成的实例对象。

1） ECMAScript规定了两个特殊的内置对象：Object和Function，他们的特殊性在于，他们本身是函数对象，而他们同时也是构造函数。（函数对象对应的类型是Function，正如数组对象对应的类型是Array；正常的构造函数，就是new Fn()。 ）

• 因为构造函数是Function是实例对象，所以Object是Function的实例对象。
• 因为Object是所有对象的基类，所以Function.prototype是Object的实例对象。

2）原型链是对象的集合，每个对象都有内部属性[[Prototype]]（__proto__指针）指向另一个对象；当访问对象某一属性的时候，如果此属性不在此对象的自身属性上，则继续去[[Prototype]]指向的对象上查找此属性。[[Prototype]]形成的对象的链式集合即原型链。这里可以得出：原型链上的所有元素都是对象。
而实例对象就会在自身找不到时会往[[Prototype]]指向的对象上查找。

3）ECMASciprt规定：原型链上有两个元素是固定的，终点是null，倒数第二的元素是Object.prototype指向的对象。

4. 原型链上排行倒数第三的有这几种情况：
    1. 字面量{}和new Object()
    2. Math
    3. JSON
    4. 除Object之外的内置函数的prototype属性指向的对象（8个）

5. 原型链上排行倒数第三的有这几种情况：
    1. 除Object之外的内置函数的实例对象（8个）
    2. 内置函数（9个）

说那么多，不如一张图来的方便： (转载图片请@我，谢谢)

image.png

我们最常用的就是 字面量{}和function；上述题目中

Function.prototype.a = 1;
Object.prototype.b = 2;

function A() {}
var a = new A();

console.log(A.a, A.b); // 1 2
console.log(a.a, a.b); // undefined 2
console.log(Function.b, Object.a); // 2 1

1、function A() {}在原型链的倒数第四（方块function），按照原型链查找规则，所以它可以拿到Function.prototype和Object.prototype。

2、var a = new A();，其实a就是一个对象，我们看下这句话的原理是什么：

  var obj = { __proto__: F.prototype }; /*第一步*/
  return function() {
    F.apply(obj, arguments); /*第二步*/
    return obj; /*第三步*/
  };
}

用法：

var a = New(A)('小米');

你可以看到调用New(A)('小米')实际return的是obj，obj就是一个对象。
所以此时原型链在倒数第三处，往上找只有Object.prototype。

3、Function.b和Object.a中的 Function和Object是九个内置对象中的，所以它可以找到Function.prototype和Object.prototype。

一张图是不是解决了多年的困扰，曾经记了太多文字，没多久就忘，经常看看图，很容易就深入脑海了。