当前位置: 首页 > 后端技术 > Node.js

new的原理及其类比实现

时间:2023-04-03 15:24:23 Node.js

介绍newnew操作符是创建一个用户自定义对象类型的实例,或者是一个带有构造函数的内置对象的实例。创建过程如下:创建一个空的简单JavaScript对象(即{})将对象(即设置对象的构造函数)链接到另一个对象,使用第一步新建的对象作为this的上下文If函数不返回对象,返回this例如:functionPerson(name,age){this.name=name;这个。年龄=年龄;this.habit="swim";}Person.prototype.sex='female';Person.prototype.sayHello=function(){console.log('你好!我的名字是'+this.name);}varperson=newPerson('有轩','20');console.log(person.name);//优轩控制台.log(person.habit);//swimconsole.log(person.sex);//femaleperson.sayHello();//Hello!MynameisYouxuan从上面的内容可以看出,实例访问Person构造函数中的属性,也可以访问Person.prototype中的属性;因此,我们可以尝试模拟new的实现,先回顾一下new是如何使用的functionPerson(){...}varperson=newPerson(...);varperson=newObject(...);初步模拟因为new的结果是一个对象,所以在执行new的过程中,也会产生一个新的对象。我们先把这个对象命名为obj,因为obj也有Person构造函数的属性,所以我们需要通过调用父类,继承父类实例的方式给obj添加新的属性。回顾上一篇文章,我们讲解了原型和原型链,将obj的proto指向了构造函数Person的原型对象prototype,然后建立了obj对象的原型链:obj->Person.prototype->Object.prototype->null,实例使用这个关系来访问原型上的属性functionnewObject(){varobj=newObject();构造函数=[].shift.call(arguments);obj.__proto__=Constructor.prototype;Constructor.apply(obj,arguments);returnobj;}在上面的内容中,通过newObject()创建了一个对象obj。取出第一个参数,也就是我们要传入的构造函数。因为shift会修改原来的数组,所以arguments会从第一个参数中去掉。将obj的原型指向构造函数,这样obj就可以访问构造函数原型中的属性。使用apply改变构造函数this指向新创建的对象,这样obj就可以访问构造函数中的属性,然后返回obj。现在,我们写一段代码来验证一下效果:functionPerson(name,age){this.sex='female';这个。年龄=年龄;return{name:name,habit:'swim'}}varperson=newPerson('优轩','20');console.log(person.name);//优轩控制台.log(person.habit);//swimconsole.log(person.sex);//undefinedconsole.log(person.age);//undefined上面代码中,构造函数返回一个对象,实例person只能访问返回对象中的属性。而且需要注意的是,这里返回的是一个对象。如果需要返回基本类型的数据怎么办?functionPerson(name,age){this.sex='女性';这个。年龄=年龄;return'美在我脸上'}varperson=newPerson('有轩','20');console.log(person.name);//undefinedconsole.log(person.habit);//undefinedconsole.log(person.sex);//femaleconsole.log(person.age);//20结果和上次完全相反,虽然这次有返回值,但是相当于没有处理返回值。效果实现了,所以还是要判断返回值是不是对象。如果是一个对象,则返回这个对象;如果不是对象,则直接返回:functionnewObject(){varobj=newObject();构造函数=[].shift.call(arguments);obj.__proto__=Constructor.prototype;vardemo=Constructor.apply(obj,arguments);返回typeofdemo==='object'?demo:obj;}至此,模拟实现了new操作符作用的主要原理是原型链和apply继承。你觉得这个怎么样?欢迎加微信交流。