当前位置: 首页 > Web前端 > HTML

深入理解JavaScript——new是干什么的

时间:2023-03-28 16:35:46 HTML

上面我们分析讲解了Object,讲了对象的创建,其中new是创建对象的一个??重要关键字。这一节,我们就来聊聊new,聊聊new是干什么的,用一句话来说明new的本质是让开发者少写几行代码?在说新之前,你需要或多或少了解一下原型知识。这里我们假设你已经知道了原型继承的知识(笔者后面会讲解Prototype来详细介绍)简单来说,new关键字的意思就是:在内存中创建一个新的对象,赋值给[[Prototype]]作为构造函数的prototype属性,并在构造函数中设置this指向new对象,执行构造函数中的代码。如果构造函数返回一个非空对象,则返回该对象;否则,返回刚刚创建的新对象。这些过程完成对象创建、原型继承和属性初始化,称为隐式原型继承。此外,对象字面量也是隐式继承的。只不过objectliteral是针对Object的构造函数,new是针对任意构造函数的。根据隐式继承的两层隐式行为,对象是通过newObject()/Object.create()隐式创建的,不过我们这一节的重点不是追求隐式原型继承,而是知道new是干什么的。首先,new属于隐式原型继承。什么是隐式原型继承,就是语言底层已经帮我们做了继承。开发者只需要调用newConstructor,实例之后的对象就可以自动继承Constructor的原型。底层这样做是为了方便我们开发实现new我们尝试写newfunctionnew2(Constructor,...args){//(1),创建一个新对象varobj=Object.create(null);//(2)、将新对象的[[Prototype]]特性赋值为构造函数的prototype属性obj.__proto__=Constructor.prototype;//(3),构造函数内部的this被赋值为this新对象//(4),执行构造函数内部的代码varresult=Constructor.应用(对象,参数);//(5)、如果构造函数返回非空对象,则返回该对象;否则,返回新创建的新对象returntypeofresult==='object'?result:obj;}this方法是基于Object.create的,ES5之前没有这样的API,那么如何使用ES3(newObject())实现new呢?简单来说就是实现获取Object.create解构赋值前剩余参数的功能。new3(){//基于newObject创建实例varobj=newObject(),//获取外部传递的构造函数Constructor=Array.prototype.shift.call(参数);//核心的手写Object.create()varF=function(){}F.prototype=Constructor.prototype//指向正确的原型obj=newF()//借用外部传入的构造函数为obj设置属性var结果=Constructor.apply(obj,arguments)//如果执行结果为非空对象,则返回该对象;否则,返回新创建的新对象returntypeofresult==='object'?result:obj}测试一波functionUser(firstname,lastname){this.firstname=firstname;this.lastname=lastname;}constuser2=new2(User,'johnny','joestar')constuser3=new3(User,'johnny','joestar')附录:JavaScript高级编程第四版操作说明将通过调用new的构造函数来执行:(1)在内存中创建一个新对象(2)将新对象内部的[[prototype]]特性赋值给构造函数的prototype属性(3)在构造函数内部这是赋值给这个新对象(即this指向新对象)(4)执行构造函数内部的代码(为新对象添加属性)(5)如果构造函数返回非空对象,则返回该对象;否则,返回刚刚创建的NewObjectsCreatedReferencesJS中的new究竟是做什么的?深入理解JavaScript原型系列文章深入理解JavaScript-开头深入理解JavaScript-什么是JavaScript深入理解JavaScript-JavaScript由什么组成深入理解JavaScript-一切都是anobject——new做了什么深入理解JavaScript——Object。——寻祖深入理解JavaScript——Function深入理解JavaScript——Scope深入理解JavaScript——this关键字深入理解JavaScript——call、apply、bind三将深入理解JavaScript之深——深入理解立即执行函数(IIFE)深入理解JavaScript—词法环境深入理解JavaScript—执行上下文和调用栈深入理解JavaScript—ScopeVS执行上下文深入理解JavaScript—Closure深入理解JavaScript—防抖与节流深入理解JavaScript—函数式编程In-深入理解JavaScript——垃圾回收机制深入理解JavaScript——数组深入理解JavaScript——loopscomehere深入理解JavaScript——string