《你不知道的JavaScript》之this详解

一、this

js中给我们提供了apply和call，这两个东西都可以改变上下文指向，请看这个例子：

  var name = "周小绉";
  var obj = {
    name: "陈小晨"
  };
  function getInfo(age, year) {
    return this.name + " " + age + ' ' + year;
  }
  console.log(getInfo.apply(this, [19, '2019']));
  console.log(getInfo.call(obj, 18, '2018'));

顺便来复习一下apply和call的用法，这两个本质上没什么差。前者所加的参数是一个一个传，后者则是通过数组传递。当第一个参数传入为obj，getInfo中this.name自然就去找obj的了。

从这段代码可以看出：指定了上下文，可以隐式传递一个对象的引用，可以让API设计得更加简洁并且易于复用。

还有一个东西可以设置this的指向，那就是bind，绑定方式如下，与上面两个的区别是，这种方式不会立即执行函数，而且可以提前设置传入的参数。

func().bind(this， param1)

那么this是如何工作的呢？

误解一：this指向函数自身
举个栗子：

  function foo(num) {
    console.log(num);
    this.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo(i);
  }
  console.log('count=' + foo.count);  // ->>> 0
  console.log('globalCount=' + count);     // ->>> NaN

运行之后我们发现在foo函数中分别打印了0,1,2,3,4,按我们“预期”的结果，应该要打印出count = 5，结果遗憾的是0。

事实上当执行foo.count = 0时，函数对象确实被添加了一个count属性，但是函数中的this.count跟这个count并不是同一个。其实是创建了一个全局变量count，值为NaN。

解决方法1：

要从函数对象内部引用它自身，使用this是不够的。如果是具名函数，则可以使用函数名来指向，如下面代码所示。

  function foo(num) {
    console.log(num);
    foo.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo(i);
  }
  console.log('count=' + foo.count);  // ->>> 5

解决方法2：

上面那种完全就没有用到this了，并且完全依赖于变量foo的词法作用域，那么接下来就强行使用this一波，然而看起来和上面没差。

  function foo(num) {
    console.log(num);
    this.count++;
  }
  foo.count = 0;
  var i;
  for (i = 0; i < 5; i++) {
    foo.call(foo, i)
  }
  console.log('count=' + foo.count);  // ->>> 5

误解二：this指向函数的作用域

  // (1)
  // var a = 1
  function foo() {
    var a = 2;
    console.log(bar())
  }
  function bar() {
    // (2) 
    //var a = 3
    return this.a;
  }
  foo(); // ->>> undefined

此处视图使用this.a去访问foo的a，但是无法将作用域连接起来。此处this还无法引用作用域内部的东西。去掉（2）处的注释也无济于事，如果再去掉(1)的注释，打印出来的是1，可以知道此时的this指向调用这个函数的对象，我们在window中调用foo，显然this指向了window。

正解：

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包 含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性，会在函数执行的过程中用到。

（1）this的指向在函数创建的时候还无法确定，只有在调用的时候才能确定。

（2）当this没有被上一级的对象所调用，this就指向window ，否则就是上一级对象

二、this解析

我在网上寻觅this详解的时候，发现了一篇16W+阅读量的博客，讲了很多案例，挺不错的，在此分享一下。

我们知道this是在调用时候绑定的，而且取决于函数的调用位置，调用栈的例子：

function f1() {
    f2() // 调用栈：f1
}
function f2() {
    f1() // 调用栈：f1 -> f2
}
function f3() {
    f2() // 调用栈：f1 -> f2 -> f3
}

2.1绑定规则

① 默认绑定

var name = 'a';
function foo() {
    // "use strict";
    var name = "b";
    console.log(this.name); //a
    console.log(this); //Window
}
foo();

this默认绑定为window，我们在全局作用域下调用了foo，找不到指向，默认就是window。需要注意的是：如果开启严格模式，this.name打印的将是undefined。但是严格模式与foo调用的位置无关,还是默认绑定到Window

var name = 'a';
function foo() {
    console.log(this.name); // a
    console.log(this); //Window
}
(function() {
    "use strict"; // 严格模式设置在foo函数之外
    foo()
})()

② 隐式绑定

判断调用的位置是否有上下文对象

  var name = 'a'
  function foo() {
    console.log(this.name); 
  }
  var obj = {
    name: 'b',
    foo: foo
  }
  obj.foo()  // b
  foo()     // a

foo函数本质是不属于obj对象的，而是在obj中作为引用属性。但是当通过obj间接调用foo时，this的指向就发生了变化，此时this就绑定到了obj。如果是直接调用，毋庸置疑，this指向的是全局的。

如果有多层的引用，那么this指向的就是最近的一层，毕竟远水救不了近火：

  function foo() {
    console.log(this.name);
  }
  var obj = {
    name: 'b',
    foo: foo
  }
  var obj2 = {
    name: 'c',
    obj: obj
  }
  obj2.obj.foo()  // b

