博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用最简单的方法判断JavaScript中this的指向
阅读量:6792 次
发布时间:2019-06-26

本文共 2718 字,大约阅读时间需要 9 分钟。

目录

* 一个特例* 开始判断    * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外)    * 法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this    * 法则三:箭头函数以及非指向对象方法中的function的情况下this指向window* 习题集    * 普通函数中的this    * 函数执行后返回另外一个函数中的this(普通函数中)    * 多层嵌套函数中的this(定时器&箭头函数)1    * 多层嵌套函数中的this(定时器&箭头函数)2

一个特例

在正式开始之前,我们先来说一个特例。

// 构造函数function Student(name) {  this.name = name}// 创建小明和小红两个实例var XM = new Student('xiaoming')var XH = new Student('xiaohong')// 输出信息console.log(XM)  // Student {name: "xiaoming"}console.log(XH)  // Student {name: "xiaohong"}

在构造函数中,this上的值会在创建实例的时候被绑定到新创建的实例上。不适用于下面的判断方法,所以特此说明。

开始判断

下面是一个典型例子,我们的分析从这里开始。

var x = {  name: 'bw2',  getName1: function() {    console.log(this)  },  getName2: function() {    setTimeout(() => {      console.log(this)    },0)  },  getName31: () => {    console.log(this)  },  getName32: function() {    return function() {      console.log(this)    }  }}x.getName1()  // {name: "bw2", getName1: ƒ}x.getName2()  // {name: "bw2", getName1: ƒ}x.getName31()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}x.getName32()()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

法则一:对象方法中的this指向对象本身(箭头函数形式的除外)

var x = {  name: 'bw2',  getName1: function() {    console.log(this)  }}x.getName1()  // {name: "bw2", getName1: ƒ}

法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this

箭头函数没有独立的this作用域,所以继续往外层走,走到了getName: function(){}。那么就是他了,this指向等同于这个function内部的this指向。根据法则一,this指向对象本身。

var x = {  name: 'bw2',  getName2: function() {    console.log(this)  // 等同于此处的this    setTimeout(() => {      console.log(this)  // 原始的this位置    },0)  }}x.getName2()  // {name: 'bw2', getName1: ƒ}

我们可以试着在浏览器中运行,看看结果。

法则三:箭头函数以及非指向对象方法中的function的情况下this指向window

根据法则二,this是指向最近的function,因此,这里的this等同于返回的函数中的this,不是对象方法中的this,所以,指向全局。

是不是感觉有点奇怪?不过实践证明确实如此。

var x = {  name: 'bw2',  getName31: () => {    console.log(this)  },  getName32: function() {    return function() {      console.log(this)    }  }}x.getName31()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}x.getName32()()  // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

习题集

欢迎大家按照法则一到三依次判断,猜测结果,并在浏览器下测试。测试结果也可以回复,大家一起讨论。

因本人能力有限,该系列法则可能在部分情况下失效。欢迎大家一起讨论。

下面是做题时间。

普通函数中的this

function x() {  console.log(this)}x()

函数执行后返回另外一个函数中的this(普通函数中)

function xx(){  return function() {    console.log(this)  }}xx()()

多层嵌套函数中的this(定时器&箭头函数)1

var x = {  name: 'bw2',  getName: () => {    setTimeout(() => {      console.log(this)    },0)  }}x.getName()

多层嵌套函数中的this(定时器&箭头函数)2

var x = {  name: 'bw2',  getName: () => {    setTimeout(function() {      console.log(this)    },0)  }}x.getName()

再次说明,该法则为实验性法则,未进行大范围的测试,不保证在所有情况下都有一致的结果。如果你发现了法则判断失败的情况,欢迎留言,一起探讨。

欢迎关注前端进阶指南微信公众号:

前端进阶指南

另外我也创了一个对应的QQ群:660112451,欢迎一起交流。

转载地址:http://mqogo.baihongyu.com/

你可能感兴趣的文章
SQL Server里ORDER BY的歧义性
查看>>
Hadoop之父Doug Cutting:Lucene到Hadoop的开源之路
查看>>
Autodesk云计算-- HomeStyler在线家居设计平台
查看>>
linux rtc 接口【转】
查看>>
3. 文件系统管理
查看>>
Visual Prolog 的 Web 专家系统 (6)
查看>>
一个IT学生的personal statement
查看>>
request_mem_region 与 ioremap【转】
查看>>
项目绩效考核体系指标建设图表
查看>>
ASP.NET MVC 2.0 中文正式版发布
查看>>
GNU make manual 翻译(七十八)
查看>>
【原创】开源Math.NET基础数学类库使用(17)C#计算矩阵条件数
查看>>
Python快速教程
查看>>
实例演示Android异步加载图片
查看>>
filebeat.yml(中文配置详解)
查看>>
激活另一个进程
查看>>
[]leetcode]Unique Paths II
查看>>
PHP JSON_ENCODE 不转义中文汉字的方法
查看>>
Ubuntu & GitLab CI & Docker & ASP.NET Core 2.0 自动化发布和部署(2)
查看>>
错误Name node is in safe mode的解决方法
查看>>