JS中new的过程发生了什么

一、JS中new的过程发生了什么?

从例子看方法

java 复制代码
function WhatNew(name){
	this.name = name
}
let news = new WhatNew('屈小康')

通过简单的构造模型创建对象。在说这个之前你需要了解,prototype和__proto__.

prototype属性:每一个构造函数(function a())都有一个prototype属性,它指向构造函数的指针(constructor)。

而__proto__这个方法是每个对象都包含的一个方法,它也指向(constructor)

js 复制代码
	WhatNew.prototype === news.__proto__ // true

我们都知道对象的继承是通过原型链的,而原型链就是通过__proto__一层一层网往上找而形成原型链的,找到最后找到null。

我们直接为构造函数添加一个原型方法。

js 复制代码
	WhatNew.prototype.add = function(x,y){
	return x + y 
}
news.add(1,2)

news的查找过程,现在自己的原型上查找,找不到再向他的上一层构造函数的原型上找,如果还是没有找到的话,往Object上找,找不到的话返回null

js 复制代码
news.__proto__.__proto__.proto__ == null

Object所以对象的实例,比如我们用的一些对象的方法,虽然你定义了,但是没有用。那就是因为继承了Object的原因。比如toString的等

js 复制代码
news.toString() // "[Object Object]"

接下来说明new的过程发生了那些事情:

1、new先创建一个新的对象

var news = new Object()

2、 我们将这个空对象的proto成员指向whatnew函数的对象prototype成员对象。

news.proto = whatnew.prototype

3、修改whatnew的this到object上面。

4、通过call(obj) 改变this指向

5、最后吧whatnew 返回给news就可以了

2、自己实现一个new方法
js 复制代码
	function Mynew(fun, ...arg){
		let obj = { //定义一个空对象
		__proto__ : fun.prototype // 该空对象的__proto__指向fun.prototype
		}
		fun.apply(obj,arg) //改变this指向obj
		return obj
	}
	function person (age , name){
	this.age = age
	this.name = name 
	}
	let mynew = Mynew(person,'1','2')

这样就实现了一个new的方法。

相关推荐
weedsfly3 小时前
还在用 Axios?你可能需要重新理解 XHR 与 Fetch
前端·javascript·面试
CoderWeen3 小时前
从零实现一个 Vue3 流程图编辑器:节点拖拽、贝塞尔连线与框选
前端·javascript
To_OC13 小时前
LC 128 最长连续序列:别上来就排序,O (n) 解法才是这题的灵魂
javascript·算法·leetcode
kyriewen17 小时前
我用 50 行代码重写了 React Router 核心,终于搞懂了前端路由原理
前端·javascript·react.js
Asize20 小时前
HTML5 Canvas 基础:从按帧动画到 ECharts 数据可视化
前端·javascript·canvas
默_笙20 小时前
🎄 后端给我一堆扁平数据,我 10 行代码把它变成了树
前端·javascript
前端Hardy20 小时前
又一个 AI 神器火了!
前端·javascript·后端
PBitW20 小时前
GPT训练我的第二天,我表示不过如此!!!😕😕😕
前端·javascript·面试
kyriewen21 小时前
白宫直接给 OpenAI 下了限制令,GPT-5.6 不能随便放出来了
前端·javascript·面试
默_笙1 天前
🍞 我用 CSS 画了一个会转的 3D 立方体,同事以为我学了 Three.js(这节课真的很神奇,我很喜欢)
javascript