简述改变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)();  //因为返回的是一个函数所以需要调用

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,147评论 0 2
  • 前言 面试官出很多考题,基本都会变着方式来考察this指向,看候选人对JS基础知识是否扎实。读者可以先拉到底部看总...
    若川i阅读 1,125评论 0 10
  • JavaScript中的this指向问题有很多博客在解释,仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题...
    一个敲代码的前端妹子阅读 674评论 0 5
  • 1.含义 this就是属性或方法“当前”所在的对象。 上面代码中,this.name表示name属性所在的那个对象...
    Kevin丶CK阅读 811评论 0 3
  • 城市里坚硬的建筑高耸,变暗的让人感到寒冷的色调到处渲染,人群孤独的走着,地铁似带甲的生物安静的行驶,天际遥远,高空...
    阿西达娃阅读 411评论 0 4