金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

重写一个内置new

vuePress-theme-reco 金色小芝麻    2021 - 2023

重写一个内置new

金色小芝麻 2020-06-10

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

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

面试题原题如下:

function Dog(name) {
    this.name = name;
}
Dog.prototype.bark = function () {
    console.log('wangwang');
}
Dog.prototype.sayName = function () {
    console.log('my name is ' + this.name);
}
/*
let sanmao = new Dog('三毛');
sanmao.sayName();
sanmao.bark();
*/
//=>基于内置的new关键词,我们可以创建Dog的一个实例sanmao,实例可以调取原型上的属性和方法,现在的需求是:自己实现一个_new方法,也能模拟出内置new后的结果
function _new() {
    //=>完成你的代码

}
let sanmao = _new(Dog, '三毛');
sanmao.bark(); //=>"wangwang"
sanmao.sayName(); //=>"my name is 三毛"
console.log(sanmao instanceof Dog); //=>true

# 内置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;
}

欢迎来到 金色小芝麻
看板娘