前端面试手写篇(一)

instanceof,new,call,apply,bind,ajax

instanceof实现

function myInstanceof(one, two) {
    let proto = one.__proto__;
    while (true) {
        if (proto === null) {
            return false;
        } else if (proto === two.prototype) {
            return true;
        }
        proto = proto.__proto__;
    }
}

new 实现

function myNew(fn, ...args) {
    let obj = {};
    obj.__proto__ = fn.prototype;
    const res = fn.call(obj, ...args);
    return typeof res === 'object' ? res : obj;
}

call的实现

Function.prototype.myCall = function (obj, ...args) {
    // let context = obj || window;
    const uni = Symbol(obj);
    obj[uni] = this;
    const res = obj[uni](...args);
    delete obj[uni]
    return res;
}

apply的实现

Function.prototype.myApply = function (obj, args) {
    // let context = obj || window;
    const uni = Symbol(obj);
    obj[uni] = this;
    const res = obj[uni](...args)
    delete obj[uni]
    return res;
}

实现bind

Function.prototype.myBind = function (context, ...args) {
    const fn = this;
    return function Bind() {
        if (this instanceof Bind) {
            fn.apply(this, args.concat([...arguments]))
        } else {
            fn.apply(context, args.concat([...arguments]))
        }
    }
}

手写axjs

function ajax(options) {
    let xmlHttp = null;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.status == 200 && xmlHttp.readyState == 4) {
            callBack(xmlHttp.reponseText);
        } else {
            alert(xmlHttp.statusText);
        }

    }
    if (options.method === 'GET') {
        let url = options.url + '?' + options.params;
        xmlHttp.open('get', url, true)
        xmlHttp.send(null)
    } else {
        xmlHttp.open('open', url, true)
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttp.send(options.data);
    }

}