function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
const user = new Person(“oliver”);
console.log(user); // Person{// …}
console.log(user.getName()); // oliver
上面的代码运行在浏览器中可得以下结果:
通过图,我们可以通过侧面验证一下Mozilla上new这个运算符的四点步骤:最终实例化的结果是一个对象,并且它拥有了getName()这个方法,并且打印getName()的时候,获得到了其name属性的值,说明this的指向是指向的当前对象;
那么到这里,相信阅读的小伙伴应该能对new在做什么有一个大概的了解了,简单的说,new这个运算符就是根据规范创建了一个对象,这个对象就是实例化对象,这个过程就称作为实例化;
可能有的小伙伴会有对这里有疑问,通过new出来的实例化对象是不是可以被覆盖,因为很明显,new运算后返回的是一个对象,那么如果我们在构造函数中返回一个其他的值,这个只值能不能覆盖掉构造函数?做个实验:
function Person(name) {
this.name = name;
return “oliver”
}
const user = new Person(“oliver”);
console.log(user);
如示例,这个user到底是字符串的"oliver",还是实例化对象,答案是实例化对象,如下图在浏览器中的运行结果
结果很明显,retrun并没有生效,返回的依旧是实例化对象,那么多实验几个不同类型
function Person(name) {
this.name = name;
return true; // 类型:1,undefined,null,()=>{},[]
}
即使修改不同类型的返回结果,依然不能使得构造函数失效;
因此,我们到一个结论,构造函数中即使存在return,也不能覆盖掉new运算出来的实例化对象;但是可能又有小伙伴会问,这个不对啊,怎么没有实验返回的是一个对象,因为我们new运算符返回的是就是一个对象,好的,没问题,我们再试一试
function Person(name) {
this.name = name;
return {
age: 18
};
}
Person.prototype.getName = function() {
return this.name;
};
const user = new Person(“oliver”);
console.log(user);
console.log(user.getName());
下图是在浏览器的运行结果
是不是很震惊,竟然覆盖掉了,所以我们得到了另外一个结论:如果构造函数中返回的是一个对象,那么这个对象会覆盖掉实例化对象;通过这个例子告诉我们,构造函数中不要返回对象,否则实例化的过程会失败;
最终我们得到一个完整的结论:构造函数中如果存在return,假如return的值不是object,那么就都不会覆盖掉new运算符实例化出来的实例化对象,但return的结果是一个对象,那么此时的对象会替换掉实例化对象作为值返回;
既然我们知道了new这个运算符在执行的时候做了哪些事,那么我们是不是也可以自己手写一个new运算符,答案很明显,是可以的,我们只要按照上面说的四步,那么一个低配版的new运算符就算实现了;
再将MDN上关于new运算符的四点要素看一下:
-
创建一个空的简单JavaScript对象(即{});
-
为步骤1新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象 ;
-
将步骤1新创建的对象作为this的上下文 ;
-
如果该函数没有返回对象,则返回this;
只要实现这四点,基本就是达到了new运算符的效果了
创建空对象
在第一点中很简单,就是单纯的创建一个空对象:
// 1.创建空对象
const obj = new Object();
修改__proto__指向
这一步的目的是将__proto__和prototype关联起来
// 2.将空对象的__proto__指向新创建对象的prototype上
newObj.proto = Object.create(constructor.prototype);
这样做就达到了上面例子中,明明实例化对象上没有getName这个方法,但是还是能调用,因为虽然自身是没有,但是构造函数的原型上是存在的;
修改this指向
这一步也相对比较简单,就是修改this的上下文环境
// 3.修改this指向
const result = constructor.apply(newObj, args);
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!**
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!