课堂知识点整理

this关键字的含义

this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。

简单说，this就是属性或方法“当前”所在的对象。

this.property

上面代码中，this就代表property属性当前所在的对象。

下面是一个实际的例子。

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：张三"

上面代码中，this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '张三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：张三"
B.describe() // "姓名：李四"

上面代码中，函数f内部使用了this关键字，随着f所在的对象不同，this的指向也不同。

只要函数被赋给另一个变量，this的指向就会变。

再看一个网页编程的例子。

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    console.log('Invalid Value!');
}
</script>

上面代码是一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此this就代表传入当前对象（即文本框），然后就可以从this.value上面读到用户的输入值。

总结一下，JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。这本来并不会让用户糊涂，但是 JavaScript 支持运行环境动态切换，也就是说，this的指向是动态的，没有办法事先确定到底指向哪个对象，这才是最让初学者感到困惑的地方。

实质

JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。

this的设计目的就是在函数体内部，指代函数当前的运行环境。

使用场合

（1）全局环境

全局环境使用this，它指的就是顶层对象window。

this === window // true

function f() {
  console.log(this === window);
}
f() // true

不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window。

（2）构造函数

构造函数中的this，指的是实例对象。

var Obj = function (p) {
  this.p = p;
};

（3）对象的方法

如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

但是，这条规则很不容易把握。

使用注意点

（1） 避免多层 this

由于this的指向是不确定的，所以切勿在函数中包含多层的this。

一个解决方法是在第二层改用一个指向外层this的变量。

var o = {
  f1: function() {
    console.log(this);
    var that = this;
    var f2 = function() {
      console.log(that);
    }();
  }
}

o.f1()
// Object
// Object

上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

事实上，使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。

JavaScript 提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的this指向顶层对象，就会报错。

var counter = {
  count: 0
};
counter.inc = function () {
  'use strict';
  this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property 'count' of undefined

上面代码中，inc方法通过use strict声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。

（2） 避免数组处理方法中的 this

数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

解决这个问题的一种方法，就是前面提到的，使用中间变量固定this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    var that = this;
    this.p.forEach(function (item) {
      console.log(that.v+' '+item);
    });
  }
}

o.f()
// hello a1
// hello a2

另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2

（3）避免回调函数中的 this

回调函数中的this往往会改变指向，最好避免使用。

var o = new Object();
o.f = function () {
  console.log(this === o);
}

// jQuery 的写法
$('#button').on('click', o.f);

上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。

为了解决这个问题，可以采用下面的一些方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。

绑定 this 的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

关键点

1. this始终指向调用该函数的对象；
2. 若没有指明调用的对象，则顺着作用域链向上查找，最顶层为global（window）对象；
3. 箭头函数中的this是定义函数时绑定的，与执行上下文有关
4. 简单对象（非函数、非类）没有执行上下文；
5. 类中的this，始终指向该实例对象；
6. 箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

箭头函数中的this

箭头函数中的this是定义函数时绑定的，而不是在执行函数时绑定。若箭头函数在简单对象中，由于简单对象没有执行上下文，所以this指向上层的执行上下文；若箭头函数在函数、类等有执行上下文的环境中，则this指向当前函数、类。

1）箭头函数在普通对象中

var code = 404;
let obj = {
    code: 200,
    getCode: () => {
    	console.log(this.code);
    }
}
obj.getCode(); // 404

在箭头函数中，this 的值是在定义函数时确定的，而不是在运行时确定的。
在这个例子中，箭头函数 getCode 是在对象 obj 定义时创建的，而不是
在调用 obj.getCode() 的时候。

箭头函数中的 this 指向的是外层的词法作用域的 this 值，而不是指向
调用它的对象。在全局作用域中，this 指向的是全局对象（在浏览器环境
中通常是 window 对象）。所以，当箭头函数中使用 this.code 时，它
实际上是引用全局作用域中的 code 变量，其值为 404。

2）箭头函数在函数中

var code = 404;
function F() {
    this.code = 200;
    let getCode = () => {
    	console.log(this.code);
    };
    getCode();
}
var f = new F() //200
var f = F() //构造函数没有new调用，就成为了一个普通函数
console.log(f)
console.log(code)

3）箭头函数在类中

var code = 404;
class Status {
    constructor(code) {
    	this.code = code;
    }

    getCode = () => {
    	console.log(this.code);
    };
}
let status = new Status(200);
status.getCode(); // 200