位置: IT常识 - 正文

【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册)

编辑:rootadmin
【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind

推荐整理分享【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript手机app,javascript手册安卓版,javascript手册安卓版,手机里javascript有什么用,javascript手机app,javascript手机编程,javascript手机app,javascript手机版,内容如对您有帮助,希望把文章链接给更多的朋友!

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 👉 你的一键三连是我更新的最大动力❤️! 🏆分享博主自用牛客网🏆:一个非常全面的面试刷题求职网站,点击跳转🍬

文章目录前言1、手写Object.create要求手撕代码2、手写Function.call要求手撕代码3、手写Function.bind要求手撕代码结语前言

向大家推荐一款博主一直在用的面试刷题求职网站:牛客网

牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点击进入牛客网

牛客网牛客网

本篇文章所有示例参考自牛客网题库/在线编程/JS篇。

1、手写Object.create要求

补全JavaScript代码,要求实现Object.create函数的功能且该新函数命名为"_objectCreate"。

Object.create函数介绍如下:

Object.create() 方法用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。

Object.create 参数:

proto 新创建对象的原型对象。

propertiesObject (可选) 如果该参数被指定且不为 undefined,则该传入对象的自有可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。这些属性对应于 Object.defineProperties() 的第二个参数。

Object.defineProperties()方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

Object.create 返回值:一个新对象,带着指定的原型对象及其属性。

手撕代码const _objectCreate = function (proto, propertiesObject) { // 补全代码 if (typeof proto !== 'object' || proto === null) { throw new TypeError('Object prototype may only be an Object or null') } // 定义新对象 const obj = {} // 设置原型 // obj.__proto__ = proto // 不建议这么做了 // 通常,应该使用 Object.setPrototypeOf() 方法来设置对象的原型。 // 因为 Object.prototype.__proto__ 访问器已被弃用。 Object.setPrototypeOf(obj, proto) // 建议使用setPrototypeOf设置原型 if (propertiesObject && propertiesObject !== 'undefined') { // 设置属性 Object.defineProperties(obj, propertiesObject) } return obj}

注意:通过__proto__设置原型的方法(obj.__proto__ = proto)已经不在标准中了!

测试一下:

let o = { a: 1 }let b = _objectCreate(o, { 'property1': { value: true, writable: true }, 'property2': { value: 'Hello', writable: false }})let c = Object.create(o, { 'property1': { value: true, writable: true }, 'property2': { value: 'Hello', writable: false }})console.log('使用_objectCreate创建的:', b);console.log('使用create创建的:', c);

2、手写Function.call要求

补全JavaScript代码,要求实现Function.call函数的功能且该新函数命名为"_call"。

Function.call()函数介绍如下:

【JavaScript】手撕前端面试题:手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册)

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

Function.call 参数:

thisArg 可选的。在 function 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

arg1, arg2, ... 指定的参数列表。

Function.call返回值:

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。

手撕代码// target参数默认为windowFunction.prototype._call = function (target = window, ...arg) { // target是一个对象,这里的this就是调用_call方法的函数(母函数) // 我们需要实现的是将母函数的this指向到target,那么就可以: // 将母函数绑定到target的fn属性上,这样调用target.fn时它的this就指向了target target.fn = this; // 获取函数运行结果 const result = target.fn(...arg); // 再将target上的fn属性删除 delete target.fn return result}

测试一下:

function fn(a, b) { return this.name + a + b}let obj = { name: 'Ailjx' }console.log(fn.call(obj, 'S', "R"));console.log(fn._call(obj, 'S', "R"));

3、手写Function.bind要求

补全JavaScript代码,要求实现Function.bind函数的功能且该新函数命名为"_bind"。

Function.bind()函数介绍如下:

Function.bind()函数与Function.call()函数类似,区别就是Function.bind()返回的是一个修改过this指向的新函数,而不是函数执行后的值。

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的初始参数,供调用时使用。

Function.bind 参数:

thisArg 调用绑定函数时作为 this 参数传递给目标函数的值。如果使用new运算符构造绑定函数,则忽略该值。当使用 bind 在 setTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空,或者thisArg是null或undefined,执行作用域的 this 将被视为新函数的 thisArg。

