前端面试笔记整理（四） —— 手写代码

//手写call apply 
Function.prototype.myCall = function(ctx,...args) {
    var ctx = ctx || window
 // 给 context 添加一个属性
  // getValue.call(a, 'yck', '24') => a.fn = getValue
    ctx.fn = this
    //调用
    let res = ctx.fn(...args)
    delete ctx.fn
    return res 
}
Function.prototype.myApplly = function(ctx,...args) {
    var ctx = ctx || window
    ctx.fn = this
    var res = args[1]? ctx.fn(...args[1]):ctx.fn()
    delete ctx.fn
    return res
}



//手写bind
Function.prototype.myBind = function(ctx) {
    if(typeof this != 'function'){
        throw new TypeError('Error')
    }
    var _this = this
    //slice并不会删除 如果需要删除 用splic  因为第一个参数是ctx
    var ars = [...arguments].slice(1)
    return function F() {
        if(this instanceof F){
            return new _this(...ars,...arguments)
        }
        return _this.apply(ctx,args.concat(...arguments))
    }
}




//手写promise
function myPromise(fn) {
    const that = this
    that.state = 'Pending'
    that.val = null
    that.resolvedCallbacks = []
    that.rejectCalbacks = []
    function resolve(val) {
        if(that.state === 'Pending'){
            that.state = 'Resolved'
            that.val = val
            that.resolvedCallbacks.forEach(ele => ele(that.val))
        }
    }
    function reject(val) {
        if(that.state === 'Pending') {
            that.state = "Rejected"
            that.val = val
            that.rejectCalbacks.forEach(ele => ele(that.val))
        }
    }
    try {
        fn(resolve,reject)
    } catch {
        reject(error)
    }
}



//手写promise.all
Promise.all = arr => {
    let aResult = []
    return new _Promise(function(resolve,reject) {
        let  i = 0
        next()
        function next() {
            arr[i].then(function(res) {
                aResult.push(res)
                i++
                if(i == arr.length) {
                    resolve(aResult)
                } else {
                    next()
                }
            })
        }
    })
}


// 大数相加
function sumStrings(a,b){
    var res='', c=0;
    a = a.split('');
    b = b.split('');
    while (a.length || b.length || c){
        c += ~~a.pop() + ~~b.pop();
        res = c % 10 + res;
        c = c>9?1:0;
    }
    return res.replace(/^0+/g,'');
   
  }

//手写ajax
var xhr = new XMLHttpRequest()
xhr.open('get','text.html')
xhr.send()
xhr.onreadystatechange= function() {
    if(ajax.readyState == 4 && ajax.status == 200 || ajax.status === 304){
        console.log(ajax.responseText)
    }
}
xhr.open('post','text.html')
xhr.send('name')
xhr.onreadystatechange = function() {
    if(xhr.readyState ==4 && xhr.status == 200 || ajax.status === 304)
    {
        console.log(xhr.responseText)
    }
}



//手写深拷贝
function deepClone(obj) {
    if (typeof obj !== 'object'|| obj == null){
    console.log('此时传入的为'+ obj +'，执行递归，直接拷贝');
    return obj
    }
    let res 
    if(obj instanceof Array) {
        res = []
    } else {
        res = {}
    }
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            res[key] = deepClone(obj[key])
        } else{
            res[key] = obj[key]
        }
    }
    return res
}

// 深拷贝优化版
function deepClone(obj){
    let res = Array.isArray(obj)?[]:{}
    if(obj && typeof obj === "Object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                if(obj && typeof obj === "Object"){
                  res[key] = deepClone(obj[key])
                } else {
                    res[key] = obj[key]
                }
            }
        }
    }
    return res
}




//手写new构造
//fn为构造函数
function myNew(fn) {
    var obj = new Object
    obj._proto_ = fn.prototype
    k = fn.call(obj,...args)
    typeof k === 'object' ? k: obj
}



//手写双向绑定
//html
<input id="in" type="text" />
<div id="out"></div>
 
//js
var obj = {
}
  
var input = document.querySelector('#model')
var text = document.querySelector('#modelText')

Object.defineProperty(obj,'name',{
    get:function(){
        console.log('获取')
    },
    set:function(val){
       console.log('修改')
       input.value = val
       text.textContent = val
    }
})
input.addEventListener('input',function(val){
console.log(input)
obj.name = input.value
})
//发布订阅模式
class EvenBus {
    constructor() {
        this.events = Object.create(null)
    }
    on(event,fn){
        this.events.event = this.events.event || []
        this.events.event.push(fn)
    }
    off(event,fn){
        const index = (this.events.events||[]).indexOf(fn)
        if(index < -1){
            return
        } else{
            this.events.events.splice(index,1)
        }
    }
    fire(event){
        this.events.event.forEach(fn => fn())
    }
}
var b = new EvenBus
b.on('onclick',function(){
    console.log('b.on')
})
b.fire('onclick')



//primise 串执行
const parallerPromise = promise.reduce(
    (acc,cur) => acc.then(res => cur(res)),
    Promise.resolve(val))
