基础-原型与原型链的纠葛(3)

来看个图。

通过构造函数add``new出来了一个对象对象1,这个对象1__proto__属性指向构造函数add的原型。通过这个图也发现了,通过同一个构造函数可以创建多个不同的对象,这些对象的隐式原型指向的原型是一样的,所以该内存空间是共用的。

那我们通过这些规则,来做一些事。

js 复制代码
function User(name, age) {
  this.name = name;
  this.age = age;
}

const a = new User("张三", 20);
const b = new User("李四", 40);
console.log(a === b);//false

通过这构造函数创建了两个对象,这两个对象是不一样的,引用的地址不一样,里面的属性也肯定是不一样的。那比如说他们有个sayHi的属性,做同一件事。

js 复制代码
function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function (message) {
    console.log(`${this.name}说了${message}!`);
  };
}

const a = new User("张三", 20);
const b = new User("李四", 40);

a.sayHi("hello");
b.sayHi("hello");

本意是做同一件事,但实际上这个函数是不一样的,所以在创建对象的时候,都会去重建这个函数。所以这是很没有必要的,因此可以实现函数共享嘛。前面不是说不同对象指向同一个构造函数的原型嘛,所以可以用prototype来创建。

js 复制代码
function User(name, age) {
  this.name = name;
  this.age = age;
  User.prototype.sayHi = function (message) {
    console.log(`${this.name}说了${message}!`);
  };
}
console.log(a.__proto__.sayHi === b.__proto__.sayHi); // true

PS:当访问一个对象的成员时,1.如果该对象自身拥有该成员,则直接使用。2.如果该对象的隐式原型有该成员,则直接使用。

所以啊,当我们声明一个数组时,这个数组只有一个属性length,但是它的隐式原型上有一堆的方法。

那原型这么叼,那那那有个东西就头皮发麻了,如果我往Array的原型里去加东西......,不敢想象。那这种呢就叫做猴子补丁

猴子补丁:在函数原型加入成员,以增强对象的功能。猴子补丁会造成原型污染。

看一下上面的图,是不是串来串去?那这就引出了原型链。那什么是原型链

js 复制代码
function Obj() {}
const obj = new Obj();

console.log(obj.__proto__ === Obj.prototype); // ture 普通函数的隐式原型 指向构造函数原型
console.log(Obj.__proto__ === Function.prototype); // true 构造函数的隐式原型 指向 Function的原型

console.log(Obj.prototype.__proto__ === Object.prototype); //true 构造函数的原型对象 是一个普通对象,它的隐式原型指向 Object的原型
console.log(Function.prototype.__proto__ === Object.prototype); //true Function的原型对象 是一个普通对象,它的隐式原型指向 Object的原型

console.log(Object.prototype.__proto__ === null); //true Object的原型对象 指向 null

console.log(obj.__proto__.__proto__.__proto__ === null); //true 第一条 第三条 第五条 合并

PS: Function 的 隐式原型 指向 自身的 原型。Object的 隐式原型指向 null。

把这个图看懂,那原型的问题就小意思了。

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄1 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95271 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大1 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师1 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端