js学习笔记——this关键字

js 关键字 this 用法解析

解释

函数运行时自动生成的一个内部对象，只能在函数内部使用（想起了 Python 函数的 self）

function test() {
  this.x = 1;
}

函数使用场合不同，this 的值会发生变化

但 this 总指的是调用函数的那个对象

使用场景

1. 纯粹函数调用（全局调用）

2. 函数作为对象方法的调用

3. 作为构造函数调用

4. apply 调用

1.纯粹函数调用

全局性调用，this 代表全局对象 Global

function test() {
  this.x = 1;
  alert(this.x);
}

test();

1

var x = 1;
function test() {
  alert(this.x);
}

test();

1

不会报错，因为相当于 alert(Global.x)

var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);

0

test()之后相当于将全局变量的 x 重新赋值 0，Global.x = 0

2.作为对象方法的调用

函数作为某个对象 o 的方法，this 指的是这个上级对象 o

function test() {
  alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m();

1

此时 test()函数作为对象 o 的方法，则 test 方法中的 this 指的是 o 这个对象

3.作为构造函数调用

构造函数：通过这个函数生成一个新对象（object），此时 this 指这个新对象

function test() {
  this.x = 1;
}

var o = new test();
alert(o.x);

1

this 就是当前通过构造函数生成的对象 o

var x = 2;
function test() {
  this.x = 1;
}
var o = new test();
alert(x);
alert(o.x);

2
1

构造函数赋值的 x 是 o 的变量 x，而不是全局变量 x

以上三个很明显都是围绕调用函数的对象

4.apply 调用

apply 是函数对象的一个方法，作用是改变函数的调用对象

第一个参数表示改变后的调用这个函数的对象，this 指的就是这第一个参数

var x = 0;

function test() {
  alert(this.x);
}

var o = {};

o.x = 1;
o.m = test;
o.m.apply();

0

apply()参数为空时，默认调用全局对象（此时 this 指的是全局对象）

全局对象的 x 是 0

其实还是实际调用函数的那个对象

var x = 0;

function test() {
  alert(this.x);
}

var o = {};

o.x = 1;
o.m = test;
o.m.apply(o);

1

改变调用这个函数的对象，虽然本来调用 test 函数的对象就是 o

但是如果调用 apply 函数不填参数，就会变成全局对象去调用 test 方法

总结

Is that clear?

一句话总结：this 就是调用函数的那个对象