Javavscript基础——this指向

2019年9月27日 · 374 字 · 2 分钟

本文研究一下Javascript的this指向。

Javascript的this指向问题，有些人可能觉得很简单，有些人却觉得扑朔迷离，看完本文之后相应会对this的掌握有一个直观的判断，而不是"开局全靠猜"。

敲黑板

function函数this指向由调用方式确定，跟定义环境无关。
箭头函数this指向由定义环境决定，与调用方式无关，也不可以bind(this)。

严格模式

非严格模式下，全局作用域下的this指向window
严格模式下，全局作用域下的this指向undefined

以下讨论均为非严格模式，这个不影响今天的讨论。

实践

说结论往往是让人难以理解的，下面通过不同的调用场景对this做一个说明。

1. 直接调用

function test() {
  console.log(this);
}
test(); // 输出undefined

直接调用是最简单的，大部分人在这里都能回答的很好。

总结

直接调用时this指向全局作用域。
非严格模式this指向window
严格模式this指向undefined

2. 对象调用

'use strict'
var n = 1;
var a = {
  n: 2,
  b: function() {
  	console.log(this.n);
  }
};

a.b(); // 输出2
var b = a.b;
b(); // 输出1

面试题：请问上述例子输出什么?

非严格模式下，输出2和1，严格模式下输出2和一个报错(this指向undefined，访问undefined的n属性肯定报错)

那如果你这么回答，满分!

分析

知其然还要知其所以然，我们分析一下：

为什么输出2?

因为a.b()是对象调用方式，所以b()中的this指向a

为什么输出1?

这个非常有意思，而且也很有迷惑性，面试的时候经常问到，也经常有人被问倒。

var b = a.b

把a.b赋值给变量b，b就是一个函数，请注意: 这里只是赋值，没有调用，所以b中的this指向还不确定。

b();

调用函数b，这是什么调用方式? 普通调用，所以this指向全局作用域。

总结

对象调用方式下this指向调用对象。

是否GET? 如果没有GET，请关注公众号NodeJs之路，我在线给你答疑。

开胃菜已经吃了，下面来点"有难度的(实际上也没啥难度)"。

3. 嵌套对象调用

var n = 1;
var a = {
  n: 2,
  b: {
    n: 3,
    c: function() {
      console.log(this.n)
    }
  }
};

面试题：请问上述例子中function中的this指向哪里?

正确答案：未确定调用环境的情况下，this的指向不确定。
错误答案：指向a.b对象，Too young too simple!

var n = 1;
var a = {
  n: 2,
  b: {
    n: 3,
    c: function() {
      console.log(this.n)
    }
  }
};

a.b.c(); // 输出3

a.c = a.b.c;
a.c(); // 输出2

var c = a.b.c; 
c(); // 输出1

这道题跟之前那道对象调用很像。

为什么输出3?

对象调用方式下指向调用对象，a.b.c()中c()是通过a.b对象调用，指向对象a.b

为什么输出?

a.c = a.b.c 给a对象定义一个函数c，注意，此时没有调用！this指向不确定
a.c() 通过a对象来调用c()，所以this指向对象a

为什么输出1？

var c = a.b.c 函数赋值给普通变量，注意，此时没有调用!
c(); 普通方式调用，指向window

总结

嵌套对象调用方式下，this指向最终调用函数的对象。

a.b.c.d.e.f.g.h() h函数中的this指向a.b.c.d.e.f.g

4. 构造函数方式调用

var name = 1;
function Person() {
  this.name = 2;
}

var p1= Person(); // p1为undefined
console.log(p1.name); // 报错

var p2 = new Person();
console.log(p2.name); // 输出2

p1为什么是undefined?

这道题比较坑，跟调用方式和this指向无关，因为Person函数没有返回值，js中，默认会返回undefined.

p2.name为什么是2?

使用new操作符时，构造函数的返回值默认指向对象实例，所以p2.name就是Person()中的this.name

如果在Person()函数中加上return this的话，Person()返回值还是this，因为这是普通调用。

5. 构造函数中指明返回值

原则上构造函数不应该有返回值，但是如果真的写了会怎么样？我们来探讨一下。

返回复杂对象

function Person() {
  this.name = 2;
  return {};
}
var p1 = new Person();
console.log(p1.name)// 输出undefined

返回简单对象

虽然Js只有对象，但是有一些如string,number这种一般叫做简单对象,date,regex,array,object等等叫复杂对象。

function Person() {
  this.name = 2;
  return 1;
}
var p1 = new Person();
console.log(p1.name)// 输出2

返回null

使用typeof null返回的是[object]，证明null是个对象，不过咱们来看看构造函数返回null的表现。

function Person() {
  this.name = 2;
  return null;
}
var p1 = new Person();
console.log(p1.name)// 输出2

总结

构造函数中this指向对象实例本身，如果构造函数指明了返回值，那么表现如下：

返回普通值，this指向不变，还是对象实例本身
返回复杂对象，this指向新对象，也就是你new Person()返回的是那个新对象

6. bind

  var a = {
    n: 1
  };
  var b = {
    n: 2
  }
  function f() {
    console.log(this.n);
  }
  var fa = f.bind(a);
  var fb = fa.bind(b);

  fa(); // 输出1
  fb(); // 输出1

第1个输出1应该不难理解，bind可以更改function内部的this指向。多次bind已经bind过的函数，this指向不变。

bind的实现原理有点复杂，将在下一篇文章进行详细解读。

总结

bind可以手动绑定function的this，this指向第1次bind时的this。

7. apply/call

这两个函数在this指向上表现一致，放到一起讲

  var a = {
    n: 1
  };
  var b = {
    n: 2
  }
  function f() {
    console.log(this.n);
  }
  f.call(a); // 输出1
  f.apply(b); // 输出2

call和apply的第1个参数为function执行时的this，这个this是确定的，对未使用过bind的函数进行多次apply/call，this指向都会改变。

8. 箭头函数

var n = 1;
var b = {
  n: 2,
  a: () => {
    console.log(this.n);
  }
}
b.a(); // 输出1
b.a.call({n:3}); // 输出1

b.a定义时的this和n,b所在的this一致，默认情况下为全局作用域

箭头函数的this指向定义时所在的this，这个是明确的，但是如果定义时所在的是1个function，那么this指向同上面7点。

说下我之前学JS遇到过的问题: ES5下function才会有作用域隔离, {}这种玩意不会隔离作用域。

结尾

直接调用this指向全局作用域window，严格模式指向undefined
对象调用方式指向调用对象
嵌套对象调用方式指向最终调用对象(离function最近的那个)
构造函数方式调用指向对象实例
1. 构造函数返回String/Number等简单类型时this指向不变，返回null指向也不变
2. 构造函数返回Object/Array等复杂对象时，new Person()的返回值为return的对象
bind可以更改function的this,一经绑定，永不改变。但是并不执行函数
apply/call可以更改没有被bind过的this
箭头函数的this指向为定义箭头函数的this

HTTPS协议是如何保证安全的? Javavscript基础——原型和原型链