关于this的一些笔记

this

什么是this,其实你可以理解为它类似一个指针

在浏览器环境中，全局作用域下，this指的是windows，在node环境中，全局下this打印的是一个空对象{};


function foo(){
    console.log(this);
}

foo();

上面这段代码运行之后，在浏览器环境中，会打印window对象。再看下面这段代码。


function foo(){
    console.log(this);
}

var fn1 = foo;

fn1();

上面的代码执行之后，打印的还是window,我们在看。


function foo(){
    console.log(this)
}

var fn1 = {
    a: 1,
    foo: foo
}

fn1.foo();

这段代码执行之后返回的是fn1对象。接下来再看


function foo(){
    console.log(this)
}

var arr = [foo,2,3]

arr[0]()

上述代码执行完成后，打印的是arr数组对象。

通过之前的代码我们可以很明显的看到，this 是在运行时进行绑定的，并不是在编写时绑定，当我们把函数赋值到引用对象里调用的时候，那this就指向当前的调用环境，就是调用的对象本身

什么是执行上下文

javascript是一个单线程语言，这意味着在浏览器中同时只能做一件事情。当javascript解释器初始执行代码，它首先默认进入全局上下文。每次调用一个函数将会创建一个新的执行上下文。

每次新创建的一个执行上下文会被添加到作用域链的顶部，有时也称为执行或调用栈。浏览器总是运行位于作用域链顶部的当前执行上下文。一旦完成，当前执行上下文将从栈顶被移除并且将控制权归还给之前的执行上下文。比如我调用了这个函数，那么这个函数的执行上下文 就会被添加到作用域链的顶部，然后这个函数执行完成这个上下文就会被移除，然后控制权交给之前的上下文。

执行上下文的建立过程

我们现在已经知道，每当调用一个函数时，一个新的执行上下文就会被创建出来。然而，在javascript引擎内部，这个上下文的创建过程具体分为两个阶段:

  1. 建立阶段(发生在当调用一个函数时，但是在执行函数体内的具体代码以前)

    • 建立变量，函数，arguments对象，参数
    • 建立作用域链
    • 确定this的值

  2. 代码执行阶段:

    • 变量赋值，函数引用，执行其它代码

我们可以看到，当一个函数调用的时候，会建立执行上下文，建立的时候会确定this的值，所以我们现在，就是要探讨他的this的值是怎么确定的。

调用位置


function baz() {
    // 当前调用栈是：baz
    // 因此，当前调用位置是全局作用域
    console.log("baz");
    bar(); // <-- bar 的调用位置
}

function bar() {
    // 当前调用栈是 baz -> bar
    // 因此，当前调用位置在 baz 中
    console.log("bar");
    foo(); // <-- foo 的调用位置
}

function foo() {
    // 当前调用栈是 baz -> bar -> foo
    // 因此，当前调用位置在 bar 中
    console.log("foo");
}
baz(); // <-- baz 的调用位置

注意我们是如何（从调用栈中）分析出真正的调用位置的，因为它决定了 this 的绑定

绑定规则

我们来看看在函数的执行过程中调用位置如何决定 this 的绑定对象。

你必须找到调用位置，然后判断需要应用下面四条规则中的哪一条。我们首先会分别解释这四条规则，然后解释多条规则都可用时它们的优先级如何排列。

规则一 默认绑定

独立调用。可以把这条规则看作是无法应用其他规则时的默认规则。


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

在代码中， foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

如果使用严格模式（ strict mode ），那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined

规则二 隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含，不过这种说法可能会造成一些误导。


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

调用位置会使用 obj 上下文来引用函数，因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。

当 foo() 被调用时，它的落脚点确实指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj ，因此 this.a 和 obj.a 是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说：


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; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。

一种更微妙、更常见并且更出乎意料的情况发生在传入回调函数时：


function foo() {
    console.log(this.a);
}

