JavaScript之this

一、this的绑定规则

1. 默认绑定

什么情况下使用默认绑定呢？独立函数调用。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

案例一：普通函数调用
该函数直接被调用，并没有进行任何的对象关联；这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的this指向全局对象（window）；

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

foo();

案例二：函数调用链（一个函数又调用另外一个函数）
所有的函数调用都没有被绑定到某个对象上；

// 案例二:
function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
  test3()
}

function test3() {
  console.log(this); // window
}
test1();

案例三：将函数作为参数，传入到另一个函数中

function foo(func) {
  func()
}

function bar() {
  console.log(this); // window
}

foo(bar);

我们对案例进行一些修改，考虑一下打印结果是否会发生变化：
这里的结果依然是window，为什么呢？原因非常简单，在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用

function foo(func) {
  func()
}

var obj = {
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

2. 隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的：
也就是它的调用位置中，是通过某个对象发起的函数调用。

案例一：通过对象调用函数
foo的调用位置是obj.foo()方式进行调用的；
那么foo调用时this会隐式的被绑定到obj对象上

function foo() {
  console.log(this); // obj对象
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo();

案例二：案例一的变化
我们通过obj2又引用了obj1对象，再通过obj1对象调用foo函数；
那么foo调用的位置上其实还是obj1被绑定了this；

function foo() {
  console.log(this); // obj对象
}

var obj1 = {
  name: "obj1",
  foo: foo
}

var obj2 = {
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

案例三：隐式丢失
结果最终是window，为什么是window呢？
因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定；
相当于是一种默认绑定；

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

var obj1 = {
  name: "obj1",
  foo: foo
}

// 讲obj1的foo赋值给bar
var bar = obj1.foo;
bar();

3. 显示绑定

隐式绑定有以下前提条件：
必须在调用的对象内部有一个对函数的引用（比如一个属性）；如果没有这样的引用，在进行调用时，会报找不到该函数的错误；正是通过这个引用，间接的将this绑定到了这个对象上；

如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。它们两个的区别这里不再展开；

其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。

在调用这个函数时，会将this绑定到这个传入的对象上。因为上面的过程，我们明确的绑定了this指向的对象，所以称之为 显示绑定。

call、apply

通过call或者apply绑定this对象，显示绑定后，this就会明确的指向绑定的对象

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

foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123

bind函数

如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？
方案一：自己手写一个辅助函数（了解）
我们手动写了一个bind的辅助函数,这个辅助函数的目的是在执行foo时，总是让它的this绑定到obj对象上

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

var obj = {
  name: "why"
}

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

var bar = bind(foo, obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

方案二：使用Function.prototype.bind

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

var obj = {
  name: "why"
}

var bar = foo.bind(obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

内置函数

有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
这些内置函数会要求我们传入另外一个函数；我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；

案例一：setTimeout

setTimeout中会传入一个函数，这个函数中的this通常是window
setTimeout(function() {
  console.log(this); // window
}, 1000);

为什么这里是window呢？这个和setTimeout源码的内部调用有关；setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；

案例二：数组的forEach
数组有一个高阶函数forEach，用于函数的遍历：
在forEach中传入的函数打印的也是Window对象；
这是因为默认情况下传入的函数是自动调用函数（默认绑定）；

var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
  console.log(this); // 三次window
});

new绑定

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
使用new关键字来调用函数时，会执行如下的操作：
1.创建一个全新的对象；
2.这个新对象会被执行Prototype连接；
3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
4.如果函数没有返回其他对象，表达式会返回这个新对象；

// 创建Person
function Person(name) {
  console.log(this); // Person {}
  this.name = name; // Person {name: "why"}
}

var p = new Person("why");
console.log(p);

优先级总结：
new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定

二、this规则之外

1. 忽略显示绑定

如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：

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

var obj = {
  name: "why"
}

foo.call(obj); // obj对象
foo.call(null); // window
foo.call(undefined); // window

var bar = foo.bind(null);
bar(); // window

2. 间接函数引用

另外一种情况，创建一个函数的 间接引用，这种情况使用默认绑定规则。
我们先来看下面的案例结果是什么？
(num2 = num1)的结果是num1的值；

var num1 = 100;
var num2 = 0;
var result = (num2 = num1);
console.log(result); // 100

我们来下面的函数赋值结果：
赋值(obj2.foo = obj1.foo)的结果是foo函数；
foo函数被直接调用，那么是默认绑定；

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

var obj1 = {
  name: "obj1",
  foo: foo
}; 

var obj2 = {
  name: "obj2"
}

obj1.foo(); // obj1对象
(obj2.foo = obj1.foo)();  // window

3. ES6箭头函数

在ES6中新增一个非常好用的函数类型：箭头函数
这里不再具体介绍箭头函数的用法，可以自行学习。
箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。
我们来看一个模拟网络请求的案例：
这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
我们需要拿到obj对象，设置data；
但是直接拿到的this是window，我们需要在外层定义：var _this = this
在setTimeout的回调函数中使用_this就代表了obj对象

var obj = {
  data: [],
  getData: function() {
    var _this = this;
    setTimeout(function() {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

上面的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：
为什么在setTimeout的回调函数中可以直接使用this呢？
因为箭头函数并不绑定this对象，那么this引用就会从上层作用域中找到对应的this

var obj = {
  data: [],
  getData: function() {
    setTimeout(() => {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

思考：如果getData也是一个箭头函数，那么setTimeout中的回调函数中的this指向谁呢？
答案是window；
依然是不断的从上层作用域找，那么找到了全局作用域；
在全局作用域内，this代表的就是window

var obj = {
  data: [],
  getData: () => {
    setTimeout(() => {
      console.log(this); // window
    }, 1000);
  }
}

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