new操作符原理

new操作符原理

语法

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

new constructor[([arguments])]

参数:

  • constructor
    一个指定对象实例的类型的类或函数。

  • arguments
    一个用来被constructor 调用的参数列表。

MDN描述:
创建一个用户自定义的对象需要两步:
1、通过编写函数来定义对象类型。
2、通过new来创建对象实例。

代码描述:

  function person (sex, weight, color){
			this.sex = sex
			this.weight = weight
			this.color = color
	}

	var firstPerson = new person('男', '75kg', 'yellow')
	console.log(firstPerson)

在这里插入图片描述
new操作符到底干了点啥呢?

原理

代码 new Person(…) 执行时,会发生以下事情:

红宝书上解释:
第一步:创建一个新对象。
第二步:将构造函数的作用域赋给新对象(因此this就指向了新对象)
第三步:执行构造函数中的代码(为这个新对象添加属性)
第四部:返回新对象

MDN上的解释:
1、一个继承自 Person.prototype 的新对象被创建。

扫描二维码关注公众号,回复: 5507791 查看本文章

2、使用指定的参数调用构造函数 Person ,并将 this 绑定到新创建的对象。new Person 等同于 new Person(),也就是没有指定参数列表,Person 不带任何参数调用的情况。

3、由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)

个人感觉MDN上解释的比较详细,小红书上就有点宽泛了,试着写代码。。全是填着坑过来的

自己的new操作符

下面我们来参照MDN和红宝书上的解释一步一步的实现一个自己的new操作符:

function person (sex, weight, color){
			this.sex = sex
			this.weight = weight
			this.color = color
	}
function newSelf(fn) {
// 第一步:创建一个新对象
	var obj = {}
	// 新对象继承Person.prototype
	obj.__proto__ = fn.prototype 
	 return function () {
		// 使用指定的参数调用构造函数 Person ,并将 this 绑定到新创建的对象
           fn.apply(obj,arguments)
            return obj
        }
}
var person2 = newSelf (person)('男', '75kg', 'yellow')
console.log(person2.__proto__ == person.prototype) //true

这样我们就实现了一个简单的new操作符

猜你喜欢

转载自blog.csdn.net/duanshilong/article/details/88235546