javascript（JS） 0基础快速入门 （二）（this指向问题）_js无法使用this

this

函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。

解析器在调用函数时每次都会向函数内部递进一个隐含参数

当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。

这个对象我们称为函数执行的上下文对象

全局上下文

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"
1
2
3
4
5
6
7
8
9

函数上下文

在函数内部，this的值取决于函数被调用的方式。

因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象，浏览器中就是 window。

严格模式下则为undefined

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === globalThis;

// 然而，在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined，如下：

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

改变函数的调用对象

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

var obj  = {  name:"xxx" ,  sayName:fun };

obj.sayName(); //  {  name:"xxx" ,  sayName:fun }
//直接用fun （）显示的是object  window
1
2
3
4
5
6

类上下文

this 在 类 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。

在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：

class Example {
  constructor() {
    console.log(this); //  Example{}
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  } 
  first(){} 
  second(){}  
 //  constructor 、 first 、second 这些方法都会添加到this 的原型上，可以通过 类实例访问到
  static third(){} //  不会添加到this 原型上，添加到类本身的属性上，通过 Example.third访问
}

new Example(); // ['constructor', 'first', 'second']
console.log(Example.first); //  undefined
console.log(Example.third); //  func()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

备注：静态方法不是 this 的属性，它们只是类自身的属性。

派生类

不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。在构造函数中调用 super（） 会生成一个 this 绑定，并相当于执行如下代码，Base为基类：

警告：在调用 super() 之前引用 this 会抛出错误。

派生类不能在调用 super() 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数

class Example {
  constructor() {
  }
  first(){}
  static third(){}
}
class A extends Example{
  constructor(){
      console.log(this); // 报错this
    super()  // 不调用super（）则this会报错
    console.log(this); // 输出 A {}
  }
}
new A()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

this 使用示例

call（） apply（） 使用

区别

apply（第二个参数为数组）

function add(c, d) {
  return this.a + this.b + c + d;
	// this call、apply调用时改this为 o 对象故能取到 o 对象上的属性值
}

var o = {a: 1, b: 3};

call（）
// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16
apply（）
// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数 
add.apply(o, [10, 20]); // 34
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。
null 和 undefined 被转换为全局对象。
原始值如 7 或 'foo' 会使用相应构造函数转换为对象。
因此 7 会被转换为 new Number(7) 生成的对象，字符串 'foo' 会转换为 new String('foo') 生成的对象。

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object window]

function bar() {
   console.log(this);
}
bar.call(7);     // Number{7}
bar.call('foo'); // String{'foo'}
bar.call(undefined); // 全局window{}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

bind 方法

ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
1
2
3
4
5
6
7
8
9
10
11
12

---

箭头函数

在箭头函数中，this 永远指向它所处环境的最近的this 。在全局代码中，它将被设置为全局对象：

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

备注：如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。

// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true
1
2
3
4
5
6
7
8
9
10
11

无论如何，foo 的 this 被设置为他被创建时的环境（在上面的例子中，就是全局对象）

var obj = {
  bar: function() {
    var x = (() => this);
    return x; // 返回一个this
      // 它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

作为对象的方法

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // 37
1
2
3
4
5
6
7
8
9

this 的绑定只受最接近的成员引用的影响。

o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42
1
2

原型链中的 this

var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4
console.log(p);// {a:1,b:4} __proto__  {f:func}
1
2
3
4
5
6
7
8
9

对象 p 没有属于它自己的 f 属性，它的 f 属性继承自它的原型。
虽然最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。
也就是说，因为f是作为p的方法调用的，所以它的this指向了p。

---

作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

备注：虽然构造函数返回的默认值是 this 所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 this 对象）。

/*
 * 构造函数这样工作:
 *
 * function MyConstructor(){
 *   // 如果函数具有返回对象的return语句，
 *   // 则该对象将是 new 表达式的结果。
 *   // 否则，表达式的结果是当前绑定到 this 的对象。
 *   //（即通常看到的常见情况）。
 * }
 */

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38}; //  该对象将是 new 表达式的结果。会将this绑定为该对象
}

o = new C2();
console.log(o.a); // logs 38
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在刚刚的例子中（C2），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句 “this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）

---

作为 DOM 事件处理函数

当函数被用作事件处理函数时，它的 this 指向触发事件的元素（一些浏览器在使用非 addEventListener 的函数动态地添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

作为一个内联事件处理函数

当代码被内联 on-event 处理函数 (en-US) 调用时，它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>
// 上面的 alert 会显示 button。注意只有外层代码中的 this 是这样设置的：
1
2
3
4

<button onclick="alert((function(){return this})());">
  Show inner this
</button>
// 在这种情况下，没有设置内部函数的 this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置 this 时指向的默认对象）。
1
2
3
4

---

getter 与 setter 中的 this

再次，相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
    // 在对象o中定义一个getter方法 的简写
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};
//  在o对象中定义一个sum键，值为一个getter sum函数
Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});
//  o.average 等于调用 o 的get average 方法返回一个 （1+2+3）/3 的值
// o.sum 等于调用 o 对象里的get sum 方法返回 1+2+3
console.log(o.average, o.sum); //  2, 6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

类中 this

和其他普通函数一样，方法中的 this 值取决于它们如何被调用。
有时，改写这个行为，让类中的 this 值总是指向这个类实例会很有用。
为了做到这一点，可在构造函数中绑定类方法：

class Car {
  constructor() {
    // 绑定了 sayBye函数 而不绑定 sayHi 函数来展示不同的区别 
    this.sayBye = this.sayBye.bind(this);
  }
  sayHi() {
    console.log(`Hello from ${this.name}`);
  }
  sayBye() {
    console.log(`Bye from ${this.name}`);
  }
  get name() {
    return 'Ferrari';
  }
}

class Bird {
  get name() {
    return 'Tweety';
  }
}

const car = new Car();
const bird = new Bird();

// 函数里的this 取决于调用它的人
car.sayHi(); // Hello from Ferrari
//  往bier 实例对象上添加一个Car 身上的 sayHi 方法使用
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// 但是 对于绑定了 this 的函数，它的this 不取决于调用它的人
bird.sayBye = car.sayBye;
bird.sayBye();  // Bye from Ferrari
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

备注：类内部总是严格模式。调用一个 this 值为 undefined 的方法会抛出错误。