前端面试中常见的原生JS手写实现函数

前言

这里我总结前端面试中常见的原生JS手写实现函数，对付面试足够了，但是可能还会有露，这就得根据你自己具体的面试来总结了。其中如果有误，欢迎指正，我在这里先感谢各位！！！

实现

call函数

Function.prototype.mycall = function () {
   
    const args = [...arguments]
    const contex = args.shift() //作用对象
    let fn = Symbol()
    contex[fn] = this //为作用对象添加给定的函数
    let result = contex[fn](...args) //执行作用对象上的函数
    delete contex[fn]
    return result
}

apply函数

Function.prototype.myapply = function () {
   
    const args = [...arguments]
    const contex = args.shift()
    let fn = Symbol()
    contex[fn] = this
    let result = contex[fn](...args[0])   //不同之处
    delete contex[fn]
    return result
}

bind函数

Function.prototype.mybind = function () {
   
    const args = [...arguments]
    const thisArg = args.shift()
    const self = this 
    return function () {
   
        return self.apply(thisArg, args)
    }
}

new

function myNew() {
   
    const args = [...arguments]
    const father = args.shift()
    let obj = new Object({
   }) //创建一个新的空对象
    obj.__proto__ = father.prototype //解决原型
    let result = father.call(obj, ...args) //构造函数于新对象环境中执行
    // let result = father.apply(obj, [...args])
    return result ? result : obj
}

instanceof函数

function instance_of(L, R) {
   
    // 1.如果是基本数据类型，除了null
    const baseType = ['string', 'number', 'boolean', 'undefined', 'symblo', 'BigInt']
    if (baseType.includes(typeof (L))) return false
    // 2.如果时引用类型
    let LP = L.__proto__
    let RP = R.prototype
    while (true) {
   
        if (LP == null) {
    //找到最后一个了，__proto__为null(Object.prptptype.__prpto__ = null)
            return false
        }
        if (LP === RP) {
   
            return true
        }
        LP = LP.__proto__ //该层未找到，继续往上找
    }
}

继承实现

/原型链继承
function Sup (name) {
   
    this.name = name
}
Sup.prototype.sayName = function () {
   
    console.log(this.name)
}
function sub(name, age) {
   
    this.name = name
    this.age = age
}
sub.prototype = new Sup()//要点：继承原型链
sub.prototype.satAge = function () {
   
    console.log(this.age)
}

//sub.prototype = new sup()
sub.prototype.sayAge = function () {
   
    console.log(this.age)
}
//盗用构造函数继承或经典继承或对象伪装
function Sup (name) {
   
    this.name = name
}
Sup.prototype.sayName = function () {
   
    console.log(this.name)
}
function Sub (name, age) {
   
    Sup.call(this, name)//要点：在子类中执行父类的构造函数并继承其构造函数中的方法，而且向父类传递参数name
    this.age = age
}

//组合继承或伪经典继承
function SuperType(name) {
   
    this.name = name
}
SuperType.prototype.sayName = function () {
   
    console.log(this.name)
}

function SubType(name, age) {
   
    SuperType.call(this, name)   //要点1
    // SuperType.apply(this, name)   //报错，apply第二个参数是Array的实例，或者arguments对象。
    this.age = age
}

SubType.prototype = new SupType()//要点2
SubType.prototype.sayAge = function () {
   
    console.log(this.age)
}
var instance = new SubType("Alo", 18)

//原型式继承
function object (o) {
   
    function F() {
   }
    f.prototype = o
    return new F()
}

//寄生式继承
function createAnother (obj) {
   
    let clone = object(o)
    clone.sayHi = function () {
   
        console.log('hi')
    }
    return clone
}

//寄生式组合继承
function createother (Sub, Sup) {
   
    let prototype = object(Sub, Sup)
    prototype.construct = sub
    sub.prototype = prototype
}

function SuperType(name) {
   
    this.name = name
}
SuperType.prototype.sayName = function () {
   
    console.log(this.name)
}

function SubType(name, age) {
   
    SuperType.call(this, name)   //要点1
    // SuperType.apply(this, name)   //报错，apply第二个参数是Array的实例，或者arguments对象。
    this.age = age
}

createother(SubType, SupType)//要点2，这里于组合继承不一样
SubType.prototype.sayAge = function () {
   
    console.log(this.age)
}

深拷贝

function deepClone (obj) {
   
    let objclone = Array.isArray(obj) ? [] : {
   }//最后复制的对象或数组
    if