前言

笔记来源：拉勾教育大前端高薪训练营
笔记内容：关于 this 指向，可能出现的情况
运行环境：主要介绍浏览器运行环境

在学习和使用 JavaScript 的过程中，总是对 this 的指向问题特别模糊。希望对有相同烦恼的朋友有所帮助。

this 总结

一，沿着作用域向上找最近的一个 function（不是箭头函数），看这个 function 最终是怎样执行的；

二，this 的指向取决于所属 function 的调用方式，而不是定义；

三，function 调用一般分为以下几种情况：

1，作为函数调用，即：foo()

代码示例如下：
```
  // 没有调用时，this 指向谁都有可能function foo () {console.log(this);}foo()  // this => 全局对象(浏览器：window / Node: Global / ES2020: globalThis)
```
结论

由于不同环境下的全局对象不同，作为函数调用时， this 指向全局对象（globalThis），注意严格模式问题，严格模式下是 undefined。

2，作为方法调用，即：foo.bar() / foo.bar.baz() / foo['bar'] / foo[0]()(<=>foo.0())

代码示例一如下：

  const foo = {bar1: function () {console.log(this);},bar2: {baz: function () {console.log(this);}}}foo.bar1()  // this => foofoo.bar2.baz() // this => foo.bar2foo['bar1']    // this => fooconst fn = foo.bar1 // 将 foo.bar1 的内存地址赋值给 fnfn()                // this => window

代码示例二如下：

  const obj2 = {foo: function () {console.log('foo: ', this) // this => obj2.foofunction bar () {console.log('bar: ', this);     // this => 全局对象}bar()}}obj2.foo()

结论

作为方法调用时，this 指向最终调用这个方法的对象。

3，作为构造函数调用，即：new Foo()

代码示例如下：
```
  function Foo () {console.log(this)}const foo = new Foo() // this => Foo {} => foo
```
结论

作为构造函数调用时，this 指向一个新对象 Foo {}
4，特殊调用，即：foo.call() / foo.apply() / foo.bind()

代码示例如下：
```
  // 没有调用时，this 指向谁都有可能const o = {  }function foo () {console.log(this);}foo.call(1);     // this => 1foo.apply(o);    // this => ofoo.bind(o)();   // this => o，bind 返回函数实例，需要手动调用
```
结论

使用 apply、call 或 bind 进行特殊调用时，会改变 this 的指向。此时， this 指向参数指定成员。

apply、call、bind 使用方式参见：【apply 、call、bind】

找不到所属的 function，就是全局对象

练习代码如下：

   var length = 10function fn () {console.log(this.length)}const obj = {length: 5,method (fn) { // this => windowfn()        // this.length => window.length => 10arguments[0]()  // arguments.0 => fn => this => arguments 对象 // this.length => arguments.length => 3}}obj.method(fn, 1, 2)

其他环境补充

Node.js 环境

由于文件代码中最顶层的作用域实际上是一个伪全局环境，所以最顶层的 this 并不指向全局对象，this 实际指向的是 module.exports 。

严格模式

严格模式下，原本应该指向全局的 this 都会指向 undefined。

JavaScript -- this 总结相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...

JavaScript -- this 总结

前言

this 总结

其他环境补充

Node.js 环境

严格模式

JavaScript -- this 总结相关推荐

最新文章

热门文章