首页 > 其他分享 >JS高级之手动实现new操作符

JS高级之手动实现new操作符

时间:2023-04-24 12:23:16浏览次数:36  
标签:obj 对象 JS 操作符 result params Foot new

相信大家都很好奇,在js中为什么函数在经过new操作之后会变成一个对象?

function Foot(params){
  this.name = params
}

Foot("aa")
undefined

new Foot("aa")
Foot {name: 'aa'}

实际上,new是一个语法糖
从上面介绍中,我们可以看到new关键字主要做了以下的工作:

  1. 创建一个新的对象obj

  2. 将对象与构建函数通过原型链连接起来

  3. 将构建函数中的this绑定到新建的对象obj上

  4. 根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理

下面我们来手动实现一个new

function myNew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    return result instanceof Object ? result : obj
}

function Foot(params){
  this.name = params
}

myNew(Foot,"AA")


或者可以在Object的原型对象中实现这个方法

Object.prototype.myNew = function(...params){
    var obj = {};
    obj.__proto__ = this.prototype 
    let result = this.apply(obj,params);
    return result instanceof Object ? result : obj
}

标签:obj,对象,JS,操作符,result,params,Foot,new
From: https://www.cnblogs.com/shinebay/p/17349043.html

相关文章

  • filebeat篇章——解析 json 日志
    解析json日志(Parsingjsonlogs)https://www.elastic.co/guide/en/beats/filebeat/8.7/running-on-kubernetes.html#_parsing_json_logs ItiscommoncasewhencollectinglogsfromworkloadsrunningonKubernetesthattheseapplicationsarelogginginjsonformat......
  • JS中在浏览器外推送消息
    //请求显示通知的权限Notification.requestPermission().then(function(permission){if(permission==='granted'){//创建通知对象varnotification=newNotification('哇真的是你呀',{body:'你干嘛哎哟#@!~哈哈amagi',icon:'/......
  • malloc和new//free和delete
    malloc和new的区别?malloc和free是标准库函数,支持覆盖;new和delete是运算符,支持重载。malloc仅仅分配内存空间,free仅仅回收空间,不具备调用构造函数和析构函数功能,用malloc分配空间存储类的对象存在风险;new和delete除了分配回收功能外,还会调用构造函数和析构函数。malloc和f......
  • 记录一次nodejs操作mongodb报错
    记录一次使用Mongoose操作mongodb报错Mongoose查询回调函数报错BookModel.findOne({name:'Rust'},(err,data)=>{if(err){console.log('读取失败');return;}//输出data变量的值console.log(data);......
  • keydb ModJS的一些说明
    一些特性modjs是基于了标准redis的模块支持处理的,当然是需要注意redis版本的,实际上大家基本都已经使用相对比较新的redis版本的提供了EVALJS可以实现类似lua的命令操作支持添加命令(但是需要在启动的时候)支持npm模块,但是不是完全兼容npm的,没有实现io的大部分函数,同时比......
  • JS课堂笔记(4.17-4.21)
    一、循环 1.在程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称为循环语句。2.循环执行的过程是①第一次循环:第一次赋值,然后条件判断,执行循环体,最后执行累计。②非第一次循环:条件判断,执行循环体,最后执行......
  • js循环调用接口,获取每一次接口的值
    vue代码。data数据:list:[{listName:"待办",listNum:0},{listName:"退回",listNum:0},{listName:"已办",listNum:0},{listName:"全部",listNum:0}],methods里面的方法:asyncgetAllData(){this.list......
  • Node.js Event Loop & V8 engine & libuv All In One
    Node.jsEventLoop&V8engine&libuvAllInOne事件循环constcb1=()=>console.log(`1`);constcb2=()=>console.log(`2`);constcb3=()=>console.log(`3`);constcb4=()=>console.log(`4`);constcb5=()=>console.log(......
  • vue转换js文件 require js
    1define和require方式 不同点define用来定义一个模块的,requireconfig文件配置后才行require 加载模块define来定义模块,还是通过require来加载模块究竟什么时候去使用2TaskExcutionToday文件如何转换compoment方式 ......
  • JavaScript分页控件 js 分页
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content......