38 # 简单描述原型链

简介: 38 # 简单描述原型链

基于事件驱动,node 中自己实现了一个发布订阅

const EventEmitter = require("events");
const event = new EventEmitter();
console.log(event.__proto__);

实例的属性和方法(每个人都独有一份),原型上的属性和方法(所有人共享一个)

比如下面的 name 就是实例的属性,eat 就是原型上的方法

function Man(name) {
    this.name = name;
}
Man.prototype.eat = function () {
    console.log("我他喵吃吃吃");
};
new Man("kaimo");
new Man("kaimo313");

常用的继承策略:继承父类的原型链

function Man() {}
let man = new Man();
console.log(man.__proto__ === Man.prototype); // true
console.log(Man.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null 对象的原型的 __proto__ 指向的是 null

继承父类的原型方法:

1、Man.prototype.__proto__ = EventEmitter.prototype

const EventEmitter = require("events");
function Man() {}
Man.prototype.__proto__ = EventEmitter.prototype; // 最早
let man = new Man();
console.log(man.on);

2、Man.prototype = Object.create(EventEmitter.prototype)

const EventEmitter = require("events");
function Man() {}
Man.prototype = Object.create(EventEmitter.prototype); // es5 版本
let man = new Man();
console.log(man.on);

Object.create 方式的原理

function create(parentPrototype) {
    function Fn() {}
    Fn.prototype = parentPrototype;
    return new Fn();
}

3、Object.setPrototypeOf(Man.prototype, EventEmitter.prototype)

const EventEmitter = require("events");
function Man() {}
Object.setPrototypeOf(Man.prototype, EventEmitter.prototype); // es6 版本
let man = new Man();
console.log(man.on);

4、extends 语法:class Man extends EventEmitter

原型链示意图:

使用 util 模块的 inherits 实现继承

const EventEmitter = require("events");
const util = require("util");
function Man() {}
util.inherits(Man, EventEmitter);
let man = new Man();
console.log(man.on);

我们先在调用处打上断点,然后在左侧里找到 utils 下的 inherits 右键添加 inherits 到监视

然后单步调试,就能进入到 inherits 方法

我们可以看到 util.inherits 的底层实现就是使用了 Object.setPrototypeOf(ctor.prototype, superCtor.prototype)

目录
相关文章
|
8月前
|
JavaScript
什么是原型链?如何继承?
什么是原型链?如何继承?
66 0
|
5月前
|
JavaScript 前端开发 开发者
什么是原型对象
【8月更文挑战第14天】什么是原型对象
106 0
|
5月前
|
前端开发 JavaScript
彻底理解前端原型链
【8月更文挑战第14天】彻底理解前端原型链
54 0
|
3月前
|
设计模式 JavaScript 前端开发
原型链
【10月更文挑战第9天】
|
3月前
|
设计模式 JavaScript 前端开发
原型链在哪些场景下比较适用
【10月更文挑战第13天】原型链在哪些场景下比较适用
59 0
|
JavaScript 前端开发
什么是原型链
什么是原型链
|
8月前
|
JavaScript 前端开发
prototype(原型对象)
原型对象(prototype)是 JavaScript 中一种特殊的对象,它用于实现对象之间的属性和方法共享。在 JavaScript 中,所有的对象都有一个原型(除了全局对象,如 Math、Date 等),当我们试图访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,Jav
37 1
|
JavaScript 前端开发
原型和原型链
原型和原型链
38 0
|
JavaScript 前端开发
什么是原型链?
什么是原型链?
191 0
掌握原型链,再炒冷饭系列
我们知道每一个函数都有一个自身的prototype,每一个对象都有__proto__对象,而这个__proto__我们常称之为隐式原型,正因为它连接起了对象与构造函数的关系。 当我们访问一个对象时,首先会在自身属性上找,当自身属性找不到时,会到对象的隐式链上去找,如果隐式链上还没有,那么会到构造函数的原型上找,当原型上没有时,会到原型的隐式__proto__上去找,当这个属性还找不到时,就直接返回undefined了,因此才形成了一条原型链。
107 0
掌握原型链,再炒冷饭系列