前端常见手写代码

1.call()函数的实现步骤

  • 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  • 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  • 处理传入的参数，截取第一个参数后的所有参数。
  • 将函数作为上下文对象的一个属性。
  • 使用上下文对象来调用这个方法，并保存返回结果。
  • 删除刚才新增的属性。
  • 返回结果。

代码实现：

let A = {
      name: 'zs',
      getName: function(msg){
        return msg + this.name
      }
    }
    let B = {
      name: 'lis'
    }
    Function.prototype.myCall = function(context) {
      //判断调用对象是否为函数
      if(typeof this !== 'function') {
        console.error('type err');
        return;
      }
      //判断传入上下文对象是否存在，如果不存在，则设置为window
      context = context || window;
      //处理传入参数，截取第一个参数后的所有参数
      let args = [...arguments].slice(1);
      //将函数作为上下文对象的一个属性
      context.fn = this;
      //使用上下文对象调用这个方法，并保存返回结果。
      const res = context.fn(...args);
      //删除刚刚新增的属性
      delete context.fn;
      //返回结果
      return res
    }
    console.log('封装',A.getName.myCall(B,'信息'));//封装 信息lis
    console.log('原生',A.getName.call(B,'hello')); //原生 hello lis

2. apply()函数的实现步骤

  • 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  • 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
  • 将函数作为上下文对象的一个属性。
  • 判断参数值是否传入
  • 使用上下文对象来调用这个方法，并保存返回结果。
  • 删除刚才新增的属性
  • 返回结果

代码实现：

let A = {
      name: 'zs',
      getName: function(msg){
        return msg + this.name
      }
    }
    let B = {
      name: 'lis'
    }
    Function.prototype.myApply = function(context) {
      //判断调用对象是否为函数
      if(typeof this !== 'function') {
        console.error('type err');
        return;
      }
      //判断传入上下文对象是否存在，如果不存在，则设置为window
      context = context || window;
      
      //将函数作为上下文对象的一个属性
      context.fn = this;
      let res = null;
      //判断参数是否传入
      console.log(arguments)
      if(arguments[1]) {
        res = context.fn(...arguments[1]);
      } else {
        res = context.fn();
      }    
      //删除刚刚新增的属性
      delete context.fn;
      //返回结果
      return res
    }
    console.log('封装',A.getName.myApply(B,['信息']));//封装 信息lis
    console.log('原生',A.getName.apply(B,['原生'])); //原生 原生 lis

3.bind()函数的实现步骤

  • 接收的参数：第一个参数为this的指向，后面的参数就是函数接收的参数了。this是必需提供的参数，其他的参数都是非必需的；
  • 返回值：返回值应该是一个函数；

代码实现

let A = {
      name: 'zs',
      getName: function(msg){
        return msg + this.name
      }
    }
    let B = {
      name: 'lis'
    }
    //封装bind函数
    Function.prototype.myBind = function(context,...args) {
      return ()=> {
        return this.apply(context,...args)
      };
    }
    let res = A.getName.myBind(B,['封装']);
    console.log(res());//封装lis
    let result = A.getName.bind(B,['原生']);
    console.log(result());//原生lis

4.防抖节流实现和应用场景

1.防抖实现

触发高频事件后，n秒内函数之后执行一次，如果n秒内再次触发，会重新计算事件。

  • 应用场景(一般用于点击发送请求)

应用场景：一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次),input输入....

  • 代码实现
function debounce(fn, wait) {
      let timer=null;
      let that = this;
      let args = arguments;
      return function () {
      //每次点击清除当前定时器
        clearTimeout(timer);
        timer = setTimeout(() => {
          timer = null;
          //将传入函数this指向当前函数。
          fn.apply(that,args);
        }, wait)
      }
    }
    
    <input type="text" placeholder="请输入">
    let input = document.querySelector('input');
    input.addEventListener('input',debounce(()=>{
      console.log('input');
    },1000))
   // 输入完成之后一秒后才会执行回调

2.节流实现

触发高频事件后，n秒内函数函数只会执行一次。

  • 1.应用场景

应用场景： search搜索联想，用户在不断输入值时

  • 代码实现
function throttle(fn, wait) {
      let timer=null;
      let that = this;
      let args = arguments;
      return function () {
      //wait秒之内用户点击只会执行一次定时器
        if (timer) return
        timer = setTimeout(() => {
          timer = null;
          clearTimeout(timer);
          fn.apply(that,args);
        }, wait)
      }
    }
    
    <button>点击</button>
    let button = document.querySelector('button')
     button.addEventListener('click',throttle(()=>{
      console.log('button');
    },1000))
    //一秒之内只会触发一次回调函数

5.浅拷贝和深拷贝实的现步骤

5.1浅拷贝的实现

只拷贝对象或数组第一层

更深层次对象级别的只拷贝引用（只将地址拷贝给了新对象）

注意：第一层不是对象时，浅拷贝也是深拷贝，修改值时不会影响新对象的值变化

代码实现:

