JavaScript中的this关键字

  • 目录

一、是什么

二、为什么

三、调用位置与调用栈

四、绑定规则：默认绑定，隐性绑定，显现绑定，new绑定

五、判断this

  • 注：是看《你不知道的JavaScript》的学习笔记，有问题欢迎指出，

一、是什么

this是在函数被调用时绑定的，this绑定完全取决于函数的调用方法

二、为什么

当需要在不同的上下文对象中重复使用不同的函数时，不用针对每个对象编写不同版本的函数。

三、调用位置与调用栈

        function foo1() {
            console.log("foo1");
            // 当前调用栈是foo1
            // 因此当前调用位置是全局作用域
            foo2();//foo2的调用位置
        }
        function foo2() {
            console.log('foo2');
            // 当前调用栈是foo1->foo2
            // 因此当前调用位置在foo1中
            foo3();//foo3的调用位置
        }
        function foo3() {
            // 当前调用栈是foo1->foo2->foo3
            // 因此当前调用位置在foo2
            console.log('foo3');
        }
        foo1();//foo1的调用位置

四、绑定规则

（一）默认绑定

  • 不带任何修饰的函数引用调用的，因此只能使用默认绑定
       function foo() {
            console.log(this.a)//2
        }
        var a=2;
        foo();
  • 如果是严格模式，那么全局对象将无法使用默认绑定，这时 this会绑定到undefined
        function foo() {
            "use strict";
            console.log(this.a) //TypeError this  is undefined
        }
        var a=2;
        foo();
  • 严格模式下， this的绑定与foo()的调用位置无关
        function foo() {

            console.log(this.a)//2
        }
        var a=2;
        (function () {
            "use strict";
            foo();
        })();

（二）隐性绑定

在一个对象内部包含一个指向函数的属性，并通过这个属性间接引用函数，从而把this间接（隐式)绑定到对象上。

        function foo() {
            console.log(this.a);
           // console.log(obj.a);和上句一样
        }
        var obj={
            a:2,
            foo:foo
        };
        obj.foo();//调用foo()时，this被绑定到obj
  • 对象属性引用链中只有最顶层或者说最后一层会影响调用位置
        function foo() {
            console.log(this.a);
        }
        var obj2={
            a:42,
            foo:foo
        };
        var obj1={
            a:2,
            obj2:obj2
        };
        obj1.obj2.foo();//42
  • 隐式丢失
        function foo() {
            console.log(this.a);
        }
        var obj={
            a:2,
            foo:foo
        };
        var bar=obj.foo;//函数别名 |没有这句的话 输出2
        var a="oops,global";//a是全局对象的属性
        bar();//"oops,global"
        //这里的bar()其实一个不带任何修饰的函数调用，因此应用了默认绑定
  • 传入回调函数：丢失this绑定
        function foo() {
            console.log(this.a);
        }
        function doFoo(fn) {
                fn();//调用位置
        }
        var obj={
            a:2,
            foo:foo
        };
        var a="oops,global";//a是全局对象的属性
        doFoo(obj.foo);//"oops,global"
        //参数传递其实就是一种隐式赋值，因此传入函数时也会被隐式赋值
  • 传入内置函数
        function foo() {
            console.log(this.a);
        }
        var obj={
            a:2,
            foo:foo
        };
        var a="oops,global";//a是全局对象的属性
        setTimeout(obj.foo,100);//"oops,global"

        //JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似
        function setTimeout(fn,delay) {
            //等待delay毫秒
            fn();//调用位置
        }

（三）显性绑定

可以直接指定this的绑定对象称为显示绑定。在某对象上用call()和apply()强制调用函数，它们第一个参数是一个对象，会把这个对象绑定到this，接着再调用函数时，指定这个this。

        function foo() {
            console.log(this.a);
        }
        var obj={
            a:2
        };
        foo.call(obj);//把foo的this绑定到obj上