const paraller = promise.reduce(
    (acc,cur) => acc.then(() => 
        cur.then(print)
    ),
    Promise.resolve(val)
)
// async
var fn=async function(arr){
    for(let i=0,len=arr.length;i<len;i++){
        var result=await arr[i]
        console.log(result)
    }
 }   
 fn(arr)
//Generator
const Cgenerator = function (arr) {
    const fn = function* () {
        for (let i = 0, len = arr.length; i < len; i++) {
            yield arr[i]
        }
    }
    const gen = fn();
    const step = function (nextF) {
        let next=nextF()
        if (next.done) {
            return;
        }
        if (next.value) {
            next.value.then((data) => {
                console.log(data)
                step(() => { return gen.next(); })
            })
        }
    }
    step(() => { return gen.next(); })
}
Cgenerator(arr)


//传统类的声明
function Animal() {
    this.name = name  //通过this来表明这是一个构造函数
}
//es6声明
class Animal2 {
    constructor(){
        this.name = name
    }
}
//实例化类的对象
new Animal()
new Animal2()

//类的继承 依靠原型链来实现
// 1.借助构造函数实现继承
//（缺点：parent1原型链的属性并不可被child继承）
function Parent1() {
    this.name = 'Parent1'
}

function A(){}
function B(){
    A.apply(this)
}
B.prototype = new A()


function Child1() {
     /*     
    此处用apply也可，原理是：把父函数在子函数执行同时
    修改了this的指向,从而实现了父类的属性都挂载到
    child属性上
        */
    Parent1.call(this)
    this.type = 'Child1'
} 
 
//2.借助原型链实现继承
// 在一个类上实例化了多个对象 多个对象并不是相互独立的，原因是原型链的原型对象是公用的
function Parent2() {
    this.name = 'Parent1'
}
function Child2() {
    this.type = 'Child2'
}
Child2.prototype = new Parent2()

//3.组合方式继承
// 缺点：父级的构造函数执行了多次
function Parent3() {
    this.name = 'Parent3'
}
function Child3() {
    Parent3.call(this)
    this.type = 'Child3'
}
Child3.prototype = new Parent3()

//4.组合继承优化
//缺点:instanceof 无法区分出一个对象是子类实例化的还是父类实例化的
function Parent4() {
    this.name = 'Parent4'
}
function Child4() {
    Parent4.call(this)
    this.type = 'Child4'
}
Child4.prototype = Parent4.prototype
var s4 = new Chiled4()
s4 instanceof Child4 === s4 instanceof Parent4 //True
console.log(s4.constructor) // Parent4


//5.组合继承优化2[最优]
function Parent5() {
    this.name = 'Parent5'
}
function Child5() {
    Parent5.call(this)
    this.type = 'Child5'
}
Child5.prototype = Object.create(Parent5.prototype)
Child5.prototype.constructor = Chiled5()
//重写Child5的构造方法
B.prototype = Object.create(a.prototype)
B.prototype.constructor = A()

var s5 = new Chiled5()  
 
//js去重
function unique(arr) {
    var res = []
    var obj = {}
    for(let i = 0; i<arr.length;i++){
        if (!obj[arr[i]]) {
            obj[arr[i]] = 1
            res.push(arr[i])
        }
    }
    return res
}
//闭包实现
function add(num){
    function res() {
        num ++
        return num
    }
    return res
}
//防抖函数
const throttle = (func,wait = 50) => {
    let lastTime = 0
    return function(...args) {
        let now = +new Date()
        if(now - lastTime > wait){
            lastTime = now
            func.apply(this,args)
        }
    }
}

const debounce = (func,wait = 50) => {
    let timer = 0
    return function(...args) {
        if(timer)clearTimeout(timer)
        timer = setTimeout(()=>{
            func.apply(this,func)
        },wait)
    }
}
for (var i = 0; i < 5; i++) {
    return function() {
       setTimeout(console.log(i),1000) 
    }()
}
console.log(i);

// 二叉树遍历[非递归]
function preordeTraversal(root) {
    if(!root) return []
    let stack = []
    let res = []
    while(root || stack.length > 0){
        while(root) {
            res.push(root.val)
            stack.push(root)
            root = root.left
        }
        if(stack.length > 0) {
            root = stack.pop()
            root = root.right
        }
    }
    return res
}
// 递归版本
let res= []
function preordeTraversal2(root) {
        if(root) {
            res.push(root.val)
            preordeTraversal2(root.left)
            preordeTraversa2(root.val)
        }
}



判断是否有环

int IsCross(ListNode *p, ListNode *q){
        if(p == NULL || q == NULL){
                return 0;
        }
        ListNode *t = p;
        while(t->next != NULL){
                t = t->next;
        }
        t->next = p;
        ListNode *fast = q;
        ListNode *slow = q;
        while(fast != NULL && fast->next != NULL){
                fast = fast->next->next;
                slow = slow->next;
                if(fast == slow){
                        break;
                }
        }
        if(fast != NULL && fast->next != NULL){
                return 1;
        }else{
                return 0;
        }