一、JS常见代码手写
1、手写instanceOf的实现原理
function instanceOf(left, right){
while(true){
if(left === null) return false;
if(left == right.prototype) return true;
left = left.__proto__;
}
}
2、手写节流和防抖函数
2.1 节流函数
节流函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效
// 使用时间戳方案
let throttle = function(fn, wait) {
let lastTime = 0;
return function(...args) {
let nowTime = new Date();
if (nowTime - lastTime > wait) {
lastTime = nowTime;
fn.apply(this, args);
}
}
}
function handle() {
console.log(1);
}
window.addEventListener('mousemove', throttle(handle, 1000))
2.2 防抖函数
防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
//2、使用定时器触发
let throttle = function(fn, wait) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
clearTimeout(timer);
}, wait)
}
}
}
function handle() {
console.log(1);
}
window.addEventListener('mousemove', throttle(handle, 1000))
适用场景：
拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize
动画场景：避免短时间内多次触发动画引起性能问题
3、手写promise.all实现原理
Promise.all() 方法接收一个promise的iterable类型，接收的是Promise对象的数组作为参数。当数组中所有的Promise对象全部变成Resovled状态，则整个Promise.all()也是Resolved状态
Promise.all = function(arr){
return new Promise((resolve, reject) => {
if(!Array.isArray(arr)){
return reject('arguments must be an array!')
}
let len = arr.length, resolveNum = 0, resolveRes = [];
for(let i =0; i< len; i++){
arr[i].then(data => {
resolveNum++;
resolveRes.push(data);
if(resolveNum == len){
return resolve(resolveRes);
}
}).catch(err => {
return reject(err);
})
}
})
}
//测试， 利用setTimeOut模拟异步操作
var p1 = (function(){
return new Promise((resolve, reject) => {
setTimeout(() => resolve('p1')), 100}
)
})();
var p2 = (function(){
return new Promise((resolve, reject) => {
setTimeout(() => resolve('p2')), 200}
)
})();
Promise.all([p1, p2]).then(data => console.log(data)) // [p1, p2]
4、手写nextTick的实现原理
5、手写new操作
new操作符做了这些事：
创建一个全新的对象
这个对象的proto要指向构造函数的原型prototype
执行构造函数，使用 call/apply 改变 this 的指向
返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象js
function myNew(fn, ...args) {
let instance = Object.create(fn.prototype);
let res = fn.apply(instance, args); // 改变this指向
// 确保返回的是一个对象(万一fn不是构造函数)
return typeof res === 'object' ? res: instance;
}
二、 DOM相关代码手写
1、addClassName操作
function addClassName(node, className){
if(!className) return;
let tempName = node.className + ' ' + className;
node.className = tempName.replace(/\s+|\s$/, '');
}
2、removeClassName操作
function removeClassName(node, className){
if(!className) return;
var reg = new RegExp(`\\b${className}\\b`, 'g');
node.className = node.className.replace(reg, '').replace(/\s$/, '');
}
下面这种方法比较简单明了，且不会出错
function removeClass(node, className){
let tmpClassName = ' ' + className + ' ';
if(node.className.indexOf(tmpClassName) >= 0){
node.className = tmpClassName.replace(' ' + className + ' ', ' ');
}
}
3、getCurrentStyleByNode获取节点的样式
function getStyle:function(node,attr){
return node.currentStyle ? node.currentStyle[attr] : getComputedStyle(node,0)[attr];
}
封装JS的DOM操作库
var DOMUtil = {
addClassName： function(){},
removeClassName: function(){},
getCurrentStyleByNode: function(){}
}
三、数组相关方法重写
1、indexOf方法
Array.prototype.indexOf = function (srcElement, fromIndex) {
let index = -1;
fromIndex = fromIndex || 0;
for (let i = 0; i < this.length; i++) {
curr = this[i]
if (i >= fromIndex && srcElement === curr) {
index = i;
break;
}
}
return index;
}
[0, 1, 2, 3].indexOf(3, 2)
四、Number相关方法重写
Number.prototype.toFixed = function(len){
let times = Math.pow(10, len);
return Math.round(this * times) / times;
}
