JS-手写new

ops/2024/12/16 11:28:23/

我们先再来理一理原型

Object1 = {name:'deng',age:18
}
Object2 ={name:'ru',age:18
}
const Person = function(){}
Person.prototype = Object1;
const p1 = new Person();
console.log(p1.name); //deng
Person.prototype = null;
console.log(p1.name); //deng

上面给Person的构造函数绑定了一个原型,接着new了他的对象。紧接着将构造函数的原型置空,这时候可以发现当构造函数的prototype改变并没有影响p1的属性

也就是说创建出的对象跟构造函数没有任何关系了,他是独立的个体,他只是继承了构造函数中的属性,他跟构造函数的原型有关系。

我们来打印一下这个对象

console.log(p1);
在这里插入图片描述

对象通过__proto__属性来找到原型。但是对象本身是没有这个属性的,我们可以看看
这个对象是一个空对象(浅色标记不是真实属性,控制台为了方便你查看这个继承关系,会将 Prototype 属性显示出来。)之前文章讲过:

proto ,绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.proto 时,可以理解成返回了 Object.getPrototypeOf(obj)。

可以看到它显示的是Person的实例对象,他是怎么找到它的构造函数的呢?难道是通过他的原型对象的construcor找到的?我们尝试修改他的__proto__属性。

p1.__proto__ = Object2;
重新打印他,发现仍是Person
在这里插入图片描述

实际上 JavaScript 对象有隐式属性如 [[Constructor]][[Prototype]][[Scopes]][[IsArray]] 等,都是 JavaScript 引擎在幕后管理的,通常不直接暴露给开发者,但它们对对象的行为、继承、作用域管理等有着重要的作用。

  • person1.constructor 返回的是 Person.prototype.constructor,它是指向 Person 函数的。
  • [[Constructor]] 是 JavaScript 引擎内部的隐式属性,它实际上不会暴露出来,所以我们无法直接访问。

person1.constructor 访问的是原型链上的 constructor 属性,而不是内部的 [[Constructor]] 隐式属性。

当我们想要创建一个对象时,会发生以下几个过程
一:构造函数创建过程:创建一个对象,让他来充当函数的原型对象。
二:对象创建过程:

  1. 创建一个空对象
  2. 将新对象的__proto__ 属性指向构造函数的 prototype 属性。
  3. 执行构造函数中的代码,将 this 绑定到新对象,并为它添加属性。
  4. 如果构造函数没有显式返回对象,new 表达式会返回新创建的对象。

接下来我们来手写这个过程

myNew(Person,'deng',18);
function myNew(){
let obj = {};
let con = [].shift.call(arguments);
obj.this = con;
const res = con.apply(obj,arguments);
return res instanceof Object ? res : obj;
}`

http://www.ppmy.cn/ops/142357.html

相关文章

画图,matlab,

clear;close all;clc;tic;dirOutput dir(*.dat); % 罗列所有后缀-1.dat的文件列表,罗列BDDATA的数据 filenames string({dirOutput.name}); % 提取文件名%% 丢包统计 FILENAMES [""]; LOSS_YTJ [ ]; LOSS_RAD [ ]; LOSS_ETH [ ]…

FastAPI 应用安全性:多层防护

FastAPI 应用安全性:多层防护 目录 🛡️ 防御 SQL 注入、XSS 和 CSRF 攻击的实用方法🔒 使用 HTTPS 保证数据传输安全⚙️ 依赖更新与漏洞修复的安全管理策略 🛡️ 1. 防御 SQL 注入、XSS 和 CSRF 攻击的实用方法 在现代 Web 应…

从〇开始深度学习(番外)——混淆矩阵(Confusion Matrix)

从〇开始深度学习(番外)——混淆矩阵(Confusion Matrix) 文章目录 从〇开始深度学习(番外)——混淆矩阵(Confusion Matrix)写在前面1.混淆矩阵2.归一化混淆矩阵 写在前面 《从〇开始深度学习(番外)》系列主…

龙海家园地面停车场探寻2

在南山前海上班2年多了,到现在最喜欢的小区还是龙海家园小区。龙海家园小区是深圳目前最大的公共保障性租赁住房小区,目前居住有约2.6万人。而小区的停车位是远远不够的。之前一直很好奇车子可以停哪里。 后面加班之余经常去小区吃饭和转转。发现龙海家园小区与对面…

Dash for Mac 代码API文档管理软件安装

Mac分享吧 文章目录 Dash for Mac 代码API文档管理软件 效果图展示一、Dash 代码API文档管理软件 Mac电脑版——v7.3.31️⃣:下载软件2️⃣:安装软件2.1 左侧安装包拖入右侧文件夹中,等待安装完成,运行软件2.2 打开软件&#xff…

[数据分析] 探索性数据分析 EDA

数据分析 按数据分析的思维模式或者目的: 描述性分析:使用统计方法(如均值、中位数、众数、方差等)来描述数据的特征,总结和组织数据,以提供对数据集的清晰理解预测性分析:使用历史数据来建立…

开展新闻营销分为策划期、实施期、优化期三个重要阶段

也许有人会问:什么是新闻营销呢?这是一个在当今商业营销领域备受关注的概念。在信息爆炸的时代,企业都在绞尽脑汁寻找各种有效的营销方式来提升自己的品牌知名度、产品销量等,新闻营销便是其中一种重要的手段。 我们可以将“新闻营…

SpringBoot【八】mybatis-plus条件构造器使用手册!

一、前言🔥 环境说明:Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 经过上一期的mybatis-plus 入门教学,想必大家对它不是非常陌生了吧,这期呢,我主要是围绕以下几点展开,重点给大家介绍 里…