但是也会出现一种情况，间接引用的时候，很可能会被绑定到全局中

var name = "a";
function foo() {
    console.log(this.name);
}
var obj = {
    name: "b",
    foo: foo
};
var bar = obj.foo;
bar(); // a

上面的var bar = obj.foo引用的是foo函数的本身，不带任何修饰，所以调用bar时候，应该采用默认绑定的方式，即this指向全局（非严格模式）或者undefined（严格模式）。还有一种函数传参的方式也是一样的：

var name = "a";
function foo() {
    console.log(this.name);
}
var obj = {
    name: 'b',
    foo: foo
}
function doAction(func) {
    func()
}
doAction(obj.foo)

doAction传参时候，我们知道会有一个赋值操作，即 func = obj.foo，所以和上面一样，如果把函数传入内置函数，比如setTimeOut，还是一样的，没啥区别。

③ 显示绑定

改变this指向，在文章开头的时候就提到过了，apply和call都可以实现

  • 硬绑定

我们可以理解为硬要绑定，强制绑定，如下例子：

var name = "a";
var obj = { name: "b" };
function foo() {
    console.log(this.name);
}
var bar = function() {
    foo.call(obj);
};
bar(); //b
setTimeout(bar, 100); //b
bar.call(window);  //b

bar函数内部为foo强制绑定了this得指向，即obj。不管如何调用bar，到最后都要经过这一步的操作，所以this指向无法得到修改，一直都是指向obj。

应用场景：

通过指定this的指向，包裹函数，传入参数进行操作，或者可以使用辅助函数

function foo(sth) { 
    return this.age + sth; 
}
var obj = { age:2 };
var bar = function() {
    return foo.apply( obj, arguments ); // 第二个参数是所有参数的数组
};
var b = bar( 3 ); 
console.log( b ); // 5
  • API调用的

一些第三方库，可以支持上下文的参数，确保回调函数使用我们指定的this

function foo(el) { 
    console.log( el, this.name ); 
}
var obj = { name: "guoguo" };
[1, 2, 3].forEach( foo, obj ); 
// 1 guoguo 2 guoguo 3 guoguo

数组中每个元素都会被当作foo的一个参数，逐个调用，并且在forEach的第二个参数中指定了this的指向

④new绑定

当我们使用new来调用对象函数时，会复制一份里面所有用this点的属性到新的对象中，因此新的对象就可以访问属性了

function foo(a) {
    var b = a + 1;
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a, bar.b); // 2, undefined

注意点：

当this遇到了return，如果返回的是一个对象，那么this就是指向那个对象，否则还是原来的。返回undefined也不会改变指向。但是有一个特殊情况：null虽然是对象，但是还是指向原来的。

function foo(a){
    this.a = a
    return {} // undefined
    // return function(){} undefined
    // return null 1
    // return undefined 1
}
var func = new foo(1)
console.log(func.a)

2.2 优先级

一般情况下的判断方式：

① new 绑定的，this 绑定新创建的对象。

var bar = new foo()

② call、apply显式绑定或者硬绑定调用的，this绑定指定的对象。

var bar = foo.call(obj)

③ 隐式绑定的，this 绑定上下文对象。

var bar = obj1.foo()

④ 如果都不是的话，选择优先级最低，默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到

全局对象。

var bar = foo()

这是是一些例外：

①当把null, undefined作为this的绑定对象传入call，apply，bind，实际应用的是默认的绑定规则

②当遇上间接引用的时候，调用这个函数会应用默认绑定规则

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 使用全局的

③ 我们提到的使用硬绑定，将this强制绑定到指定的对象，但是会大大降低函数的灵活性，因为用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this，我们可以给默认绑定指定一个自定义的指向。

软绑定就出现了：

(以下代码均出自《你不知道的JavaScript》)

// 默认绑定obj
if (!Function.prototype.softBind) { 
    Function.prototype.softBind = function(obj) { 
        var fn = this; // 捕获所有 curried 参数
        var curried = [].slice.call( arguments, 1 );
        var bound = function() {
            return fn.apply( (!this || this === (window || global)) ? obj : this
                curried.concat.apply( curried, arguments)); 
        };
        bound.prototype = Object.create(fn.prototype);
        return bound; 
    };
}

function foo() { 
    console.log(this.name); 
}
var obj = { name: "obj" }, obj2 = { name: "obj2" }, obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj ); 
fooOBJ(); // obj 
obj2.foo = foo.softBind(obj); 
obj2.foo(); // obj2 
fooOBJ.call( obj3 ); // obj3 
setTimeout( obj2.foo, 10 ); 
// obj

④ 当this遇上了箭头函数

function foo() { 
    return (a) => { 
        console.log( this.a ); 
    };
}
var obj1 = { a:2 };
var obj2 = { a:3 };
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2

分析：foo函数内部的箭头函数会保留调用foo时候的this指向，此处则为obj1，而且指向无法被修改，所以就算硬绑定了obj2也没用。

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