JavaScript手写代码

1.手写promise

// exector 执行器
function Promise1(exector) {
    var that = this;
    this.status = "pedding";      //设置状态
    this.resolveParams = "";    //resolve返回的值
    this.rejectParams = "";      //存储reject 返回的值
    this.resolveFn = [];          //存储then中成功的回调函数
    this.rejectFn = [];         //存储then中失败的回调函数
    function resolve(value) {
        //只有在pedding状态才执行  防止多次点击
        if (that.status == "pedding") {
            that.status = "resolved";
            that.resolveParams = value;
            that.resolveFn.forEach(fn => fn(value))
        }
    }

    function reject(value) {
        //只有在pedding状态才执行  防止多次点击
        if (that.status == "pedding") {
            that.status = "rejected";
            that.rejectParams = value;
            that.rejectFn.forEach(fn => fn(value))
        }
    }

    //执行器捕获异常
    try {
        exector(resolve, reject);
    } catch (e) {
        reject(e)
    }
}

Promise1.prototype.then = function (resolve1, reject1) {
    var that = this;

    //同步执行成功回调函数
    if (this.status == "resolved") {
        resolve1(that.resolveParams)
    }
    //同步执行失败回调函数
    if (this.status == "rejected") {
        reject1(that.rejectParams)
    }

    //异步情况时   保存回调函数
    if (this.status == "pedding") {
        this.resolveFn.push((val) => {
            resolve1(val)
        })
        this.rejectFn.push((val) => {
            reject1(val)
        })
    }
}


//测试
function test() {
    return new Promise1((resolve, reject) => {
        setTimeout(() => {
            let val = Math.random();
            if (val > 0.5) {
                resolve('成功')
            } else {
                reject('失败')
            }
        }, 100)
    })
}

test().then(res => {
    console.log(res)
}, (err) => {
    console.log(err)
})

2.数组和对象深拷贝

1.JSON.parse(JSON.stringify())
2.手写简易版

function deepCopy(obj) {
    if (typeof obj !== "object"||!obj) {
        return obj;
    }
    const result= Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        result[key] = typeof obj[key] !== "object" ? obj[key] : deepCopy(obj[key]);
    }
    return result;
}

3.完整版

/**
 * deep clone
 * @param  {[type]} parent object 需要进行克隆的对象
 * @return {[type]}        深克隆后的对象
 */
const clone = parent => {
  // 判断类型
  const isType = (obj, type) => {
    if (typeof obj !== "object") return false;
    const typeString = Object.prototype.toString.call(obj);
    let flag;
    switch (type) {
      case "Array":
        flag = typeString === "[object Array]";
        break;
      case "Date":
        flag = typeString === "[object Date]";
        break;
      case "RegExp":
        flag = typeString === "[object RegExp]";
        break;
      default:
        flag = false;
    }
    return flag;
  };

  // 处理正则
  const getRegExp = re => {
    var flags = "";
    if (re.global) flags += "g";
    if (re.ignoreCase) flags += "i";
    if (re.multiline) flags += "m";
    return flags;
  };
  // 维护两个储存循环引用的数组
  const parents = [];
  const children = [];

  const _clone = parent => {
    if (parent === null) return null;
    if (typeof parent !== "object") return parent;

    let child, proto;

    if (isType(parent, "Array")) {
      // 对数组做特殊处理
      child = [];
    } else if (isType(parent, "RegExp")) {
      // 对正则对象做特殊处理
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, "Date")) {
      // 对Date对象做特殊处理
      child = new Date(parent.getTime());
    } else {
      // 处理对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用Object.create切断原型链
      child = Object.create(proto);
    }

    // 处理循环引用
    const index = parents.indexOf(parent);

    if (index != -1) {
      // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
      return children[index];
    }
    parents.push(parent);
    children.push(child);

    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }

    return child;
  };
  return _clone(parent);
};

3.继承的实现 原型链继承

子类实例化出来的对象拥有父类的属性和方法
子类实例化出来的对象属于子类，也属于父类
原型链继承金三句：

  • 让子类实例化出来的对象拥有父类的属性 Person.apply(this,arguments)
  • 让子类拥有父类的所有方法Student.prototype=Object.create(Person.prototype)；
  • 找回丢失的构造器Student.prototype.constructor=Student;
//定义一个父类
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.run=function(){
    console.log(this.name+'正在散步')
}
//定义一个子类
function Student(name,age,score){
   this.score=score;
   //让子类实例化出来的对象拥有父类的属性  apply 和call都可以
   Person.apply(this,arguments) 
}
//让子类拥有父类的所有方法
Student.prototype=Object.create(Person.prototype)；
//找回丢失的构造器
Student.prototype.constructor=Student;
Student.prototype.read=function(){
    console.log(this.name+'正在看书')
}

let student1 = new Student('张三',20,100);
console.dir(student1 );
console.log(student1 instanceof Student); //true
console.log(student1 instanceof Person);  //true

Object.create 原理

function create(proto) {
    function F(){}
    F.prototype = proto;
    return new F();
}

4.new 操作符实现

  • 它创建了一个全新的对象。
  • 它会被执行[[Prototype]]（也就是proto）链接。
  • 它使this指向新创建的对象。。
  • 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。
    如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用。
function New(Fn) {
    let obj = {}
    let arg = Array.prototype.slice.call(arguments, 1)
    obj.__proto__ = Fn.prototype
    obj.__proto__.constructor = Fn
    Fn.apply(obj, arg)
    return obj
}

5.实现instanceOf

function instance_of(left, R) {
  //L 表示左表达式，R 表示右表达式
  var O = R.prototype; // 取 R 的显示原型
  left= left.__proto__; // 取left 的隐式原型
  while (true) {
    if (left === null) return false;
    if (O === left){
      // 这里重点：当 O 严格等于left 时，返回 true
      return true;
    }
   left= left.__proto__;
  }
}

6.解析 URL Params 为对象

function parseParam(url) {
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  let paramsObj = {};
  // 将 params 存到对象中
  paramsArr.forEach(param => {
    if (/=/.test(param)) { // 处理有 value 的参数
      let [key, val] = param.split('='); // 分割 key 和 value
      val = decodeURIComponent(val); // 解码
      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

      if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
        paramsObj[key] = [].concat(paramsObj[key], val);
      } else { // 如果对象没有这个 key，创建 key 并设置值
        paramsObj[key] = val;
      }
    } else { // 处理没有 value 的参数
      paramsObj[param] = true;
    }
  })

  return paramsObj;
}

7.实现一个call

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