面试题 三

一、this

在这里插入图片描述
在这里插入图片描述

  1. 手写call
    在这里插入图片描述
//1、定义myCall方法
//3、接收剩余参数并返回结果
Function.prototype.myCall = function (thisArg, ...arg) {
  // console.log(thisArg);  //person对象
  // console.log(this);     //func方法
  //2、设置this并调用原函数
  //下面三行代码有个缺陷就是如果person上有属性f，这里会把原有的f覆盖掉，可以用symbol规避该问题
  // thisArg.f = this;
  // let result = thisArg.f(...arg)
  // delete thisArg.f

  //4、使用symbol调优
  let key = Symbol("key");
  thisArg[key] = this;
  let result = thisArg[key](...arg)
  delete thisArg[key]

  // console.log(arg);
  return result
}
let person = { name: "张三" }
function func(a,b) {
  console.log(this);  //person对象
  console.log(a,b); //1  2
  return a + b;
}
let result = func.myCall(person, 1,2)
console.log(result);  //3
  1. 手写applay
/**
* 1、定义myApply方法论
* 2、设置this并调用原函数
* 3、接收参数并返回结果
* **/
Function.prototype.myApply = function (thisArg, args) {
 const key = Symbol("key");
 thisArg[key] = this;
 let result = thisArg[key](...args)
 delete thisArg[key]
 return result
}

const person = { name: "张三" }
function func(a,b) {
 console.log(this);
 console.log(a,b);
 return a + b
}

let res = func.myApply(person, [2,8]);
console.log("返回值："+res);

在这里插入图片描述

  1. 手写bind方法
/**
* 手写bind方法
* 1、定义myBind方法
* 2、返回绑定this的心函数
* 3、合并绑定和新传入的参数
* **/
Function.prototype.myBind = function (thisArg, ...args) {
 console.log(this);
 //因为下面bingDunc要作为方法执行，所以这里要返回一个方法
 return (...reargs) => {
   //改变this的指向并返回数据
   return this.call(thisArg, ...args, ...reargs)
 }
}

const person = { name: "张三" }
function func(a,b,c,d) {
 console.log(this);
 console.log(a,b,c,d);
 return a + b + c + d
}
const bindFunc = func.myBind(person, 1,2)
const res = bindFunc(3,4)
console.log("返回值：", res);

二、class

  1. 基本使用
class Person {
  constructor(name) {
    this.name = name
  }
  sayHi(){
    console.log("我的名字是"+this.name);
  }
}
let p = new Person("张三")
p.sayHi()//我的名字是张三
  1. class继承
    在这里插入图片描述
    注：
    1）子类有自己额外的属性是，需要在 constructor 里调用 super 方法，参数要传父类所需要的参数
    2）当父类、子类有同名方法时，子类优先父类
