一道关于重写内置new 的面试题;

对于new 是干什么的的,我们就不多说了,之前在文章构造函数创建自定义类中详细讲过

面试题原题如下:

  1. function Dog(name) {
  2. this.name = name;
  3. }
  4. Dog.prototype.bark = function () {
  5. console.log('wangwang');
  6. }
  7. Dog.prototype.sayName = function () {
  8. console.log('my name is ' + this.name);
  9. }
  10. /*
  11. let sanmao = new Dog('三毛');
  12. sanmao.sayName();
  13. sanmao.bark();
  14. */
  15. //=>基于内置的new关键词,我们可以创建Dog的一个实例sanmao,实例可以调取原型上的属性和方法,现在的需求是:自己实现一个_new方法,也能模拟出内置new后的结果
  16. function _new() {
  17. //=>完成你的代码
  18. }
  19. let sanmao = _new(Dog, '三毛');
  20. sanmao.bark(); //=>"wangwang"
  21. sanmao.sayName(); //=>"my name is 三毛"
  22. console.log(sanmao instanceof Dog); //=>true
  23. 复制代码

内置new分析

sanmao = new Dog('三毛');
// 首先要把Dog当做普通函数执行(私有上下文、形参赋值、作用域链、变量提升、代码执行...)
构造函数执行需要注意的几种情况:
// 特殊1:创建一个对象(而这个对象是当前类的一个实例 对象.__proto__===类.prototype)
// 特殊2:并且让函数中的THIS指向创建的这个对象
// 特殊3:在函数没有返回结果或者返回基本数据值的情况,把创建的实例对象返回
复制代码

实现思路

/*
 * _new:模拟内置NEW的操作,可以创建某个类的实例
 *   @params
 *      Fn:想创建哪个类的实例,就把哪个类传递进来
 *      后续参数不固定个数,都是给当前类执行时候传递的值
 *   @return
 *      Fn这个类的一个实例 
 */

IE中不允许我们操作__proto__ 
    let obj = {};
    obj.__proto__ = Fn.prototype; //=>所以这个方法pass掉
Object.create :创建一个空对象,把xxx做为空对象的原型(也就是让obj.__proto__===xxx)
复制代码

实现代码如下

function _new(Fn,...args) {
  // 创建实例对象OBJ(obj.__proto__===Fn.prototype)
  let obj = Object.create(Fn.prototype);

  // 执行Fn函数(普通函数)的时候,需要让Fn中的THIS指向实例对象OBJ
  let result = Fn.apply(obj, args);

  // 把创建的实例对象返回(前提是Fn执行返回的不是对象等引用值)
  if (result !== null && (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  return obj;
}
复制代码

去掉注释

function _new(Fn,...args) {
  let obj = Object.create(Fn.prototype);
  let result = Fn.apply(obj, args);
  if (result !== null && (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  return obj;
}