博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于javascript的this指向问题
阅读量:6822 次
发布时间:2019-06-26

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

JavaScript中的this关键词是使很多程序员的一个头痛的问题,很多人都会选择其他代替的方法来逃避this的问题,接下来会给出一些this的用例子(例子都是在浏览器坏境下执行),来说明this分别指向谁。

首先要知道每个函数的this是在调用时被绑定的,完全取决于函数的调用位置(也就是函数的调用方法)

例子1

var obj = {      say: function () {        setTimeout(() => {          console.log(this) // obj        }, 0)      }    }    obj.say()复制代码

上面例子的setTimeout中是箭头函数,在箭头函数中的this和上一级指向是同一个。上面代码可以写成

var obj = {      say: function () {        let _self = this        setTimeout(() => {          console.log(_self)         }, 0)      }    }    obj.say()复制代码

这里是obj调用的say,所以say这个函数中的this是指向obj的,也就是_self是obj,那么上面的例子中的this是指向obj的。

例子2

function test() {      console.log(this) // Window    } test()复制代码

该例子中的this指向的是Window,test() 相当于 window.test()

例子3

var obj = {        say: function () {          function _say() {            console.log(this) // Window          }          return _say.bind(obj)        }       }      obj.say()复制代码

该列子中的this指向的是Window,要理解这个this要先了解这个代码的执行顺序

第一步:var obj; 声明变量第二步: _say.bind(obj)  给say赋值  这步的时候obj为undefinde第三步 obj = {...} 给obj赋值复制代码

这里有句话说obj.bind(arg) arg为mull 和 undefinde 时 obj函数中的this是指向Window的。

例子4

var obj = {} obj.say = function () {        function _say() {          console.log(this)  // obj        }        return _say.bind(obj)      }()      obj.say()复制代码

该例子和上一个很相似,区别是 执行 _say.bind(obj) 该代码时 参数obj不一样,上面为 undefinde,而在该例子中执行bind时obj已经赋值{},所以该例子中的this为obj

结尾

最后关于this问题《你不知道的JavaScript》中有非常详细的说明。

转载于:https://juejin.im/post/5b37a284e51d455885770ef8

你可能感兴趣的文章
SSO单点登录学习总结(1)——单点登录(SSO)原理解析
查看>>
Windows学习总结(12)——Windows 10系统开始运行-cmd命令大全
查看>>
SSD(Single Shot MultiBox Detector)二读paper
查看>>
单元测试过程
查看>>
python之zip打包
查看>>
一个leetcode解题报告类目,代码很简洁
查看>>
C++中一些类和数据结构的大小的总结
查看>>
JEECMSV9导入IDEA,经历一番折腾,终于可以了。
查看>>
关于数字取整、四舍五入
查看>>
Java和MongoDB之Hello World
查看>>
网站前端性能优化常用几种方式
查看>>
#iOS问题记录#UITableView加载后直接滑动倒最底部
查看>>
拒绝从入门到放弃_《Openstack 设计与实现》必读目录
查看>>
阅读笔记《梦断代码》其三
查看>>
yarn-1.12.3.msi 下载地址 百度网盘
查看>>
Git二进制文件冲突解决
查看>>
springcloud(十二):使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪
查看>>
(2):Mysql 查看、创建、更改 数据库和表
查看>>
团队任务,团队报告。
查看>>
mysql 按出现次数排序
查看>>