面试题 三

news2024/11/13 15:57:35

一、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.coloradmin.cn/o/1229461.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

🚀🚀🚀本文改进：SEAM、MultiSEAM分割物体与物体相互遮挡性能 🚀🚀🚀SEAM、MultiSEAM分割物与物相互遮挡、分割小目标性能 🚀🚀🚀YOLOv8-seg创新专栏：http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1）手把手教你如何…
阅读更多...
leetcode：415. 字符串相加（模拟竖式计算）

leetcode：415. 字符串相加（模拟竖式计算）

一、题目 链接： 415. 字符串相加 - 力扣（LeetCode） 函数原型：char* addStrings(char* num1, char* num2) 二、思路： 本题本质是将两个字符型数字相加，字符型数字相加就一定需要进行字符与数字的相互转换 详…
阅读更多...
Mybatis-Plus 自定义SQL注入器，实现真正的批量插入！[MyBatis-Plus系列]

Mybatis-Plus 自定义SQL注入器，实现真正的批量插入！[MyBatis-Plus系列]

导读 Hi，大家好，我是悟纤。过着爱谁谁的生活，活出不设限的人生。 在使用MyBatis-Plus时，dao层都会去继承BaseMapper接口，这样就可以用BaseMapper接口所有的方法CRUD。 在Mybatis-Plus中调用updateById方法进行数据更新默认情况下是不能更新空值字段的。
阅读更多...
【开源】基于JAVA的超市自助付款系统

【开源】基于JAVA的超市自助付款系统

项目编号： S 008 ，文末获取源码。 \color{red}{项目编号：S008，文末获取源码。} 项目编号：S008，文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 商品类型模块2.2 商品模块2.3 超市账…
阅读更多...
【精选】JSP技术知识点大合集

【精选】JSP技术知识点大合集

JSP简介 JSP介绍 JSP(全称Java Server Pages)Java服务端页面技术，是JavaEE平台下的技术规范。它允许使用特定的标签在HTML网页中插入Java代码，实现动态页面处理，所以JSP就是HTML与Java代码的复合体。JSP技术可以快速的实现一个页面的开发&am…
阅读更多...
山西电力市场日前价格预测【2023-11-21】

山西电力市场日前价格预测【2023-11-21】

1.日前价格预测 预测说明： 如上图所示，预测明日（2023-11-21）山西电力市场全天平均日前电价为278.73元/MWh。其中，最高日前电价为367.26元/MWh，预计出现在18:00。最低日前电价为0.00元/MWh，预计…
阅读更多...
MR素数测试及 pycryptodome库下 已知MR伪素数以及强伪证 生成指定伪随机数生成器绕过素性检测

MR素数测试及 pycryptodome库下 已知MR伪素数以及强伪证 生成指定伪随机数生成器绕过素性检测

MR素数测试在密码学库中应用广泛，通常作为BSPW的一部分来进行素数测试，由于在其算法中，有随机数的使用（选择一个随机的base），若一个MR伪素数 n n n，已知其在某一个强伪证 a a a（随机…
阅读更多...
2023年中国吞咽神经和肌肉电刺激仪市场发展趋势分析：产品需求持续增长[图]

2023年中国吞咽神经和肌肉电刺激仪市场发展趋势分析：产品需求持续增长[图]

吞咽神经和肌肉电刺激仪是通过输出特定的低频脉冲电流对吞咽及构音功能相关的神经和肌肉进行电刺激，改善吞咽、构音肌群的收缩运动功能，缓解神经元麻痹，促进吞咽反射弧的重建与恢复，进而提高患者的吞咽及语言能力。 吞咽神经和肌…
阅读更多...
【软件工程师从0到1】- Java面向对象基础 (知识汇总)

【软件工程师从0到1】- Java面向对象基础 (知识汇总)

前言 介绍：大家好啊，我是hitzaki辰。 社区：（完全免费、欢迎加入）日常打卡、学习交流、资源共享的知识星球。 自媒体：我会在b站/抖音更新视频讲解 或 一些纯技术外的分享，账号同名：hi…
阅读更多...
数据结构与算法编程题3

数据结构与算法编程题3

长度为n的顺序表&#xff0c;删除线性表所有值为x的元素&#xff0c;使得时间复杂度为O(n)&#xff0c;空间复杂度为O(1) #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {E…
阅读更多...
【日常总结】java JSON 转 实体类 (含多层嵌套)

