一起养成写作习惯!这是我参与「掘金日新计划 · 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,以此类推。
如果在构造函数中返回对象,例如,name、age 属性。
return{
name:"小黑黑",
age:1
}
实例化之后,这个对象有两种情况,如果在构造函数中如果不给它返回值,获取到的就是我们构造函数中的实例属性以及它的方法。如果在构造函数中给它返回了一个对象,有返回值的情况下,实例化之后获取的是返回的值。
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 操作符的一个完整实现。