call/apply/bind 以及手写常用方法

152 阅读1分钟

// call、apply、bind

    var name = 'miss.wang', age = 16;
    var obj = {
        name: 'miss.zhang',
        objAge: this.age,
        myFun: function (fm, t) {
            console.log(this.name + '年龄' + this.age, '来自' + fm + '去往' + t);
        }
    }
    var db = {
        name: '德玛',
        age: 99
    }

    obj.myFun.call(db, '成都', '上海');  //德玛年龄99 来自成都去往上海
    obj.myFun.apply(db, ['成都', '上海']);  //德玛年龄99 来自成都去往上海
    obj.myFun.bind(db, '成都', '上海')();  //德玛年龄99 来自成都去往上海
    obj.myFun.bind(db, ['成都', '上海'])();   // 德玛 年龄 99  来自 成都, 上海去往 undefined

//deepClone

     //浅拷贝
    let a = [0, 1, 2];
    b = a;
    a[0] = 777;
    console.log(a, b) //true


    //深拷贝
    let n = [1, 2, 3, 4];
    m = deelClone(n);
    n[0] = 666;
    console.log(n, m) //false


    function deelClone(object) {
        let objClone = Array.isArray(object) ? [] : {};
        if (object && typeof object === 'object') {
            for (const key in object) {
                if (object.hasOwnProperty(key)) {
                    if (object[key] && typeof object[key] === 'object') {
                        objClone[key] = deelClone(object[key])
                    } else {
                        objClone[key] = object[key]
                    }
                }
            }
        }
        return objClone;
    }

//generator

//斐波那契数列为例 0 1 1 2 3 5 8 13 21 34 ...

    /* function fib(max) {
        var a = 0, b = 1;
        var arr = [0, 1];
        while (arr.length < max) {
            [a, b] = [b, a + b];
            arr.push(b);
        }
        console.log(arr) //[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
        return arr;
    }  */
    function* fib(max) {
        var a = 0, b = 1;
        var n = 0;
        while (n < max) {
            yield a;
            [a, b] = [b, a + b];
            n++;
        }
        return;
    }

    function clickhelloworld() {
        //方法一
        var f = fib(5);
        /* console.log(f.next()); // {value: 0, done: false} 
        console.log(f.next()); // {value: 1, done: false}
        console.log(f.next()); // {value: 1, done: false}
        console.log(f.next()); // {value: 2, done: false}
        console.log(f.next()); // {value: 3, done: false}
        console.log(f.next()); // {value: undefined, done: true}  */
        //方法二
        for (const iterator of f) {
            console.log(iterator)
        }
    }

//手动实现map

    // for循环实现
    Array.prototype.myMap = function () {
        var arr = this
        var [fn, thisValue] = Array.prototype.slice.call(arguments)
        var result = []
        for (var i = 0; i < arr.length; i++) {
            result.push(fn.call(thisValue, arr[i], i, arr))
        }
        return result
    }
    var arr0 = [1, 2, 3]
    console.log(arr0.myMap(v => v + 1))

    // forEach实现(reduce类似)
    /* Array.prototype.myMap = function (fn, thisValue) {
        var result = []
        this.forEach((v, i, arr) => {
            result.push(fn.call(thisValue, v, i, arr))
        })
        return result
    }

    function autoActive() {
        var arr0 = [1, 2, 3]
        console.log(arr0.myMap(v => v + 1))
    }
    autoActive();  */

//极简版promise封装

function promise() {
        this.msg = '';//存放value和error
        this.status = 'pending';
        var that = this;
        var process = arguments[0];

        process(function () {
            that.status = 'fulfilled';
            that.msg = arguments[0];
        }, function () {
            that.status = 'rejected';
            that.msg = arguments[0];
        })
        return this;
    }

    promise.prototype.then = function () {
        if (this.status === 'fulfilled') {
            arguments[0](this.msg);
        } else if (this.status === 'rejected' && arguments[1]) {
            arguments[1](this.msg)
        }
    }