位置: 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)

  • 房产税的计算公式是多少
  • 新公司开基本户银行选择
  • 个税0申报漏了2年可以补报
  • 借方是收入还是支出 正负号
  • 代扣代缴增值税怎么做账
  • 水利建设基金的计税依据
  • 企业所得税前可以扣除的项目
  • 旧设备用于投资是否应按视同销售处理
  • 公司化验室领用丙材料3000元
  • 境外企业提供国外服务
  • 拿租金抵押金如何做账?
  • 一般纳税人预交税款算法
  • 办事处可以办理临时身份证吗
  • 超市开发票要交百分之几的税?
  • 普通发票开票人为管理员是否可以报销?
  • 个人开劳务专票给公司怎么开
  • 逃避缴纳税款征管法第几条
  • 金融企业的成本核算方法
  • 自有房屋的装修费计入长期待摊
  • 劳务挂靠需要开票吗
  • 建筑服务安装费会计分录
  • 企业有哪些项目名称
  • 包装物租金怎么算
  • win7纯净版系统
  • 会计科目发出商品
  • 认证进项转出怎么操作
  • 投资印花税入什么科目
  • 电脑系统权限管理在哪里
  • linux系统中安装web服务
  • RPDFLchr.exe - RPDFLchr是什么进程 有什么用
  • 销售商品收到商业汇票一张会计分录
  • Linux Kernel 4.5在3月15日发布最终版
  • php_sapi_name
  • 酒店损益类科目包括哪些
  • 两名山地车骑手死亡
  • idea怎么运行前端vue项目
  • vue vif
  • JS之location对象详解
  • docker运行多个镜像
  • js面试2021
  • 前端开发常见的兼容性问题
  • vue懒加载机构树刷新
  • 兼职人员的劳务费标准
  • layui框架模板
  • 公司间代收代付
  • 财务核算科目核算流程图
  • php生成器和迭代器理解
  • 哪些合同不用计提印花税
  • mysql的环境配置
  • 事业单位如何计算退休工资
  • 负数发票作废后对原发票有影响吗
  • 进项税留底怎么处理
  • 商贸公司的外账怎么做
  • 以前年度损益调整
  • 资产评估增值的税务处理
  • 出口退税账务处理
  • 债券发行费用的计算方法
  • 出口货物退货需要交税吗
  • 专票的发票金额是价税总额吗
  • 房地产开发企业电费做什么科目
  • mysql 数据库
  • sqlsever修改数据
  • 如何修改注册表键值
  • Windows Server 2008下共享资源访问走捷径
  • linux tracker
  • win7打开tftp服务器
  • win11连接win7共享打印机
  • 不经过回收站直接删除文件的操作是
  • win7系统待机设置
  • 如何使用ai软件
  • 基于重大误解实施的民事法律行为
  • [置顶]bilinovel
  • 基于stm32的100个毕业设计
  • 基于javascript的毕业设计
  • js浏览器运行机制
  • json convert
  • python中ans
  • python如何获取系统绝对路径
  • 浙江省国税公务员工资
  • 税收公司法人有风险么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设