JS初级基础之:手写一些常用的方法(一)

7,390 阅读1分钟

前言

大佬们好,我是一个菜鸟应届生,这是我发的第一篇文章,如有错误,请多多指教,谢谢各位大佬了。这篇文章我列举一些常见的面试中要求手写的一些常用方法

手写call,apply,bind方法

Function.prototype.myCall = function(context) {
            if (typeof this !== 'function') {
                throw new Error('不是函数哦')
            }

            context = context || window;

            context.fn = this;

            arguments[1] ? context.fn(...[].slice.call(arguments, 1)) : context.fn();

            delete context.fn;
        }
Function.prototype.myApply = function(context) {
            if (typeof this !== 'function') {
                throw new Error('不是一个函数');
            }

            context = context || window;

            context.fn = this;

            arguments[1] ? context.fn(...arguments[1]) : context.fn();

            delete context.fn;
        }
Function.prototype.myBind = function(context) {
            if (typeof this !== 'function') {
                throw new Error('不是一个函数');
            }

            context = context || window;

            let argu = arguments[1] ? [].slice.call(arguments, 1) : [];

            return (...canshu) => {
                this.apply(context, argu.concat(canshu));
            }


        }

手写原生ajax方法

let ajax = {
            get: function(url, fn) {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url, false);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200 || xhr.status === 304) {
                            console.log(xhr.responseText);
                            fn(xhr.responseText);
                        }
                    }
                }

                xhr.send();
            },
            post: function(url, data, fn) {
                let xhr = new XMLHttpRequest();
                xhr.open('POST', url, false);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200 || xhr.status === 304) {
                            fn(xhr.responseText);
                        }
                    }
                }
                xhr.send(data);
            }
        }

手写深拷贝函数

function deepClone(obj) {
            if (typeof obj !== 'object') {
                return;
            }
            var temp = Array.isArray(obj) ? [] : {};

            for (let key in obj) {
                temp[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
            }

            return temp;
        }

手写new的过程

function createNew() {
            let o = {};

            let constructor = [].shift.call(arguments);

            o.__proto__ = constructor.prototype;

            constructor.apply(o, arguments);

            return o;
        }

手写setTimeout实现setInterval

   setTimeout(function() {
            console.log(1);
            setTimeout(arguments.callee, 1);
        }, 1)

手写数组的forEach方法

   Array.prototype.myForEach = function(callback) {
            for (let i = 0; i < this.length; i++) {
                callback(this[i], i);
            }
        }

结语

后续还会出其他方法的手写,希望大佬们指点使我成长。