JavaScript 原型&原型链
更多JS总结：https://github.com/dishui1238/Notes/tree/master/JS
1. 构造函数
构造函数本身就是一个函数，与普通函数没有任何区别，不过为了规范一般将其首字母大写。构造函数和普通函数的区别在于，使用 new 生成实例的函数就是构造函数，直接调用的就是普通函数。
2. prototype & __proto__
先看一个例子：
function Person(name, color) {
this.name = name;
this.color = color;
this.sayHi = () => {
console.log("hi~");
};
}
Person.prototype.job = "前端工程师";
const p1 = new Person("p1", "black");
const p2 = new Person("p2", "white");
console.log(p1);
console.log(p2);
console.log(p1.job);
console.log(p2.job);
console.log(Person.prototype === p1.__proto__); // true !构造函数和实例原型的关系
console.log(Person.prototype === p2.__proto__); // true
输出结果图
在上面的代码中，有两个实例被创建，它们有自己的名字、颜色，但它们的 sayHi 方法是一样的，而通过构造函数创建实例的时候，每创建一个实例，都需要重新创建这个方法，再把它添加到新的实例中。这无疑造成了很大的浪费，既然实例的方法都是一样的，为什么不把这个方法单独放到一个地方，并让所有的实例都可以访问到呢。这里就需要用到原型（prototype）：
这几句话很重要！！！
-
所有函数对象都有一个 prototype 属性，属性值是一个普通的对象。指向该函数的原型对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 p1 和 p2 的原型。
构造函数和实例原型的关系图:
构造函数和实例原型的关系图[图片上传中...(7d5ee838e2f1aa9a7e50a8f3b819d98.png-e6232b-1610094966156-0)]
-
每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向创建它的构造函数的原型对象（prototype ）。
实例与实例原型的关系图：
实例与实例原型的关系图
既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？
2. constructor
指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。
实例原型与构造函数的关系图：
实例原型与构造函数的关系图
综上，我们得出：
function Person() {}
var person = new Person();
console.log(person.__proto__ == Person.prototype); // true
console.log(Person.prototype.constructor == Person); // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // true
了解了构造函数、实例原型、和实例之间的关系，接下来是实例和原型的关系。
3. 实例与原型
这句话很重要！！！
当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
function Person() {}
Person.prototype.name = "Kevin";
var person = new Person();
person.name = "Daisy";
console.log(person.name); // Daisy
delete person.name;
console.log(person.name); // Kevin
在这个例子中，我们给实例对象 person 添加了 name 属性，当我们打印 person.name 的时候，结果自然为 Daisy。
但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ，也就是 Person.prototype 中查找，幸运的是我们找到了 name 属性，结果为 Kevin。
但是万一还没有找到呢？原型的原型又是什么呢？
4. 原型的原型
在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：
var obj = new Object();
obj.name = "Kevin";
console.log(obj.name); // Kevin
原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 __proto__ 指向构造函数的 prototype ，所以我们再更新下关系图：
原型的原型关系图：
原型的原型关系图
5. 原型链
那 Object.prototype 的原型呢？null
console.log(Object.prototype.__proto__ === null); // true
所以查找属性的时候查到 Object.prototype 就可以停止查找了。
原型链示意图：
原型链示意图
图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。
原型链的实际上是指隐式原型链
JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾，如果没有，返回 undefined。
6. Object 和 Function
首先，Object 、Function 是 JS 自带的函数对象。
console.log(typeof Object); // function
console.log(typeof Function); // function
console.log(typeof Function.prototype); // object
console.log(Function.__proto__ === Function.prototype); // true
这两句话很重要！！！
对于函数对象的原型：除了 Object 的原型对象（Object.prototype）的__proto__指向 null，其他内置函数对象的原型对象（例如：Array.prototype）和自定义构造函数原型的__proto__都指向 Object.prototype, 因为原型对象本身是普通对象(属于 Object 的实例，可以通过 new Object() 产生)。
对于函数对象：所有函数对象的 __proto__ 都是一样的，函数都可以通过 new Function()产生，所有函数的 __proto__ 指向创建它的构造函数的原型，即 Function.prototype.
Function = new Function()，Function 自己创造自己，所以 Function 的 __proto__ 指向 Function.prototype.（个人理解）
经典原型图相等图：
经典原型图相等图
7. instanceof
function Foo() {}
var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true
console.log(Object instanceof Function); // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true
function Foo() {}
console.log(Object instanceof Foo); // false
表达式：A instanceof B (A 为实例对象，B 为构造函数对象)
如果 B 函数的显示原型对象在 A 对象的原型链上，返回 true，否则返回 false
8. 测试一下
问题一：输出结果是什么？
function A() {}
A.prototype.n = 1;
var b = new A();
A.prototype = {
n: 2,
m: 3,
};
var c = new A();
console.log(b.n, b.m, c.n, c.m);
答案：1, undefined, 2, 3
function A() {}
A.prototype.n = 1;
var b = new A();
A.prototype.n = 2;
A.prototype.m = 3;
var c = new A();
console.log(b.n, b.m, c.n, c.m);
答案：2, 3, 2, 3
问题二：
function Foo() {}
Object.prototype.a = function () {
console.log("a()");
};
Function.prototype.b = function () {
console.log("b()");
};
var foo = new Foo();
foo.a();
foo.b();
Foo.a();
Foo.b();
答案：
a()
Uncaught TypeError: foo.b is not a function // 报错后面的结果不输出，但是是有值的
a()
b()
参考文章：
网友评论