class Person {
   // name
   constructor(name) {
     this.name = name
   }
   sayHi(){
     console.log("我的名字是"+this.name);
   }
 }
 class Student extends Person {
   constructor(name, age) {
     super(name)
     this.age = age
   }
   sayHi(){
     console.log("Student--我的名字是"+this.name);
   }
   sayHello() {
     console.log(`Student--我的名字是${this.name}，我今年${this.age}岁`);
   }
 }
 let s = new Student("张三", 18)
 s.sayHi()//Student--我的名字是张三
 s.sayHello()//Student--我的名字是张三，我今年18岁
  1. 静态属性、方法和私有属性、方法
    在这里插入图片描述
 /**
  * 静态属性
   *  定义时：用 static 开头
   *  使用时：通过类访问，无法通过实例去使用
   * 私有属性
   *  定义时：以 # 开头
   *  使用时：以 # 开头，和定义的名字相同，只能在类的内部使用，无法通过实例调用
   *  注：chrome 的控制台中，可以直接访问私有属性和方法（便于调试）t.prInfo / t.prMethod()
   * **/
  class Test {
    static stInfo = "静态属性"
    static stMethod() {
      console.log("静态方法");
    }
    #prInfo = "私有属性"
    #prMethod() {
      console.log("私有方法");
    }
    testPr() {
      console.log(this.#prInfo);
      console.log(this.#prMethod());
    }
  }
  Test.stMethod()
  console.log(Test.stInfo);

  let t = new Test()
  t.testPr()

在这里插入图片描述

三、继承

在这里插入图片描述

//组合式继承：借用构造函数，原型链
//寄生：父类的原型中有子类的构造函数

 //父类
 function Person(name) {
   this.name = name
 }
 Person.prototype.sayHi = function () {
   console.log(`你好，我叫${this.name}`);
 }

 //寄生组合式继承核心代码
 //通过构造函数继承属性
 function Student(name) {
   Person.call(this, name)
 }
 //通过原型链继承方法
 //复制Person的原型链，并将construct改为Student
 let prototype = Object.create(Person.prototype, {
   //没有该配置的话，Person的construct是Student
   constructor: {
     value: Student
   }
 })
 //将创建的原型链赋值给子类的原型
 Student.prototype = prototype

 let s = new Student("张三")
 s.sayHi()
 console.log(s);

 let p = new Person("李四")
 console.log(p);

在这里插入图片描述

四、fetch在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、Generator

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、手写Promise

  1. promise 基本
//1、定义类
class MyPromise {
  //2、添加构造函数
  constructor(func) {
    //3、定义resolve、reject
    let resolve = (res) => {console.log(res);}
    let reject = (res) => {console.log(res);}
    //4、执行回调函数
    func(resolve, reject)
  }
}

const p = new MyPromise((resolve,reject) => {
  resolve("成功了");
  // reject("失败了");
})
  1. 处理promise的状态和原因
const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"
class MyPromise{
  //1、添加状态
  state = PENDING
  //2、添加原因
  result = undefined
  constructor(func) {
    //3、调整resolve、reject
    //4、状态不可逆
    //改状态：pending-》fulfilled
    //记录原因
    const resolve = (res) => {
      if(this.state === PENDING) {
        this.state = FULFILLED
        this.result = res
      }
    }
    //改状态：pending-》rejected
    //记录原因
    const reject = (res) => {
      if(this.state === PENDING) {
        this.state = REJECTED
        this.result = res
      }
    }
    func(resolve, reject)
  }
}

const p = new MyPromise((resolve,reject) => {
  resolve("成功了");
  // reject("失败了");
})
  1. then
const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"
class MyPromise{
  //1.1、添加状态
  state = PENDING
  //1.2、添加原因
  result = undefined
  constructor(func) {
    //1.3、调整resolve、reject
    //1.4、状态不可逆
    //改状态：pending-》fulfilled
    //记录原因
    const resolve = (res) => {
      if(this.state === PENDING) {
        this.state = FULFILLED
        this.result = res
      }
    }
    //改状态：pending-》rejected
    //记录原因
    const reject = (res) => {
      if(this.state === PENDING) {
        this.state = REJECTED
        this.result = res
      }
    }
    func(resolve, reject)
  }
  then(onFulfilled, onRejected) {
    //2.1、参数判断（参考文档）
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : x => x
    onRejected = typeof onRejected === "function" ? onRejected : x => {throw err}
    //2.2、执行成功、失败的回调
    if(this.state === FULFILLED) {
      onFulfilled(this.result)
    } else if(this.state === REJECTED) {
      onRejected(this.result)
    }
    
  }
}

const p = new MyPromise((resolve,reject) => {
  resolve("成功了");
  // reject("失败了");
})
p.then(res => {
  console.log("成功回调：",res);
}, res => {
  console.log("失败回调：",res);
})
  1. then 的异步及多次调用
const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"
class MyPromise{
  state = PENDING
  result = undefined
  //1、定义实例私有属性（只有实例可以访问）
  #handlers = [] //里面放then的成功、失败方法[{onFulfilled,onRejected}...]
  constructor(func) {
    const resolve = (res) => {
      if(this.state === PENDING) {
        this.state = FULFILLED
        this.result = res
        //3、调用成功回调
        this.#handlers.forEach(( {onFulfilled} )=> {
          onFulfilled(this.result)
        })
      }
    }
    const reject = (res) => {
      if(this.state === PENDING) {
        this.state = REJECTED
        this.result = res
        //4、调用失败回调
        this.#handlers.forEach(( {onRejected} )=> {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : x => x
    onRejected = typeof onRejected === "function" ? onRejected : x => {throw err}
    if(this.state === FULFILLED) {
      onFulfilled(this.result)
    } else if(this.state === REJECTED) {
      onRejected(this.result)
    } else if (this.state === PENDING) {
      //2、保存回调函数
      //如果是异步，。then这里的状态就是Pending
      this.#handlers.push({ onFulfilled, onRejected })
    }
    
  }
}

const p = new MyPromise((resolve,reject) => {
  setTimeout(() => {
    resolve("成功了");
    // reject("失败了");
  },2000)
})
p.then(res => {
  console.log("成功回调111：",res);
}, res => {
  console.log("失败回调111：",res);
})
p.then(res => {
  console.log("成功回调222：",res);
}, res => {
  console.log("失败回调222：",res);
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/167210.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

暖阳脚本_ 将Agent技术的灵活性引入RPA，清华等发布自动化智能体ProAgent

暖阳脚本_ 将Agent技术的灵活性引入RPA，清华等发布自动化智能体ProAgent

RPA暖阳脚本 近日，来自清华大学的研究人员联合面壁智能、中国人民大学、MIT、CMU 等机构共同发布了新一代流程自动化范式 “智能体流程自动化” Agentic Process Automation（APA），结合大模型智能体帮助人类进行工作流构建&#x…
阅读更多...
Leetcode2937. 使三个字符串相等

Leetcode2937. 使三个字符串相等

Every day a Leetcode 题目来源：2937. 使三个字符串相等 解法1：枚举 设 len1、len2、len3 分别为字符串 s1、s2、s3 的长度。 min_len 是 3 个字符串长度的最小值。 枚举 len min_len 到 len 1，设 t1、t2、t3 分别是字符串 s1、s2、s…
阅读更多...
论文笔记：The Impact of AI on Developer Productivity:Evidence from GitHub Copilot

论文笔记：The Impact of AI on Developer Productivity:Evidence from GitHub Copilot

0 abstract 本文介绍了一项对GitHub Copilot（一种人工智能编程助手）的控制实验结果。研究人员招募了软件开发人员，要求他们尽可能快地用JavaScript实现一个HTTP服务器。实验组可以访问人工智能编程助手，比对照组完成任务的速度快…
阅读更多...
JSP 四大域对象

JSP 四大域对象

我们来说说JSP的四大域对象 首先 我们要了解他们是四种保存范围 第一种 是 Page范围 只作用于当前界面 只要页面跳转了 其他页面就拿不到了 第二种 request范围 在一次请求中有效 就是 我们服务端指向某个界面 并传递数据给他 那么 如果你是客户端跳转就不生效了 第三种 sessi…
阅读更多...
Synchronized 相关面试题 （精简版）

Synchronized 相关面试题 （精简版）

目录 问题一：Synchronized用过吗，其原理是什么？ 问题二 : 你刚才提到获取对象的锁，这个“锁”到底是什么?如何确定对象的锁 ? 问题三：什么是可重入性，为什么说 Synchronized 是可重入锁？ …
阅读更多...
[和ChatGPT学编程]Python Requests 简介

[和ChatGPT学编程]Python Requests 简介

requests 是一个流行的 Python 库，用于发送 HTTP 请求。它提供了简洁而友好的 API，使得发送 HTTP 请求变得简单而直观。requests 具有许多强大的功能，适用于各种 HTTP 请求场景，包括 GET、POST、PUT、DELETE 等。 目录 requests 库…
阅读更多...
系列五、线程间通信

系列五、线程间通信

一、synchronized实现 1.1、案例一（2个线程交替对变量执行1、-1操作，来10轮） 1.1.1、资源类ShareDataOne /*** Author : 一叶浮萍归大海* Date: 2023/11/20 10:44* Description: 资源类* 说明：2个线程使用if判断变量的值&#…
阅读更多...
EfficientPhys

EfficientPhys

研究背景 基于相机的生理测量是一种非接触式方法，用于通过从身体反射的光捕获心脏信号。最常见的此类信号是通过光电体积描记图 (PPG) 测量的血容量脉搏 (BVP)。由此，可以推导出心率、呼吸率和脉搏传导时间。神经网络模型是当前最先进的 rPPG 测量方式。…
阅读更多...
Midjourney绘画提示词Prompt参考学习教程

Midjourney绘画提示词Prompt参考学习教程

一、工具 SparkAi： SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美，可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软…
阅读更多...
nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm-sh/nvm Stars: 67.6k License: MIT Node Version Manager，是一个 POSIX 兼容的 bash 脚本，用于管理多个活动 node.js 版本。nvm 可以让你通过命令行快速安装和使用不同版本的 Node。它可以在任何符合 POSIX 标准的 shell（sh、dash、ksh…
阅读更多...
YOLOv8-seg改进：SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能

YOLOv8-seg改进：SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能

🚀🚀🚀本文改进：SEAM、MultiSEAM分割物体与物体相互遮挡性能 🚀🚀🚀SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能 🚀🚀🚀YOLOv8-seg创新专栏：http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1）手把手教你如何…
阅读更多...
JSP协同办公eclipse定制开发mysql数据库BS模式java编程OA系统

JSP协同办公eclipse定制开发mysql数据库BS模式java编程OA系统

一、源码特点 java 协同办公管理系统是一套完善的web设计系统 ，对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发，数据库为Mysql5.0，使…
阅读更多...
internet download manager2024中文绿色版(IDM下载器)

internet download manager2024中文绿色版(IDM下载器)

在现代互联网时代，文件下载已经成为我们日常生活中必不可少的一项技能。无论是下载软件、音乐、视频还是其他文件，一个高效的下载方法能够为我们节省时间和精力。本文将为您提供一份简明扼要的下载教程，让您轻松掌握文件下载的技巧。 intern…
阅读更多...
【汇编】数据在哪里？有多长、div指令实现除法、dup设置内存空间

【汇编】数据在哪里？有多长、div指令实现除法、dup设置内存空间

文章目录 前言一、汇编语言中数据位置的表达1.1 汇编中有哪几种数1.立即数（idata）：2.寄存器（Register）：3.内存（Memory）：4.段地址（Segment Address&#xff0c…
阅读更多...
NextJS开发：ssr服务器端渲染页面，添加加载进度提示

NextJS开发：ssr服务器端渲染页面，添加加载进度提示

nextjs中ssr服务器端渲染的页面加载速度慢的时候，需要显示一个如下图的加载进度提示，来优化用户体验。 nextjs框架中已经预留了加载动画的接口页面，我们只需要提那家加载动画tsx，处理页面逻辑就可以实现。 page.tsx 同级目录创建…
阅读更多...
ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程，讲解如何用新的 CSS 语法来解决旧的问题

ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程，讲解如何用新的 CSS 语法来解决旧的问题

今天给大家安利一套现代 CSS 的教程，以前写网页的问题，现在都可以用新的写法来解决了。 ModernCSS.dev 是一个现代 CSS 语法的教程，讲解新的 CSS 语法如何解决一些传统问题，一共有30多课。 这套教程的作者是 Stephanie Eckles&am…
阅读更多...
2023年中国中端连锁酒店分类、市场规模及主要企业市占率[图]

2023年中国中端连锁酒店分类、市场规模及主要企业市占率[图]

中端连锁酒店行业是指定位于中档酒店市场、具有全国统一的品牌形象识别系统、全国统一的运营体系、会员体系和营销体系的酒店。中端酒店通常提供舒适、标准化的房间设施和服务，价格较为合理，符合广大消费者的需求。其价格略高于经济型酒店，但…
阅读更多...
【canvas】了解canvas，并实现会议预定记录钟表盘、页面水印

【canvas】了解canvas，并实现会议预定记录钟表盘、页面水印

初识canvas Canvas 有什么用 Canvas 允许使用直线、曲线、矩形、圆形等基本图形绘制出复杂的图形 Canvas 可以加载图像，并进行各种处理，如裁剪、缩放、旋转等操作 Canvas 可以通过 JavaScript 控制，所以你可以利用帧动画原理，…
阅读更多...
Latex学习

Latex学习

二 实例 1. \Delta_{w}\frac{\partial l}{\partial w_{i1}}weight:\frac{\partial l}{\partial x_{i1}} 效果如下 其中对于希腊字母的大小写来说，可以参考： 【LaTeX 语法】字母表示 ( 大写、小写、异体 希腊字母 | 粗体字母 | 花体字母 )_latex字母_韩…
阅读更多...
大白话解释什么类加载机制

大白话解释什么类加载机制

大家好，我是伍六七。 今天我们来聊聊一个 Java 面试必考基础题目：类加载机制和双亲委派机制。 Java 类的加载机制是 Java 虚拟机（JVM）中类加载（Class Loading）和链接（Linking）的过…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站