（1）硬绑定解决丢失绑定问题
        function foo() {
            console.log(this.a);
        }
        var obj={
            a:2
        };
        var bar=function () {
            foo.call(obj);//强制把foo的this绑定到obj，
            // 所以不管再怎么调用bar的值，总会强制把foo的this绑定到obj
        };
        bar();//2
        setTimeout(bar,100);//2
        //硬绑定的bar不可能再修改它的this
        bar.call(window);//2
  • 典型应用场景：
    方法1：创建一个包裹函数，传入所有的参数并返回接收到的所有值
        function foo(something) {
            console.log(this.a, something);
            return this.a+something;
        }
        var obj={
            a:2
        };

        var bar=function () {
            return foo.apply(obj,arguments);
        }

        var b=bar(3);//2 3
        console.log(b);//5

方法2：创建一个可以重复使用的辅助函数

        function foo(something) {
            console.log(this.a, something);
            return this.a+something;
        }

        var obj={
            a:2
        };

        function bind(fn,obj) {
            return function () {
                return fn.apply(obj,arguments);
            }
        }

        var bar=bind(foo,obj);
        var b=bar(3);//2 3
        console.log(b);//5
  • 因为硬绑定常用，所有es6提供了内置方法Function.prototype.bind
        function foo(something) {
            console.log(this.a, something);
            return this.a+something;
        }
        var obj={
            a:2
        };
        var bar=foo.bind(obj);
        //bind返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数
        console.log(bar);//function() { [native code]}
        //native code 的意思是它bai是程序自带的，是二进制编译的无法显示出du代码,是区别于虚拟机上运行的bai代码而言的。
        var b=bar(3);//2 3
        console.log(b);//5
（2）API调用的“上下文”解决丢失绑定问题

许多函数都有一个可选的参数，通常被称为“上下文，作用和bind一样，确保回调函数使用指定的this

       function foo(el) {
            console.log(el, this.id);
        }
        var obj={
            id:"awesome"
        }
        var a=[1,2,3];
        a.forEach(foo,obj);
  • 实际就是用call或apply实现了显示绑定，这样可以少点代码

（四）new绑定

        function foo(a) {
            this.a=a;
        }
        var bar=new foo(2);
        console.log(bar.a);

五、判断this绑定

四条规则的优先级：new绑定>显示绑定>隐式绑定>默认绑定

1. 函数是否在new中调用，是的话this绑定新创建的对象。（new绑定）

var bar = new foo()

2. 函数是否通过call、apply或者硬绑定调用，是的话this绑定的是指定的对象。（显示绑定）

var bar = foo.call (obj)

3. 函数是否在某个上下文对象中调用，是的话this绑定的是哪个上下文对象。（隐式绑定）

var bar = obj.foo()

4. 如果以上都不是，那就是默认绑定；如果函数体处于严格模式下，this就被绑定到undefined，否则绑定到全局对象。（默认绑定）

var bar = foo()

  • 注：对于默认绑定来说，决定this绑定对象的不是调用位置是否处于严格模式，而是函数体是否处于严格模式。

六、绑定例外

（1）被忽略的this

null、undefined作为this的绑定对象传入call、apply、bind时，这些值会被忽略，所以这里应用的是默认绑定规则。

       function foo() {
            console.log(this.a);
        }
        var a=2;
        foo.call(null);//2
  • 可以加一个DMZ对象，比如Object.create (null)，以保护全局对象
（2）间接引用

赋值表达式p.foo=o.foo的返回值是目标函数的引用，因此调用的位置是foo()而不是p.foo()或者o.foo()，所以这里应用的是默认绑定规则。

        function foo() {
            console.log(this.a);
        }
        var a=2;
        var o={a:3,foo:foo};
        var p={a:4};
        o.foo();//3
        (p.foo=o.foo)();//2
（3）软绑定

七、箭头函数

箭头函数不使用this的四种标准规则，而是根据当前的词法作用域来this。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,029评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,238评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,576评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,214评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,324评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,392评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,416评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,196评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,631评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,767评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,410评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2赞 351