Javavscript基础——this指向

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

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

敲黑板

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

严格模式

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

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

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

直接调用

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(); // 输出2var 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(); // 输出3a.c = a.b.c;a.c(); // 输出2var 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为undefinedconsole.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(); // 输出1fb(); // 输出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); // 输出1f.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(); // 输出1b.a.call({n:3}); // 输出1

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

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

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

结尾

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

更多相关文章

随机推荐