const target = {
      a: '1',
      b: {c:'1'}
    }

    //只拷贝对象或数组第一层
    function shallClone(target) {
      if (typeof target === 'object' && target !== null) {
        let cloneTarget = Array.isArray(target)?[]:{};
        for(let p in target) {
          cloneTarget[p] = target[p];
        }
        return cloneTarget;
      } else {
        return target
      }
    }
    let cloneTarget = shallClone(target);

5.2深拷贝实现(举两个例子)

深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。

基本数据类型(undefined,null,number,String,boolean,bigInt)：存放在栈中，

引用数据类型(Object,Array,Function): 存放在堆中。

  • 1.第一种实现方法

    JSON.parse(JSON.stringify（））

function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj))
}

var obj = {
    age: 1,
    name: undefined,
    sex: null,
    tel: /^1[34578]\d{9}$/,
    say: () => {
        console.log('hahha')
    }
}
console.log(deepCopy(obj)); // { age: 1, sex: null, tel: {} }

注意：这种拷贝方法不可以拷贝一些特殊的属性（例如正则表达式，undefine，function）

  • 第二种实现方法 用递归去复制所有层级属性
function deepCopyTwo(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj == 'object') {
        for (const key in obj) {
            //判断obj子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === "object") {
                objClone[key] = deepCopyTwo(obj[key]);
            } else {
                //如果不是，简单复制
                objClone[key] = obj[key];
            }
        }
    }
    return objClone;
}
var obj = {
    age: 1,
    name: undefined,
    sex: null,
    tel: /^1[34578]\d{9}$/,
    say: () => {
        console.log('hahha')
    }
}
console.log(deepCopy(obj));  // { age: 1, sex: null, tel: {} }

6.new 操作实现的步骤

new 操作过程具体做了什么

  • 创建一个新的对象obj
  • 将对象与构建函数通过原型链连接起来
  • 将构建函数中的this绑定到新建的对象obj上
  • 根据构建函数返回类型作判断，如果是原始值则被忽略，如果是返回对象，需要正常处理。
function Person (name,age){
      this.name= name;
      this.age = age
    }

    function myNew(Fn,...args) {
      let child = Object.create(Fn.prototype);
      //相当于
      // child.__proto__ == Fn.prototype

      //将传入对象的this指向对象的原型链上
      let result = Fn.apply(child,args);
      return (typeof result === 'object' || typeof result === 'function') ? result : child;
    }
    let child = myNew(Person,'zs','22');
    console.log(child.name,child.age); //zs,22

7.instanceof 的实现步骤

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

        //封装instanceof
    //L: 实例对象 R: Function 原型链
    function instance_of(L,R) {
      R = R.prototype;
      L = L.__proto__;
      while(true) {
        if(L === null) return false;
        if(L === R) return true;
        L = L.__proto__;
      }
    }

8.Object.create() 底层实现

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

function myCreate(father){
    const obj = {};
    obj.__proto__ = father;
    return obj;
}
//使用
let Person = {}
let child = myCreate(Person.prototype);
let child = Object.create(Person.prototype);
//相当于
child.__proto = Person.prototype;

9.原生js 封装ajax 实现的步骤

  • 原生Ajax五个基本步骤

1、创建ajax对象
var xhr = new XMLHttpRequest();

2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）

3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）

4、发送请求，xhr.send(数据)

5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的

function ajax(url) {
      let res =null;
      //1.创建异步请求对象
      let xhr = new XMLHttpRequest();
      // 2.配置 ajax 请求地址
      xhr.open('get',url,true);
      // 3.设置响应头
      xhr.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded"
      );
      // 4.绑定监听事件
      xhr.onreadystatechange=()=>{
        // 当异步请求状态为4时，并且返回的状态码为200，接收响应成功。
        if(xhr.readyState =='4' && xhr.status == '200') {
          res = JSON.parse(xhr.responseText)
        }
        res.xhr.responseText;
      }
      // 5.发送请求
      xhr.send(null);
    }

10.使用promise封装ajax请求

function ajax(url) {
      return new Promise((resolve, reject) => {
        //1.创建异步请求对象
        let xhr = new XMLHttpRequest();
        // 2.配置 ajax 请求地址
        xhr.open('get', url, true);
        // 3.设置响应头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        // 4.绑定监听事件
        //每当readyState改变时，都会调用这个函数。
        xhr.onreadystatechange = () => {
          // 当异步请求状态为4时，请求已完成，并且准备就绪
          if (xhr.readyState == '4') {
            //如果200，代表请求成功
            if (xhr.status == '200')
              resolve(xhr.responseText)
          }else if(xhr.status == '404') {
            reject(new Error('404 NOT FOUND'))
          }
          res.xhr.responseText;
        }
        // 5.发送请求
        xhr.send(null);
      })
    }

    //调用
    ajax('/api/user')
    .then(res=>{ })
    .catch(err=>console.log(err))
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,265评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,078评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,852评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,408评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,445评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,772评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,921评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,688评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,130评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,276评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,882评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2赞 348

推荐阅读更多精彩内容