JS模拟实现题目(new debounce throwee 等)
模拟new实现
function newObject() {
let obj = new Object();
let Con = [].shift.apply(arguments)
obj.__proto__ = Con.prototype;
let res = Con.apply(obj,arguments)
return typeof res == "object" ? res : obj;
}
模拟instanceOf
function instanceOf(left,right) {
let proto = left.__proto__;
let prototype = right.prototype
while(true) {
if(proto == null) return false
if(proto == prototype) return true
proto = proto.__proto__;
}
}
防抖 debounce
function debounce(fn,wait=50,immediate) {
let timer;
return function() {
if(immediate) {
fn.apply(this,arguments)
}
if(timer) clearTimeout(timer)
timer = setTimeout(()=> {
fn.apply(this,arguments)
},wait)
}
}
节流 throttle
function throttle(fn,wait=50) {
let timer;
return function() {
if(!timer) {
timer = setTimeout(()=> {
fn.apply(this,arguments)
timer = null
},wait)
}
}
}
jsonp
function jsonp(url,callback,success) {
let script = document.createElement("script")
script.src = url;
script.async = true;
script.type = "text/javascript"
window[callback] = function(data) {
success && success(data)
}
document.body.append(script)
}
继承
function a() {
this.a = "a"
}
a.prototype.test = function() {
console.log(this.a)
}
function b() {
a.call(this);
this.b = "b"
}
function tmp() {}
tmp.prototype = a.prototype;
b.prototype = new tmp();
b.prototype.construcotr = b;
模拟call
Function.prototype.mycall = function(content = window) {
content.fn = this;
let args = [...arguments].slice(1);
let result = content.fn(...args);
delect content.fn;
return result;
}
模拟apply
Function.prototype.myapply = function(content = window) {
content.fn = this;
let result;
if(argument[1]) {
result = content.fn(...argument[1]);
} else {
result = content.fn();
}
delect content.fn;
return result;
}
模拟bind
Function.prototype.mybind = function(content) {
if(typeof this != "function") {
throw Error("not a function")
}
let fn = this;
let args = [...arguments].slice(1);
let resFn = function() {
return fn.apply(this.instance == resFn ? this : content,args.concat(...arguments) )
}
function tmp() {}
tmp.prototype = this.prototype;
resFn.prototype = new tmp();
return resFn;
}
JS模拟实现题目(new debounce throwee 等)的更多相关文章
- js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
- Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
- JS 模拟手机页面文件的下拉刷新
js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...
- 由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...
- node.js模拟qq漂流瓶
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) node.js模拟简易漂流瓶,页面有扔瓶子和捡瓶子的功能,一个瓶子只能被捡到一次,阅读完就置状态位, ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- js模拟触发事件
html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件] 可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...
- js模拟Map对象,实现key---value
js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...
- 单篇文章JS模拟分页
废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
随机推荐
- Spring学习笔记(13)——aop原理及拦截器
原理 AOP(Aspect Oriented Programming),也就是面向方面编程的技术.AOP基于IoC基础,是对OOP的有益补充. AOP将应用系统分为两部分,核心业务逻辑(Core bu ...
- linux+Apache开启伪静态配置
linux+Apache伪静态配置 一.环境准备:CentOS Linux release 7.4.1708 (Core)1.配置源[root@localhost ~]#yum install -y ...
- ORM:Chloe
ORM的一种:Chloe注意实体类模板特色:多表连接 利用chloe实现对各表的增删查改的管理,判断现有物料是否能够支持生产规模. 一开始报错: IQuery<ProductionPlans&g ...
- JavaSE---Runtime类
1.概述 1.1 Runtime类 代表 java程序运行时环境: 1.2 Runtime类 提供的类方法: getRuntime():获取Runtime实例: gc():通知垃圾回收器回收资源: ...
- CPU的历史
https://zhuanlan.zhihu.com/p/64537796 很多人都对电脑硬件有一点的了解,本人也算略懂一二,所以今天来为大家说说电脑的主要硬件之一––CPU(中央处理器). 那么我们 ...
- eureka学习(一)
eureka是一个注册中心,与zookeeper不同的是,eureka是restful格式的调用,zk是rpc,还有就是zk保证一致和容错,eureka则是可用和容错. 使用时首先要加入依赖 < ...
- Python基础教程(001)--前言
前言 人生苦短,我用Python. Python的作者,Guido von Rossum,确实是荷兰人.1982年,Guido从阿姆斯特丹大学(University of Amsterdam)获得了数 ...
- webpack配置教程
1.npm脚本运行webpack与命令行输入webpack的区别 : https://segmentfault.com/a/1190000011052193 npm 模块的 安装 和 卸载 : ...
- 前端每日实战:57# 视频演示如何用纯 CSS 创作一双黑暗中的眼睛
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzYVzO 可交互视频 此视频是可 ...
- 6个实例详解如何把if-else代码重构成高质量代码
本文提纲: 为什么我们写的代码都是if-else?这样的代码有什么缺点?是否有优化的方法?如何重构?异常逻辑处理型重构方法状态处理型重构方法为什么我们写的代码都是if-else?程序员想必都经历过这样 ...