详解this绑定

发表于 | 分类于 | 本文总阅读量 次
字数统计: 1,542 | 阅读时长 ≈ 7

前言

与python等其他的编程语言相比，this 关键字在 JavaScript 中的表现有所不同，是否是严格模式也会影响this的绑定；这里面套路众多，一不小心就可能出错，而且this作为动态作用域的表亲，与JavaScript的词法作用域差别很大，因此很多人称它为JavaScript的一个大坑。（我也是这样认为的，2333）

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。在此我们主要讨论一下较为常见的几种调用方式和在ES6中的箭头函数中的this。

注：这篇文章是我写的最早的文章之一了是个笔记，因此有点啰嗦和局限性，看完《你不知道的JavaScript》后，总结起来this大致也就四种情况：

  • 默认绑定（window）
  • 隐式绑定(对象的方法)
  • 显示绑定（call,apply,bind）
  • new绑定

优先级自下而上。而且在平常日常开发中也尽量少用this（少用，不代表不用），以免在他人（或者很久以后的自己）在维护代码的时候理解错误~（箭头函数是个好东西）

几种较为常见的调用方式：

1.在全局范围内使用this，它将会指向全局对象即window.

1
2
3
4
5
6
7
8
var a = 1;
console.log(this.a);  // 1

console.log(this === window); // true

this.b = "hello,world";
console.log(window.b);  // "hello,world"
console.log(b);         // "hello,world"

2.在函数中调用时，也会指向全局对象。而在node中则指向global：

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 1;
function fn(){
  var a = 2;
  console.log(a);
}
fn(); //1

//所以要注意的是：
//在浏览器中：
fn() === window;

//在Node中：
fn() === global;

要注意的是在ES5的严格模式下，不存在全局变量。this将保持他进入执行上下文时的值，这种情况下this将会是undefined:

1
2
3
4
5
6
7
"use strict"
function fn(a){
    console.log(this);
}
fn(1);   //undefined

fn() === undefined; // true

3.方法调用text.foo(); 在这个例子时this指向text对象。要注意的是这样的行为，根本不受函数定义方式或位置的影响。而且this 的绑定只受最靠近的成员引用的影响

1
2
3
4
5
6
7
8
9
10
11
12
var text = {
  num: 1,
  foo: function() {
    return this.num;
  }
};

console.log(text.foo()); // 1

fn = text.foo;
text.a = {b: fn, num: 2};
console.log(text.a.b()); // 2

4.当一个函数用作构造函数时，它的this就会被绑定到正在构造的新对象中：

1
2
3
4
5
6
function Person(age){
  this.age = age;
}

var jake = new Person(18);
jake.age; //18

5.当使用call或者apply方法时，函数内的this将会被显式设置为函数调用的第一个参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//对象也可以作为call和apply传入的第一个参数，且this会显式的设置为该对象
var obj = {a: 1};

// 这个属性是在global对象定义的。
var a = 2;

function fn() {
  // this的值取决于函数的调用方式
  return this.a;  
}

fn();          // 2
fn.call(obj);  // 1
fn.apply(obj); // 1

用 call 和 apply 函数的时候还要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。

6.调用obj.bind()时可以创建一个与obj有着相同函数体和作用域的函数，但this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

1
2
3
4
5
6
7
8
var obj = {name: 'Jake'};
function sayName(){
    console.log(this.name)
};
var fn = sayName.bind(obj);  
// 注意 这里 fn还是一个函数
//功能和 sayName 一模一样，区别只在于它里面的 this 是 obj
fn() // 输出： 'Jake'

7.原型链中的 this仍然指向调用它的对象，这很好理解：

1
2
3
4
5
6
7
8
9
10
var fn = {
  add : function(){ 
    return this.a + this.b; 
  }
};
var p = Object.create(fn);
p.a = 1;
p.b = 2;

console.log(p.add()); // 3

8.当函数被用作事件处理函数时，它的this指向触发事件的元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 被调用时，将关联的元素变成蓝色
  function bluify(e){
    //在控制台打印出所点击元素
    console.log(this);
    //阻止时间冒泡
    e.stopPropagation();
    //阻止元素的默认事件
    e.preventDefault();      
    this.style.backgroundColor = '#A5D9F3';
  }
  // 获取文档中的所有元素的列表
  var elements = document.getElementsByTagName('*');

  // 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
  for(var i=0 ; i<elements.length ; i++){
    elements[i].addEventListener('click', bluify, false);
  }

箭头函数

由于this的高复杂性，this绑定也成为了JavaScript中最常出错的因素之一。因此在ES6中的箭头函数没有了this绑定，必须通过查找作用域链来决定其值，而在全局代码中，它将被设置为全局对象：

1
2
3
var obj = this;
var foo = (() => this);
console.log(foo() === obj); // true

由于箭头函数不绑定this，所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this毫无影响。

1
2
3
4
5
6
7
8
9
//接着上面的代码

var a = {foo: foo};
console.log(a.foo() === obj); // true
// 用call来绑定this
console.log(foo.call(a) === obj); // true
// 用call来绑定this
foo = foo.bind(a);
console.log(foo() === obj); // true

考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。（可以忽略是否在严格模式下的影响）

1
2
3
4
5
6
var a = () => {'use strict'; return this};
var b = () => { return this};
console.log(1,a() === window);
console.log(2,a() === b());
//1 true
//2 true

而当箭头函数作为方法调用时，this会是怎样的呢？

1
2
3
4
5
6
7
8
9
var obj = {
  a: 1,
  b: () => console.log(this.a, this),
  c: function() {
    console.log( this.a, this)
  }
}
obj.b();  // undefined Window{postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,…}
obj.c();  // 1 {a: 1, b: ƒ, c: ƒ}

可以看到的是作为方法的箭头函数this指向全局对象(window)，而普通函数中的this则指向调用它的对象。