一、前言
本篇文章是记录各种手写实现JavaScript中的各种操作，如：new apply等，如果有你有更好的方法，记得告诉我哦。
二、实现
1. 实现一个new操作符
new的原理，大致分为四点：
创建一个空的对象；
让此空对象的
__proto__指向构造函数的原型对象Constructor.prototype;绑定
this,执行构造函数;返回新对象；
function _New(func){
let _tempObj = {};
if(func.prototype !== null){
_tempObj.__proto__ = func.prototype;
}
let obj = func.apply(_tempObj,Array.prototype.slice.call(arguments,1));
return (typeof obj === "object") ? obj : _tempObj;
}
2. 实现一个call方法
call的核心其实是：
将函数设置为对象的属性；
执行&删除此函数；
指定this到函数并传入给定参数执行函数；
如果不传入参数，默认指向为window；
简单的
var obj = {
a:1,
b:function(){
console.log(this.a);
}
}
obj.b();//1
Function.prototype.ncall = function(contex=window){
contex.fn = this;
let args = [...arguments].slice(1);
let res = contex.fn(..args);
delete contex.fn;
return res;
}
apply的实现和call基本一样，只是参数略有不同，如下代码:
Function.prototype.napply = function(contex = window) {
contex.fn = this;
let res ;
if(arguments[1]){
//有参数
res = contex.fn(...arguments[1]);
}else{
res = contex.fn();
}
delete context.fn;
return res
}
bind的实现，会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。bind的实现会借助apply或者call;
Function.prototype.nbind = function(contex = window) {
if (typeof contex !== 'function'){throw Error('not a func')};
let fn = this;
newFunc = function(){};
let arg = ...arguments[1];
let resfunc = function(){
fn.apply(this instanceof newFunc ? this : contex,args.concat(..arguments));
}
if(this.prototype){
newFunc.prototype = this.prototype;
}
resfunc.prototype = new newFunc();
return newFunc;
}
bind的实现有一个难点，bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效.
var value = 2;
var foo = {
value: 1
};
function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
}
bar.prototype.friend = 'kevin';
var bindFoo = bar.bind(foo, 'daisy');
var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
具体参考
3. 实现一个instanceof方法
function ninstanceof(arg1,arg2){
let proto = arg1.__proto__;
let proto2 = arg2.prototype;
while(true){
if(proto == proto2) return true;
if(proto == null) return false;
proto = proto.__proto__;//深度继续往上早；
}
}
4. 实现一个js的深copy
function deepCopy(obj){
var r ;
if(typeof obj == "object"){
r = obj.constructor == Array ? [] : {};
for (let i in obj){
r[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
}
}else{
r = obj;
}
return r;
}
5. 实现节流和防抖函数
节流：一段时间内函数只执行一次；
防抖：如果事件执行时，又触发了事件，那事件会重新执行
//isDebounce 是否防抖
const throttle = function(fn,delay, isDebounce){
let timer ;
let lastTimer = 0;
return function(){
if(isDebounce){
//防抖
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
// Todo...
fn();
}, delay)
}else{
//节流
let now = new Date().getTime();
if(now - lastTimer < delay)return;
lastTimer = now;
fn();
}
}
}
三、总结
函数柯里化和promise的原理，菜鸡正在学习中，之后会补充到这。已上有什么错误，请及时联系。
