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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

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