题01:用原生js实现一个new?
答:拿到这个题目,一脸懵逼,咱们平时在开发中,使用到new时一般都是类创建时对象,现在直接不给使用new来实现,不是把简单问题复杂化了?为啥要出这种题?面试官考查面试者的用心在哪里?考查的是什么知识点?
面试官目的:当然是通过考题来测试出面试者的掌握程度从而为公司挑选出适合项目开发的前端人才
面试官的心思:从这个题目来看,主要考查的是面试者对于函数原型的构造过程,理解里面的原理,考查的知识点也比较深,敢出这种题的公司一般都有做库,公众组件等需求,要求面试者熟练掌握函数原型的相关知识,对面试者的要求也比较高,有点难度!
题目解读:
从题目来分析,构造一个对象,有至少两种方案,一种是new,这个种最普通最常见也最简单的,另外一个就是自己花时间使用js实现一个,也就是本题设计者要求面试做的;
我们先来看看正常的一个类函数:
function Car(){
this.name=arguments&&arguments.length>0?arguments[0]:'Tsila';
};
Car.prototype.bibi=function(){
alert('Hello,I am '+this.name);
};
//常规new 方法1:使用new来实现
var carObj=new Car('Biyadi');
carObj.bibi();//show tip:Hello,I am Biyadi,效果见下图1
//方法2:不使用new来实现,增加一个手写函数
function createObj(){
var cls=Array.prototype.shift.call(arguments);
var obj={};
cls.apply(obj,arguments);
obj.__proto__ = cls.prototype
//Object.setPrototypeOf(obj,cls.prototype);
return obj;
}
//原生非new方法2
var xpengCar =createObj(Car,'XiaoPeng');
xpengCar.bibi();//show tip:Hello,I am XiaoPeng,效果见下图2
从上面两个方法对比可以发现,两个方法都可以实现相同的功能,但一个使用了new,另外一个使用了同new类似原理的原生js写成的,但写成的代码行数更多,这里看出new起来还是比较方便的,而通过原生js模仿了一个new代码发现,new一个类对象,关键的就是两步,把参数赋值给新的对象,把某类prototype赋值给新对象的__proto__
在工作中的运用:
一般会使用到公众类里面,模式就是先申请一个类函数如下
function A(args){
//todo init
}
再把一个对象赋值给上面类函数的prototype
A.prototype={
b:function(params){
//do something
},
c:function(params){
//do something
}
};
写好以后,就使用我们上面的方法2:
var a=createObj(A,params);
a.b(params);
a.c(params);