JavaScript 中 new 操作符的实现

167 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第24天,点击查看活动详情

java里面,new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。 但在 javascript 中,原型语言没类,只有对象与原型链继承。

JavaScript 中 new 表达式的作用是生成一个对象。

我们来看下面这段代码,这段代码是我们用构造函数的方式来封装腾讯地图,TMap 类就是在使用这个地图类的时候,我们需要把这个 TMap 通过 new 的方式进行实地化,并且传给 options 之后才能使用。

export const TMap = funcation(options){
    this.polyline=null;
    this.polylinePathArr=[];
    this.options=potions;
    this.Event=qq.maps.event;
    this.labelArray=[];
    this.gridArray=[];
    this.markerArray=[];
    this.rectArrs=[];
    this.center=this.getMapCenter(options.lat.options.lng);
    this.setMap();
    
}
TMap.prototype.setMap=function(options){
    let _this=this;
    let labelText-this.options.labelText;
    let container = this.options.contextId;
    _this.getCityCenter(this.lat,this.lng,labelText,container);
}

这个是 new 操作符在项目中的一个实际使用的场景,就是我们在封装第三方工具包的时候,封装号构造函数之后,我们需要通过 new 操作符来对它进行一个实例化。

假设你要创建一个汽车的对象类型。你希望这个类型叫做 cat,这个类型具备 name, age 等属性,要做到这些,你需要写这样一个函数:

function Cat(name, age) {
   this.name = name;
   this.age = age
}

可以如下所示创建一个 cat 的对象:

const cat = new cat("小黑","2");

这段代码创建了 cat 并给他的属性指定值,于是 cat.name 的值为"小何", cat.age 的值为 2,以此类推。

image.png

如果在构造函数中返回对象,例如,name、age 属性。

return{
    name:"小黑黑",
    age:1

  }

image.png

实例化之后,这个对象有两种情况,如果在构造函数中如果不给它返回值,获取到的就是我们构造函数中的实例属性以及它的方法。如果在构造函数中给它返回了一个对象,有返回值的情况下,实例化之后获取的是返回的值。

new 操作符实现方式

const Cat =function(options) {
  this.name = options.name;
  this.age = options.age;
 
}

const ObjectFactory = (...args)=>{
  const obj = {};
  const Constructor = [].shift.call(args)
  obj.__proto__ = Constructor.prototype;
  const ret = Constructor.apply(obj,args);
  return typeof ret === 'object'? ret: obj;
}

const cat =ObjectFactory(Cat,{name:"小黑",age:1.5});
console.log('cat :>> ', cat);

new 操作符具体实现方式的步骤:

  • 1、创建一个空对象,
  • 2、获取构造函数。
  • 3、对象的隐示原型,去指向构造函数的显示原型。
  • 4、用 apply 的方式去把构造函数的 Constructor 的 this 指向 obj,执行 Contructor
  • 5、根据ret 的执行结果判断返回构造函数的返回对象,还是返回新的创建这个空对象。
  • 6、使用 typeof 来判断我们这个构造函数的执行结果是否是一个对象。

在面试中,面试官怎么问

  • 是否在实际项目中使用过 new 操作符。
  • 是否可以实现一个就操作符。为什么要考察是否可以实现 new 操作符呢?主要是考察基础知识是否扎实。

面试中遇到该题目如何回答

  • 说出 new 操作符实际使用场景。比如腾讯地图、高德地图。

  • 如果笔试的话,直接写出 new 操作符的一个完整实现。