function doFoo(fn) {
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a 是全局对象的属性
doFoo(obj.foo); // "oops, global"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样

规则三 显式绑定

使用 call(..) 和 apply(..) 方法可以强制绑定this的指向。


function foo(){
    console.log(this.a)
}

var obj = {
    a: 2,
}

foo.call(obj)

如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作 this 的绑定对象，这个原始值会被转换成它的对象形式（也就是 new String(..) 、 new Boolean(..) 或者
new Number(..) ）。这通常被称为“装箱”。

规则四 new 绑定

在javascript中，使用new 操作符的时候，其实和其他大多数语言中使用new操作符的机制不太一样，当我们使用了new 操作符调用函数，这个函数就会被当做构造函数来调用。

调用构造函数的时候，会发生四件事情：

  1. 创建一个空对象。
  2. 将这个空对象的proto成员指向了构造函数的prototype成员对象
  3. 这个新对象会绑定到函数调用的 this
  4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象

关于构造函数可查看 https://www.jianshu.com/p/794672ea66c5

绑定优先级

默认绑定的优先级是最低的。

先看隐式绑定和显式绑定哪个优先级更高：


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

可以看到，显式绑定优先级更高，也就是说在判断时应当先考虑是否可以应用显式绑定。

现在我们需要搞清楚 new 绑定和隐式绑定的优先级谁高谁低：


function foo(val){
  this.a = val;
}

var obj = {
  foo: foo,
}

obj.foo(3);
console.log(obj.a); // 3

var bar = new obj.foo(4);

console.log(bar.a);
console.log(obj.a)

可以看到 new 绑定比隐式绑定优先级高。但是 new 绑定和显式绑定谁的优先级更高呢


function foo(something) {
  this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

判断this

现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则

  1. 函数是否在 new 中调用（ new 绑定）？如果是的话 this 绑定的是新创建的对象。
var bar = new foo()
  1. 函数是否通过 call 、 apply （显式绑定）或者硬绑定调用？如果是的话， this 绑定的是指定的对象
var bar = foo.call(obj2)
  1. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话， this 绑定的是那个上下文对象。
var bar = obj1.foo()
  1. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined ，否则绑定到全局对象。
var bar = foo()

被忽略的this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call 、 apply 或者 bind ，这些值在调用时会被忽略，实际应用的是默认绑定规则


function foo() {
  console.log(this.a);
}
var a = 2;
foo.call(null); // 2

一般我们要展开数组，或者是对参数进行柯里化（预先设置一些参数）的时候，会经常传入一些null值进行占位u，es6中展开数组可以用拓展运算符...，但是还没有参数柯里化的相关语法。


function foo(a, b) {

  console.log("a:" + a + ", b:" + b);
}
// 把数组“展开”成参数
foo.apply(null, [2, 3]); // a:2, b:3
// 使用 bind(..) 进行柯里化
var bar = foo.bind(null, 2);
bar(3); // a:2, b:3

这两种方法都需要传入一个参数当作 this 的绑定对象。如果函数并不关心 this 的话，你仍然需要传入一个占位值，这时 null 可能是一个不错的选择,

更安全的this


function foo(a, b) {
  console.log("a:" + a + ", b:" + b);
}
// 我们的 DMZ 空对象
var ø = Object.create(null);
// 把数组展开成参数
foo.apply(ø, [2, 3]); // a:2, b:3
// 使用 bind(..) 进行柯里化
var bar = foo.bind(ø, 2);
bar(3); // a:2, b:3

使用变量名 ø 不仅让函数变得更加“安全”，而且可以提高代码的可读性，因为 ø 表示“我希望 this 是空”，这比 null 的含义更清楚。

间接引用

另一个需要注意的是，你有可能（有意或者无意地）创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则。


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

赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是p.foo() 或者 o.foo() 。根据我们之前说过的，这里会应用默认绑定。

箭头函数

箭头函数不适用this的四种标准规则。而是根据外层作用域来决定this。


function foo() {
  return () => {
    console.log(this.a);
  }
}

var obj = {
  a: 2,
  foo: foo
}

var obj2 = {
  a: 4
}

var bar = foo.call(obj2)

bar.call(obj); // 4

foo() 内部创建的箭头函数会捕获调用时 foo() 的 this,由于 foo() 的 this 绑定到 obj2,bar （引用箭头函数）的 this 也会绑定到 obj2,头函数的绑定无法被修改。（ new 也不行！）

总结

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。

  1. 由 new 调用？绑定到新创建的对象。
  2. 由 call 或者 apply （或者 bind ）调用？绑定到指定的对象。
  3. 由上下文对象调用？绑定到那个上下文对象。
  4. 默认：在严格模式下绑定到 undefined ，否则绑定到全局对象。

一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null) ，以保护全局对象。

ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定this ，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。这其实和 ES6 之前代码中的 self = this 机制一样。

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

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,657评论 18赞 139
  • JavaScript中的this指向
    1.概念 在JavaScript中，this 是指当前函数中正在执行的上下文环境，因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,130评论 0赞 2
  • JavaScript中‘this’理解
    1. this之谜 在JavaScript中，this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 999评论 0赞 3
  • 第六天
    2018年3月28日 星期三 天气晴 两天不写亲子日记了，原因是这两天没有和儿子交流。 这几天我公...
    孙鸿翔阅读 200评论 0赞 0
  • Less
    Less是一门CSS预处理语言，扩展了CSS，增加了变量、Mixin、函数等特性。 Less可运行在Node或浏览...
    JunChow520阅读 523评论 0赞 0