【日常总结】java JSON 转 实体类 (含多层嵌套)

一、场景 二、问题 三、解决方案 四、实战 1. 引入maven依赖 2. IEDA 安装lombok 插件 3. 安装 GsonFormPlu 插件 4. 使用 Stage 1&#xff1a;新建类&#xff0c;右键 选择 Generate Stage 2&#xff1a;选择 GsonFormatPlus Stage 3&#xff1a;将json复制其中&…
阅读更多...
2023年亚太杯数学建模亚太赛ABC题思路资料汇总贴

2023年亚太杯数学建模亚太赛ABC题思路资料汇总贴

下文包含&#xff1a;2023年亚太杯数学建模亚太赛A- C题思路解析、选题建议、代码可视化及如何准备数学建模竞赛&#xff08;23号发&#xff09; C君将会第一时间发布选题建议、所有题目的思路解析、相关代码、参考文献、参考论文等多项资料&#xff0c;帮助大家取得好成绩。2…
阅读更多...
如何搞定电子画册制作，分分钟在线制作与宣传！

如何搞定电子画册制作，分分钟在线制作与宣传！

一提到公司宣传&#xff0c;大多数人会想到的是制作视频或纸质的小册子。随着互联网技术的发展&#xff0c;如今可以用电子画册来做宣传&#xff0c;不仅可以跨空间地域传播&#xff0c;并且仅需图文排版设计好&#xff0c;通过在线电子画册制作工具转换就能简单实现宣传&#…
阅读更多...
论文阅读：“iOrthoPredictor: Model-guided Deep Prediction of Teeth Alignment“

论文阅读：“iOrthoPredictor: Model-guided Deep Prediction of Teeth Alignment“

文章目录 IntroductionMethodologyProblem FormulationConditional Geometry GenerationTSynNetAligned Teeth Silhouette Maps Generation ResultsReferences Github 项目地址&#xff1a;https://github.com/Lingchen-chen/iOrthopredictor Introduction 这篇文章提出了一种…
阅读更多...
基于单片机双路压力监测报警系统

基于单片机双路压力监测报警系统

**单片机设计介绍&#xff0c; 【毕设课设】基于单片机双路压力监测报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机双路压力监测报警系统是一个复杂的系统&#xff0c;它涉及到单片机、压力传感器、报警器等多…
阅读更多...
Midjourney绘画提示词Prompt参考学习教程

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

一、工具 SparkAi&#xff1a; SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软…
阅读更多...
Threejs_03 全屏+响应式画布实现

Threejs_03 全屏+响应式画布实现

咋控制全屏呢&#xff1f; 1.做一个用来点击的按钮 var btn document.createElement("button"); btn.innerHTML "点击全屏"; btn.style.position "absolute"; btn.style.top "10px"; btn.style.left "10px"; btn.sty…
阅读更多...
【注册Huggingface】获取token

【注册Huggingface】获取token

Hugging Face是一家美国公司&#xff0c;专门开发用于构建机器学习应用的工具。该公司的代表产品是其为自然语言处理应用构建的transformers库&#xff0c;以及允许用户共享机器学习模型和数据集的平台。 Huggingface 是一个开源的cv、nlp框架&#xff0c;提供了超过100,000个…
阅读更多...
代码随想录算法训练营第五十九天丨 单调栈02

代码随想录算法训练营第五十九天丨 单调栈02

503.下一个更大元素II 思路 做本题之前建议先做739. 每日温度 (opens new window)和 496.下一个更大元素 I (opens new window)。 这道题和739. 每日温度 (opens new window)也几乎如出一辙。 不过&#xff0c;本题要循环数组了。 关于单调栈的讲解我在题解739. 每日温度 …
阅读更多...
NextJS开发：ssr服务器端渲染页面，添加加载进度提示

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

nextjs中ssr服务器端渲染的页面加载速度慢的时候&#xff0c;需要显示一个如下图的加载进度提示&#xff0c;来优化用户体验。 nextjs框架中已经预留了加载动画的接口页面&#xff0c;我们只需要提那家加载动画tsx&#xff0c;处理页面逻辑就可以实现。 page.tsx 同级目录创建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023