JavaScript中各种常用高级函数的实现
1.call/apply
Function.prototype.myCall = function (context, ...args) {
if (typeof this !== 'function') return;
var fun = this;
context._fn = fun; // TODO：确保_fn 键不存在
var res = context._fn(args);
return res;
}
// test
function say (...args) {
return args + this.name
}
var obj = { name: 'rencoo' }
say.myCall(obj, 'hello, ') // "hello, rencoo"
2.bind
- 绑定环境
- 如果以new调用的话,
// var fn = func.bind(obj, ...args);
// fn(...args);
// new fn(...args); // 对 this 来说, new 的优先级高于 bind; 会忽视传入的 context
Function.prototype.myBind = function (context, ...args) {
if (typeof this !== 'function') return;
var fun = this;
return function (...innerArgs) {
args = args.concat(innerArgs);
var res = fun.apply(context, args);
return res;
}
}
考虑到 new 调用，在返回函数里做一层判断，如果函数是使用使用 new 进行调用的，那么绑定的环境就会失效
var obj = { age: 25 };
function Person(name) {
this.name = name;
console.log(this); // (*)
}
Person.prototype.sayHi = function () {
console.log('hi');
}
var fn = Person.bind(obj, 'Bob');
// 调用后, (*)的打印内容
// 普通调用
fn();
console: { age: 25, name: "Bob" }
// 通过new调用
var p = new fn();
console.log(p); // Person { name: 'Bob' }
console.log(p.sayHi); // f () { console.log('hi') }
改进我们的 myBind
Function.prototype.myBind = function (context, ...args) {
var fn = this;
if (typeof fn !== 'function') return;
var boundFn;
var binder = function (...innerArgs) {
args = args.concat(innerArgs);
// console.log(this instanceof boundFn); // 使用 new 调用时, this 即为构造函数的实例, 判断结果为 true (优先级高于 bind 传入的 context)
if(this instanceof boundFn) { // new 调用; 不使用bind传入的 context
var res = fn.apply(this, args);
if (typeof res === 'object') {
return res;
}
return this;
} else { // 普通调用
return fn.apply(context, args);
}
}
boundFn = Function('binder', 'return function (){ return binder.apply(this,arguments); }')(binder);
if (fn.prototype) {
var Empty = function Empty() {};
Empty.prototype = fn.prototype;
boundFn.prototype = new Empty();
Empty.prototype = null;
}
return boundFn;
}
// 测试
var obj = { age: 25 };
function Person(name) {
this.name = name;
console.log(this); // (*)
}
var fn = Person.myBind(obj, 'Bob');
// 调用后, (*)的打印内容
// 普通调用
fn();
// console: { age: 25, name: "Bob" }
// 通过new调用
new fn();
// console: Person { name: 'Bob' }
常用的装饰器函数 once/throttle/debounce
3.once
Ensure a function is called only once，函数调用一次即失效
function once (fn) {
var flag = false;
return function (...args) {
!flag && fn.apply(this, args);
flag = true;
}
}
// more elegant way to write a once function
function once (fn) {
// closure here; var fn = fn;
return function (...args) {
var res = fn && fn.apply(this, args);
fn = null;
return res;
}
}
4.throttle
节流：连续的高频操作，只有最后一次操作后的一段时间后才调用传入的函数(最终的状态最重要)，后一次操作会覆盖前一次操作
应用：实时搜索里的搜索函数、鼠标移动函数中的更新函数、窗口resize里的更新函数
(原因是这些传入的函数可能都是一些耗时耗性能的操作，无法也没必要在每次微小动作上执行)
function throttle (fn, delay) {
var timer = null;
return function (...args) {
// 如果上一次操作的定时器尚未执行，那么取消它并将其替换为一个新的定时器
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
}
}
5.debounce
防抖：第一次生效，之后一定时间内无论怎么触发都无效
function debounce (fn, wait) {
var flag = true, timer = null;
return function (...args) {
if (flag) {
flag = false;
timer = setTimeout(function () {
flag = true;
clearTimeout(timer);
}, wait);
return fn.apply(this, args);
}
}
}
// 另一种写法
function debounce (fn, wait) {
var timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
timer = null；
}, wait);
return fn.apply(this, args);
}
}
}
6.throttle_optimize
升级版的 throttle_optimize 结合了 throttle 与 debounce 的特点
与 throttle 的区别：throttle_optimize 对于用户的第一次操作总是调用传入的函数
与 debounce 的区别：如果被忽略的调用是冷却期间的最后一次，那么它会在延迟结束时执行传入的函数
function throttle_optimize (fn, delay) {
var flag = true, timer = null;
return function (...args) {
if (flag) {
flag = false;
fn.apply(this, args);
args = null;
}
clearTimeout(timer);
timer = setTimeout(() => {
flag = true;
if (args) {
fn.apply(this, args);
}
}, delay);
}
}
7.throttle_optimize
用于动画渲染的 throttle_optimize
对于第一次操作，总是 update；之后的 delay 时间内的最后一次操作总是在 delay 时刻渲染一次；
也就是说装饰器函数 throttle_optimize 会经常调用，但是传入的更新函数，最多每 delay 时间调用一次(也可能不调用，没有任何操作就不会调用)
比如，使用鼠标移动和屏幕坐标原点绘制矩形，鼠标持续移动过程中，每隔delay时间渲染一次矩形，而不是每个移动都绘制，或者说只有最后一次移动结束的一段时间后才绘制(throttle的原理)
function throttle_optimize(func, ms) {
let isThrottled = false,
savedArgs,
savedThis;
function wrapper() {
if (isThrottled) {
savedArgs = arguments;
savedThis = this;
return;
}
func.apply(this, arguments);
isThrottled = true;
setTimeout(function () {
isThrottled = false;
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
}, ms);
}
return wrapper;
}
8.new
function myNew (Fn, ...args) {
// 1.生成一个空对象作为this
// 2.将对象链接到原型上
let obj = Object.create(Fn.prototype)
// 3.执行构造函数, 并将obj作为context传入(为实例对象添加属性)
let res = Fn.apply(obj, args) // 构造函数内的 this 动态改变为 obj
// 4.return this或者构造函数的执行结果(引用类型)
return typeof res === 'object' ? res : obj
// return result instanceof Object ? res : obj
}
// test
function Person (name, age) {
this.name = name;
this.age = age;
}
var a = myNew(Person, 'rencoo', 25)
console.log(a) // Person {name: "rencoo", age: 25}
var b = new Person('ge can', 26)
console.log(b) // Person {name: "gecan", age: 26}
Person.prototype.sayHi = function () {
console.log(this.name)
}
a.sayHi() // rencoo
b.sayHi() // gecan
9.promise
class Promise {
constructor (executor) {
// 设置属性 status value resolveCbs rejectCbs
}
then (onResolved, onRejected) {
}
catch (cb) {
return this.then(null, cb)
}
}
promise链式，实现必须上一个异步完成后再去跑下一个任务
// 1.
const template = Promise.resolve();
promises.forEach((p) => {
template = template.then(p)
})
// 2. 使用 await
10.deep copy(deepclone)
11.extends
12.singleton
13.pub-sub
14.打印出html里所有标签
15.lazyman
16.快排
17.数组乱序
18.LRU
19.两数之和
20.找出一个集合的所有子集
21.Object.defineProperty
- 实现的关键在那个闭包
22.requestAnimation(京东讲座，react间隙渲染)
/**
* Provides requestAnimationFrame in a cross browser way.
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(
/* function FrameRequestCallback */ callback,
/* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
23.手写 Proxy(使用Object.defineProperty将一个对象的属性代理到另一个对象上)
24.webpack
- loader plugin的区别
- tree-shaking 的工作原理(一个模块导出十个方法，但只用到了一个，那么只打包那一个方法)
- code splitting用的是什么插件
- 如何提高 webpack 的构建速度
- 利用 DIIPlugin 预编译资源模块
- 利用 Happypack 加速代码构建
25.jsonp
//通过JQuery Ajax 发起jsonp请求
(注：不是必须通过jq发起请求 ,
例如:Vue Resource中提供 $.http.jsonp(url, [options]))
$.ajax({
// 请求方式
type: "get",
// 请求地址
url: "http://169.254.200.238:8080/jsonp.do",
// 标志跨域请求
dataType: "jsonp",
// 跨域函数名的键值，即服务端提取函数名的钥匙（默认为callback）
jsonp: "callbackparam",
// 客户端与服务端约定的函数名称
jsonpCallback: "jsonpCallback",
// 请求成功的回调函数，json既为我们想要获得的数据
success: function(json) {
console.log(json);
},
// 请求失败的回调函数
error: function(e) {
alert("error");
}
});
@RequestMapping({"/jsonp.do"})
public String jsonp(@RequestParam("callbackparam") String callback){
// callback === "jsonpCallback"
// return callback + "({\"result\":\"success\"})";
return (request.from === jsonp) ? callback(data) : data ;
}
26.实现一个Queue类，要求包含两个函数
task函数：新增一个任务。包含两个参数，等待时间和回调函数
start函数：执行任务队列。将所有任务按队列顺序执行， 执行完一个任务才能执行下一个任务
new Queue()
.task(1000, () => {
console.log(1)
})
.task(2000, () => {
console.log(2)
})
.task(1000, () => {
console.log(3)
})
.start()
// 链接：https://www.zhihu.com/question/358075914/answer/915814865
const queue = {
a() {
setTimeout(() => {
console.log("a is done");
this.next();
}, 1000);
},
b() {
setTimeout(() => {
console.log("b is done");
this.next();
}, 1000);
},
c() {
setTimeout(() => {
console.log("c is done");
}, 1000);
}
};
Object.defineProperty(queue, Symbol.iterator, {
enumerable: false,
writable: false,
configurable: true,
value() {
const o = this;
const ks = Object.keys(o);
let idx = 0;
return {
next() {
const key = ks[idx++];
const func = o[key];
if (typeof func === "function") {
func.call(this);
}
return {
value: key,
done: idx > ks.length
};
}
};
}
});
const qt = queue[Symbol.iterator]();
qt.next();
// a is done
// b is done
// c is done
let queue = new Queue();
queue.push((next) => {
// do something async
next();
})
queue.push((next) => {
// do something async
Ajax.post('xxx').then(() => next());
});
queue.run()
27.实现一个wait
function wait (time) {
return new Promise((resolve, rejec) => {
setTimeout(resolve, time);
});
}
wait(2000).then(() => {
console.log('hello1');
return wait(2000);
}).then(() => {
console.log('hello2');
});
// 使用 await
(async function () {
var res = await wait(2000);
// console.log(res); // undefined
console.log('hello1');
var res1 = await wait(2000);
// console.log(res1); // undefined
console.log('hello2');
})();
28.实现一个jquery事件代理
function on(parent, currentClassName, eventName, cb) {
parent.addEventListener(eventName, function (evt) {
var target = evt.target;
var currentTarget;
while (target) {
if (target.tagName === 'BODY') break; // 找到body还没找到(说明点击的位置已经是目标元素的父级了; 不可能找到的)
if (target.getAttribute('class') === currentClassName) {
currentTarget = target;
break;
} else {
target = target.parentNode; // 往上找; 从目标元素的子元素触发事件
}
}
if (currentTarget) {
// 获取 currentTarget 上的数据; 并执行事件回调
cb.apply(currentTarget);
}
});
}
