发表于

1.手写create

1
2
3
4
5
6
// 将传入的对象作为原型
function create(){
	function F(){};
    F.prototype = obj;
    return new F();
}

2.手写instanceof

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 首先获取实例的原型
// 获取对象的原型
// 一直循环判断实例的原型等于类对象的原型,  直到实例原型为null,  因为原型链最终为null

function myInstanceof(left, right){
    let proto = Object.getPrototypeOf(left),
    prototype = right.prototype;
    
    while(true){
        if(!proto) return false;
        if(proto === protoype) reutrn true;
        
        proto = Object.getPrototype(proto);
    }
}

3.手写new操作符

1
2
3
4
5
6
7
8
9
10
11
// 调用new
// 首先创建一个新的对象
// 设置obj.__proto__ = Fn.prototype
function myNew(Fn, ...args){
	let newObj = {};
    // 判断一个参数是否是一个函数
    newObj.__proto__ = Fn.prototype;
    let res = Fn.call(obj, ...args);
    if((res !== null) && (typeof res === 'object' || typeof res === 'function')) return res;
    return obj;
}

4 手写Promise

1
2
3
4
5
6
7
const PENDING = 'pending';
    const RESOLVE = 'resolve';
    const REJECT = 'rejected';
    function myPromise(fn){
      let self = this;
      
    }

5 手写Promise.then

1

6 手写promiseAll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function promiseAll(promises){
    // 判断是否是数组
	if(!Array.isArray(promises)){
        console.error('not a array');
        return;
    }
        
    let resCnt = 0;
    let len = promises.length;
    let resolveRes = [];
    for(let i = 0; i < len; i++){
        Promise.resolve(promises[i]).then(val => {
            resCnt++;
            resolveRes[i] = val;
            if(resCnt === len) return resolve(resolveRes);
        }, error => rejected(error))
    }
}

let p1 = new Promise(function (resolve, reject){
    setTimeout(function (){
        resolve(1);
    }, 1000);
})

let p2 = new Promise(function (resolve, reject) {
    setTimeout(function (){
        resolve(2);
    }, 2000);
})

let p3 = new Promise(function (resolve, reject){
    setTimeout(function(){
        resolve(3);
    }, 3000);
});
promiseAll([p3, p2, p1]).then(res => console.log(res));

7 手写race

1
2
3
4
5
6
7
Promise.race = function (args){
    return new Promise((resolve, reject) => {
        for(let i = 0; i < args.length; i++){
            Promise.resolve(args[i]).then(val => resolve(val), err => reject(err));
        }
    })
}

8 手写防抖

1
2
3
4
5
6
7
8
9
10
function debounce(fn, wait){
    let timer = null;
    // 返回要绑定的函数
    return function (){
        clearTimeout(timer);
        timer = setTimeout(()=> {
            fn.apply(this, arguments);
        }, wait);
    }
}

9 手写节流

1
2
3
4
5
6
7
8
9
10
function throttle(fn, delay){
    let pre = new Date();
    return function (){
		let cur = new Date();
        if(cur - pre >= delay){
            // 依旧要返回一个函数
            return fn.apply(this, arguments);
        }
    }
}

10 手写类型判断函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getType(val){
    // 判断数据是null
    if(val === null){
        return val + '';
    }
    if(typeof val === 'object'){
        let valClass = Object.prototype.toString().call(val);
        type = valClass.split(' ')[1].split('');
        type.pop();
        return type.join('').tolowerCase();
    }
    else{
        return typeof val;
    }
    
}

11. 手写 call 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.myCall = function (context){
    // this指向的是被call调用的函数
    // 不是函数就报错
    if(typeof this !== 'function') return new Error('type Error');
	// 获取args参数
    let args = [...arguments].slice(1);
    let res = null;
    // 判断context是否存在, 不存在就指向window
	context = context || window;
    // 定义一个函数转移到this上
    context.fn = this;
    // 返回函数的执行结果
    return context.fn(args);
}

12. 手写 apply 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Function.prototype.muApply = function (){
    // 判断调用对象是否为函数
    if(typeof this !== 'function') return new Error('type error');
    
    let res = null;
    context = context || window;
    if(arguments[1]){
        res = context.fn(...arguments[1]);
    }
    else {
        res = context.fn();
    }
    return res;
}

13 手写 bind 函数

1
2
3
4
5
6
7
8
9
Function.prototype.myBind = function (context){
    if(typeof this !== 'function') return new Error('type error');
    
    let args = Array.from(arguments);
    _this = args.shift();
    return () => {
        this.apply(_this, args);
    }
}

15 实现ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();	// 创建 Http 请求
// 在open方法上创建一个http请求,  open方法所需要的参数是请求的方法,  请求的地址, 是否一异步,  用户认证的信息
xhr.open('GET', 'server_url', true)
//在发起请求前,  可以为对象添加一些信息和监听函数
//setRequestHeader方法添加头信息
xhr.onreadystatechange = function (){
    if(this.readyState !== 4) return;
    // 当请求成功时
    if(this.status === 200) handle(this.response);
    else {
        console.error(this.statusText);
    }
    
}
// 设置请求失败的监听函数
xhr.onerror = function(){
    console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
// 发送Http
xhr.send(null)

使用Promise封装AJAX请求

1