简述改变this指向的3个方法

函数中的this是在运行时候决定的,而不是函数定义时,有下列几种情况
1、全局环境中的this指window
2、其他函数中的this指向调用它的对象
3、在构造函数里用new调用,指向创建的新实例对象
4、使用call和apply改变函数中this的具体指向
apply的参数需要放在一个数组里面
bind改变this指向 返回函数调用执行
三个方法都是原型上

call

 Function.prototype.mCall = function(ctx, ...arg) {
            var fnname = this.name + Math.floor(Math.random() * 100)  //fn()这个函数名避免重复
            ctx[fnname] = this;  //把fn这个函数到ctx上
            ctx[fnname](...arg);  //调用一下这个函数,传入的实参
            delete ctx[fnname];  //删除这个fn函数
        }
   var obj = {
            name: '张三',
            age: '80'
        }

        var a = {
            name: '1',
            age: '10',
            fn(na, ag) {
                console.log(this.name, this.age, na, ag);
            }
        }
        a.fn.mCall(obj, 1, 2);  // 张三 80 1 2

Apply

   Function.prototype.mApply = function(ctx, arr) {
            var ctx = ctx || window;
            ctx.fn = this;  //ctx挂一个fn函数
            if (!arr) {  //判断传入的是不是一个数组
                var result = ctx.fn();   //给fn这个函数付给一个变量
                delete ctx.fn;   //删除这个函数
                return result;   //把结果返出去
            } else {  //如果是数组的话
                var len = arr.length,  // 把arr的长度赋给变量
                    args = [];  //声明一个空数组
                for (var i = 0; i < len; i++) {  //循环这个数组
                    args.push('arguments[1][' + i + ']');  //arguments代表实参集合,把它每一项放到空数组里
                }
                var result = eval('ctx.fn(' + args.join(',') + ')');  //eval()是把拼接的字符以函数形式表达出来
                delete ctx.fn;   //删除这个fn函数
                return result;   //把结果返出去
            }
        }

        var obj = {
            name: '张三',
            age: '80'
        }
        var a = {
            name: '1',
            age: '10',
            fn(na, ag) {
                console.log(this.name, this.age, na, ag);
            }
        }
        a.fn.mApply(obj, ['ha', 'he']); //张三 80 ha he

bind

    Function.prototype.mBind = function(ctx, ...arg) {
            ctx = ctx || window;
            var self = this;  //把this赋给一个变量
            return function() { 、、返回一个函数
                return self.call(ctx, ...arg.concat(...arguments))  //调用call的方法改变this指向
            }
        }
        var obj = {
            name: '张三',
            age: '80'
        }
        var a = {
            name: '1',
            age: '10',
            fn(na, ag) {
                console.log(this.name, this.age, na, ag);
            }
        }
        a.fn.mBind(obj,1,2)();  //因为返回的是一个函数所以需要调用

以上就是我的一些理解,如果有更深入的想法可以交流一下

你可能感兴趣的:(简述改变this指向的3个方法)