JavaScript 原型&原型链

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）：

这几句话很重要！！！

  1. 所有函数对象都有一个 prototype 属性，属性值是一个普通的对象。指向该函数的原型对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 p1 和 p2 的原型。

    构造函数和实例原型的关系图:

构造函数和实例原型的关系图[图片上传中...(7d5ee838e2f1aa9a7e50a8f3b819d98.png-e6232b-1610094966156-0)]

  1. 每个实例对象（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()

参考文章：

冴羽的博客

https://juejin.cn/post/6844903567375990791

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342