arg1, arg2, ... 当目标函数被调用时,被预置入绑定函数的参数列表中的参数。

Function.bind返回值:

返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。

手撕代码Function.prototype._bind = function (target = window, ...arg) { const fn = this; return function (...rest) { return fn.call(target, ...arg, ...rest); };};

测试一下:

function fn(a, b) { return this.name + a + b;}let obj = { name: "Ailjx" };// bind的第二个参数和返回的函数的参数会合并到一起console.log(fn.bind(obj, "S")("R"));// 以下两种写法与上面相等// console.log(fn.bind(obj, "S", "R")());// console.log(fn.bind(obj)("S", "R"));console.log(fn._bind(obj, "S")("R"));// console.log(fn._bind(obj, "S", "R")());// console.log(fn._bind(obj)("S", "R"));

结语

这篇文章的所有内容都出自于牛客网的JS篇题库:

牛客网的JS题库非常贴合实际的,在写的过程查漏补缺能收获了很多,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

本文链接地址:https://www.jiuchutong.com/zhishi/299155.html 转载请保留说明!

上一篇:FormData详解(formdata方法)

下一篇:使用element-ui中的el-upload自定义上传(elemental ui)

  • 中国移动宽带怎么查看附近移动营业厅(中国移动宽带怎么退订)

    中国移动宽带怎么查看附近移动营业厅(中国移动宽带怎么退订)

  • ios支付失败(苹果支付方式失败)

    ios支付失败(苹果支付方式失败)

  • 部分选中按什么键(部分选中按什么键进行操作)

    部分选中按什么键(部分选中按什么键进行操作)

  • 戴尔笔记本重装系统进不了系统怎么办(戴尔笔记本重装系统教程)

    戴尔笔记本重装系统进不了系统怎么办(戴尔笔记本重装系统教程)

  • iphone抖音评论变成白色(iphone抖音评论怎么变成白色了)

    iphone抖音评论变成白色(iphone抖音评论怎么变成白色了)

  • QQ浏览器如何压缩文件(qq浏览器如何压缩文件)

    QQ浏览器如何压缩文件(qq浏览器如何压缩文件)

  • 苹果闪烁怎么关(苹果关掉闪烁)

    苹果闪烁怎么关(苹果关掉闪烁)

  • 天机处理器是什么意思(天机处理器是什么牌子)

    天机处理器是什么意思(天机处理器是什么牌子)

  • 华为手机格式化后数据还能恢复吗(华为手机格式化恢复出厂设置)

    华为手机格式化后数据还能恢复吗(华为手机格式化恢复出厂设置)

  • mac校验错是什么意思(mac校验错,请重新签到)

    mac校验错是什么意思(mac校验错,请重新签到)

  • 对蓄电池充电什么能转化为什么能(蓄电池充电什么样算充满)

    对蓄电池充电什么能转化为什么能(蓄电池充电什么样算充满)

  • 小天才电话手表z5q和z6区别(小天才电话手表充不进去电是怎么回事)

    小天才电话手表z5q和z6区别(小天才电话手表充不进去电是怎么回事)

  • iqoo液冷有用吗(iqooz1液冷)

    iqoo液冷有用吗(iqooz1液冷)

  • 企业qq可以发群消息吗(企业qq可以发群公告吗)

    企业qq可以发群消息吗(企业qq可以发群公告吗)

  • 手机怎么看qq好友加了多少天(手机怎么看qq好友认识多少天)

    手机怎么看qq好友加了多少天(手机怎么看qq好友认识多少天)

  • 优酷土豆路由器怎么设置(优酷土豆路由器初始密码)

    优酷土豆路由器怎么设置(优酷土豆路由器初始密码)

  • vivox23后壳能换吗(vivox23幻彩版换后壳)

    vivox23后壳能换吗(vivox23幻彩版换后壳)

  • 微信图标右下角有个对勾(微信图标右下角有个蓝色盾牌)

    微信图标右下角有个对勾(微信图标右下角有个蓝色盾牌)

  • 手机显示时间怎么设置(手机显示时间怎么调成二十四小时)

    手机显示时间怎么设置(手机显示时间怎么调成二十四小时)

  • 路由器间歇性断网是为什么?该怎么办?(路由器间歇性断网怎么解决)

    路由器间歇性断网是为什么?该怎么办?(路由器间歇性断网怎么解决)

  • esxcfg-addons命令  列出ESX主机所安装的Addons(es命令行)

    esxcfg-addons命令 列出ESX主机所安装的Addons(es命令行)

  • vue大型电商项目尚品汇(前台篇)day05(用vue做的企业项目)

    vue大型电商项目尚品汇(前台篇)day05(用vue做的企业项目)

  • 增值税应纳税额的计算
  • 税控盘技术维护费申报时候怎么填报
  • 认缴制投资方的账务处理
  • 固定资产累计折旧是什么科目
  • 个月所得税税率
  • 不得免征和抵扣税额抵减额
  • 新企业需要结转增值税吗
  • 土地增值税清算规程实施细则
  • 外购商品增值税
  • 进口原材料关税税率是多少
  • 出口货款收不回来怎么办
  • 期初建账以前年度损益调整怎么转?
  • 老板找人替我工作说明了什么
  • 增值税期末留抵税额的账务处理
  • 发票打印机分专票和普票的吗?
  • 建筑企业收到的成本发票可以直接进主营业务成本吗
  • 企业不征税收入用于支出所形成的固定资产
  • 免抵退税的范围
  • 上月开的发票本月作废怎么处理
  • 企业未成立工会需要交工会经费吗
  • 未取得房产证的房子如何迁户口
  • linux网络设置在哪里
  • 收到办公室桶装水开的普票怎样入账?
  • 事业单位财政直接支付了费用忘记入帐
  • 我开了一个物流公司,有人要开发票怎么办
  • SCHDPL32.EXE - SCHDPL32是什么进程 有什么用
  • 营改增后房租收入怎么交税
  • 固定资产后续支出一律计入固定资产成本
  • 哈雷6号
  • 可用保证金余额为负
  • javaweb知识点汇总
  • 常用的css样式有哪些
  • 制造业企业资金如何循环周转
  • 深入node.js技术栈
  • GCN经典论文笔记:Semi-Supervised Classification with Graph Convolutional Networks
  • opencv几何变换
  • Yii2实现同时搜索多个字段的方法
  • inotify_event
  • 不得抵扣增值税的情形有哪些
  • 股东投资的钱要还给他吗
  • python怎么用?
  • 为什么费用报销先由主管部门审批在由财务审核
  • 专项应付款 会计分录
  • 如何进行工程项目的经济评价
  • 个体户一年能开多少票不用交税
  • 房开企业预缴增值税附加税费
  • 固定资产指的是几年度
  • 发生销售退回账务处理
  • 微信验证收到的信息在哪
  • 附加税的计税依据是增值税实际缴纳税款吗
  • 其他公司归还借款分录
  • 微信转账没有显示对方的名字怎么办
  • 技术服务所发生的事故
  • 新注册企业实收资本没到账怎么处理
  • 新手必看教程
  • 其他应收款有哪些科目
  • 赠送购物券的会计处理
  • 装修设计费多少合理
  • win8的应用商店
  • win10右键菜单怎么设置
  • linux中进程在运行时的基本状态
  • win7系统计算机名称在哪看
  • windows 8.1更新
  • unity跨脚本调用函数
  • ansi std
  • opengl源码在哪里
  • 彻底弄懂js中的this指向
  • 分享一下相亲时碰见过哪些奇葩事
  • Node.js中Bootstrap-table的两种分页的实现方法
  • jQuery ajax时间差导致的变量赋值问题分析
  • 阿里大于短信验证接口
  • unity 开发游戏
  • jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
  • javascript总结笔记
  • 面向对象的知识
  • android开发从入门到精通(项目案例版)
  • 螺丝钉的税率
  • 票据贴现的票据是什么
  • 小规模纳税人和一般纳税人的区别
  • 苏州税务局办税时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设