寒潮ing,你可能在FaceTest中遇到(1)—— new运算符及手动实现

252 阅读2分钟

写在前面

    受去年大环境的影响,目前很现实的问题就是,今年令人满意的工作不是那么的好找。现在前端仅仅当个api user很难找到满意的工作,所以本系列旨在接下来的一段时间里分享一些前端知识,帮助更好的拿到满意offer。


下面进入主题

new的过程实际上进行了四个步骤

  1. 创建一个新对象
  2. 将构造函数的prototype赋值给新对象的__proto__
  3. 构造函数中的this指向新对象,并且调用构造函数
  4. 如果构造函数无返回值,或者不是引用类型,返回新对象;否则为构造函数的返回值。

手动实现

function MyNew(Fn,...args) {
	// 创建一个新对象
	let obj = {};
	// 将构造函数的prototype赋值给新对象的__proto__
	obj.__proto__ = Fn.prototype;
	// 将构造函数的this指向新对象obj,并且调用这个新对象
	let res = Fn.apply(obj,args);
	// 如果返回值不是引用类型,返回obj,否则返回res
	return res instanceof Object ? res : obj
}
function Fn(name='dd',age='18') {
	this.name = name;
	this.age = age;
}
let res = new Fn();
let myRes = new Fn('Charles','20');
console.log(res);
//  {
//      age: "18",
//      name: "dd",
//      __proto__: Object
//  }
console.log(myRes);
//  {
//      age: "20",
//      name: "Charles",
//      __proto__: Object
//  }
console.log(Object.getPrototypeOf(res) === Object.getPrototypeOf(myRes));
// true

结语

    我会不定期的分享前端各种知识点还有我以及小伙伴实际中遇到的问题,第一次写技术文章,欢迎各位大佬指出不对的地方。
    如果你不知道从哪开始准备,如果你想巩固前端知识,那么关注我吧,一章一个知识,看完不仅不累还想再加会儿班,括弧笑。

PS:部分内容会来自互联网以及书籍,全是原创原谅我做不到哇。