📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 手写new
  • new的过程
  • 实现myNew
  • 手写call
  • call实现的原理
  • 实现myCall
  • 优化
  • 手写apply
  • 手写bind
在GitHub上编辑
  1. 前端技术
  2. 深入理解JavaScript系列

JavaScript手写系列

手写new

new的过程

在我们手动实现一个new前,我们应该需要知道new的过程中发生了什么?

在new 构造函数的过程其实就是“类”实例化的过程,这个过程里干了件事。

  1. 在内存中创建一个对象

  2. 将此对象的prototype 指向构造函数的prototype

  3. 将this指向此对象

  4. 执行构造函数里的代码,也就是为this添加属性和方法

  5. 如果返回的是一个非空对象,则返回此对象,否则返回this

实现myNew

好了,我们已经知道new 过程中干了什么,那么我们手动实现new也不再困难。

function myNew (target,...args){
    if(!target){
        return;
    }
    const obj = {}
    obj.prototype = target.prototype
    // 执行target构造函数里的代码
    const result = target.call(obj,...args)
    return typeof result === 'object' ? result : obj
}

手写call

手动实现call乍一看好像挺难的,但是我们可以和new一样,先看call实现的原理,然后再手动实现一个

call实现的原理

我们知道call的作用是改变this的指向并调用函数。

[].toString() // ''
Object.prototype.toString.call([])  // [object Array]

那么我们改变this即可,this指向调用者,那么我们只要改变this的调用者就可以实现call的效果。

// 函数的this指向调用者
function foo(){
    console.log(this) // window
}
let obj = {
    foo(){
        console.log(this) // obj
    }
}

并且call方法挂载在Function.prototype上的,所以我们也将函数挂载在Function.prototype,这样所有的函数都能使用(函数是Function的实例)4

实现myCall

Function.prototype.myCall = function(target,...args){
    if (typeof this !== "function") {
    	throw new TypeError("not a function")
    }
    target.fn = this
    const result = target.fn(...args)
    delete target.fn
    return result
}
const obj = {name: '阿花'}
function foo(...args){
    console.log(this.name)
    console.log('收到参数',...args)
}
foo.myCall(obj,1,2)
// 阿花
// 收到参数 1 2

这样就是实现了myCall,其中里面最重要的两句代码我们来分析一下。target.fn = this,这条语句将this,也就是Function的实例函数(foo)挂载到obj上,这样foo函数也就成了obj的一个方法,然后const result = target.fn(...args)调用并且传参,这个时候调用foo时,foo的调用者是obj,因此this也指向obj,所以可以访问obj的属性name。

然后删除临时使用fn属性,不然会污染原来的对象,最后返回函数调用的结果即可。

优化

上面其实还有个问题,那就是将this挂载到对象obj的过程中使用了临时属性fn,最后为了避免污染又删除了,但是如果对象obj原本就有这个属性,那么这些操作就会删除原有的fn属性。

我们可以借助symbol来解决这个问题

Function.prototype.myCall = function(target,...args){
    // this表示Function的实例,也就是说myCall必须是在函数上调用
    if (typeof this !== "function") {
    	throw new TypeError("not a function")
    }
    // 使用symbol作为属性,避免污染对象原有的属性
    const sym =  Symbol('临时属性')
    target[sym] = this
    const result = target[sym](...args)
    delete target[sym]
    return result
}
const obj = {name: '阿花'}
function foo(...args){
    console.log(this.name)
    console.log('收到参数',...args)
}
foo.myCall(obj,1,2)
// 阿花
// 收到参数 1 2
console.log(obj) // 查看是否有污染
// Object { name: "阿花" }

手写apply

实现了手写call后,手写apply就不是什么难事,直接上代码。

Function.prototype.myApply = function(target,argArr){  // 第二个参数改为数组
    if (typeof this !== "function") {
    	throw new TypeError("not a function")
    }
    // 使用symbol作为属性,避免污染对象原有的属性
    const sym =  Symbol('临时属性')
    target[sym] = this
    const result = target[sym](...argArr)
    delete target[sym]
    return result
}
const obj = {name: '阿花'}
function foo(...args){
    console.log(this.name)
    console.log('收到参数',...args)
}
foo.myApply(obj,[1,2]) // 参数改为数组形式
// 阿花
// 收到参数 1 2
console.log(obj) // 查看是否有污染
// Object { name: "阿花" }

手写bind

bind和之前的apply、call不同的是,bind并不会立即执行函数,而是返回改变this后的函数。

乍一看好像很简单,我们只需要把之前调用的代码全部删掉,直接返回改变this后的函数即可。

Function.prototype.myBind = function(target){  
    if (typeof this !== "function") {
    	throw new TypeError("not a function")
    }
    // 使用symbol作为属性,避免污染对象原有的属性
    const sym =  Symbol('临时属性')
    target[sym] = this
	// const result = target[sym](...argArr)
    // delete target[sym]
    return target[sym] 
}
const obj = {name: '阿花'}
function foo(...args){
    console.log(this.name)
    console.log('收到参数',...args)
}
var myFn = foo.myBind(obj) // 参数改为数组形式
myFn(1,2,3)
// <empty string>
// 1 2 3
console.log(obj) // 查看是否有污染
// Object { name: "阿花", Symbol("临时属性"): foo(args) }

这里有两个问题,一个是console,log(this.name)打印了<empty string>,说明改变this失败了,另一个就是临时属性symbol没有删掉,会造成污染。

这里其实不难解决,我们分析一下,为什么this.name没有生效,因为var myFn = foo.myBind(obj) 这条语句其实等于myFn = obj[sym],然后我们最终调用的时候是在全局环境下调用的,也就是说调用者是全局对象window,而不是obj了。

因此我们只需要在外面再包裹一个函数,形成闭包即可,还可以在此函数里删除临时属性。

Function.prototype.myBind = function(target){  
    if (typeof this !== "function") {
    	throw new TypeError("not a function")
    }
    // 使用symbol作为属性,避免污染对象原有的属性
    const sym =  Symbol('临时属性')
    target[sym] = this
	// const result = target[sym](...argArr)
    // delete target[sym]
    return function(...argArr){
     	const result = target[sym](...argArr)
    	delete target[sym]
    }
}
const obj = {name: '阿花'}
function foo(...args){
    console.log(this.name)
    console.log('收到参数',...args)
}
var myFn = foo.myBind(obj) // 参数改为数组形式
myFn(1,2,3)
// 阿花
// 1 2 3
console.log(obj) // 查看是否有污染
// Object { name: "阿花"}
上一页JavaScript浅拷贝和深拷贝下一页JavaScript之this

最后更新于3年前