前端原生方法的实现,这里写一下常见的一些实现:

1.bind

Function.prototype.bind2 = function (context) {
var self = this;
returnfunction () {
self.apply(context);
} }

2.promise

class Promise {
result: any;
callbacks = [];
failbacks = [];
constructor(fn) {
fn(this.resolve.bind(this), this.reject.bind(this));
}
resolve(res) {
if (this.callbacks.length > 0) this.callbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
}
reject(res) {
this.callbacks = [];
if (this.failbacks.length > 0) this.failbacks.shift()(res, this.resolve.bind(this), this.reject.bind(this));
}
catch(fn) {
this.failbacks.push(fn);
}
then(fn) {
this.callbacks.push(fn);
return this;
} }

3.new的实现

function create() {
// 创建一个空的对象
let obj = new Object()
// 获得构造函数
let Con = [].shift.call(arguments)
// 链接到原型
obj.__proto__ = Con.prototype
// 绑定 this,执行构造函数
let result = Con.apply(obj, arguments)
// 确保 new 出来的是个对象
return typeof result === 'object' ? result : obj
}

4.函数防抖

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
// 缓存一个定时器id
let timer = 0
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器,延迟执行用户传入的方法
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}

5.函数节流

    functionthrottle(method,delay){
var timer=null;
returnfunction(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}

6.深拷贝

function deepClone(obj) {
let result = typeof obj.splice === "function" ? [] : {};
if (obj && typeof obj === 'object') {
for (let key in obj) {
if (obj[key] && typeof obj[key] === 'object') {
result[key] = deepClone(obj[key]);//如果对象的属性值为object的时候,递归调用deepClone,即在吧某个值对象复制一份到新的对象的对应值中。
} else {
result[key] = obj[key];//如果对象的属性值不为object的时候,直接复制参数对象的每一个键值到新的对象对应的键值对中。
} }
return result;
}
return obj;
}

7.extends实现

//子类  extends  父类
Function.prototype.extends = function(func, options){
for(var key in func.prototype){
this.prototype[key] = func.prototype[key];
}
for(var name in options){
this.prototype[name] = options[name];
}
}

总结:以上是常见的方法实现,只是简单的实现

前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)的更多相关文章

  1. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

  2. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--实现

    先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...

  3. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  4. [转]原生JS-查找相邻的元素-siblings方法的实现

    在针对element的操作里,查找附近的元素是一个不可少的过程,比如在实现tab时,其中的一个div增加了“on”class,其他的去除“on”class.如果用jquery的朋友就肯定不会陌生sib ...

  5. 关于面试题 Array.indexof() 方法的实现及思考

    这是我在面试大公司时碰到的一个笔试题,当时自己云里雾里的胡写了一番,回头也曾思考过,最终没实现也就不了了之了. 昨天看到有网友说面试中也碰到过这个问题,我就重新思考了这个问题的实现方法. 对于想进大公 ...

  6. JS中的call()和apply()方法和bind()

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. JavaScript中子类调用父类方法的实现

    一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...

  8. 详解JS中 call 方法的实现

    摘要:本文将全面的,详细解析call方法的实现原理 本文分享自华为云社区<关于 JavaScript 中 call 方法的实现,附带详细解析!>,作者:CoderBin. 本文将全面的,详 ...

  9. 2016 - 2 - 19 ARC内存管理知识总结(一,arc基本概念及alloc等方法的实现)

    一. ARC的基本概念 1. 在objc中采用automatic reference counting 机制, 让编译器来进行内存管理.在降低程序崩溃,内存管理泄漏等风险的同时,很大程度减少了程序员的 ...

随机推荐

  1. Android开发 ListView(垂直滚动列表项视图)的简单使用

    效果图: 使用方法: 1.在布局文件中加入ListView控件: <?xml version="1.0" encoding="utf-8"?> &l ...

  2. 深入浏览器工作原理和JS引擎(V8引擎为例)

    浏览器工作原理和JS引擎 1.浏览器工作原理 在浏览器中输入查找内容,浏览器是怎样将页面加载出来的?以及JavaScript代码在浏览器中是如何被执行的? 大概流程可观察以下图: 首先,用户在浏览器搜 ...

  3. 计算机系统3-> 现代计算机基石 | 图灵机理论

    在理解CPU之前,我们有必要先了解一下现代计算机理论的基石--图灵机,这个抽象模型决定了现代计算机可以被实现.这个模型的工作原理也投射到了CPU的工作实现上.图灵机的知识可深可浅,换句话说,上手容易, ...

  4. linux 之 误删openssl文件夹重装openssl

    背景 使用 scp.ssh 都报错 error while loading shared libraries: libcrypto.so.1.0.0: cannot open shared objec ...

  5. next中layout

    layout是页面模板,主要是为了做到无论在任何页面都会显示的内容,例如头部header,或者nav导航,页脚等固定页面.nuxt配置以及layout具体参考(https://cloud.tencen ...

  6. 聊聊docker那些端口问题

    今天来系统聊一聊docker的端口,常见的有容器内程序端口.容器端口.主机端口.Dockerfile中EXPOSE端口.docker-compose和docker run中的port等. 貌似很多端口 ...

  7. Git 的配置 config

    Git 的配置 config Git 的配置 config config 文件简述 config 文件位置 信息查询 修改 config 文件 编辑配置文件 增加指定配置项 删除指定配置项 自助餐   ...

  8. 历时5月,Kubernetes1.19正式发布 !Ingress迎来GA,存储容量跟踪新特性

    我们迎来了Kubernetes1.19,这是2020年发布的第二个版本,也是迄今为止最长的发布周期,总共持续了20周.它包括33个增强功能:12个增强功能达到稳定版,18个增强处在beta版,还有13 ...

  9. 机器学习|线性回归三大评价指标实现『MAE, MSE, MAPE』(Python语言描述)

    原文地址 ?传送门 对于回归预测结果,通常会有平均绝对误差.平均绝对百分比误差.均方误差等多个指标进行评价.这里,我们先介绍最常用的3个: 平均绝对误差(MAE) 就是绝对误差的平均值,它的计算公式如 ...

  10. 树莓派和荔枝派,局域网socket 通信

    在虚拟机上面实现了socket 之间的通信之后,突发奇想,想要实现树莓派和 荔枝派zero之间的通信. 1.直接将虚拟机下面的程序复制过来,重新编译并且运行.发现是没有办法进行通信的.客户端一直报错: ...