一分钟秒懂this
来源:互联网 发布:java类静态变量初始化 编辑:程序博客网 时间:2024/05/07 01:19
关于 this,很多小伙伴可能都会很痛苦,或许还会遇到这样那样的问题。
那么,如何快速的理解和掌握 this 的运用呢?
等你看完我这篇文章,相信你一定会有一种豁然开朗的感觉。
对于 this,你只需要记住这样一句话:
this 初始的时候并不具有指向性,
只有「当它所在的函数被调用的时候,this 会指向调用方。」
看完我下面的例子,你一定会瞬间秒懂~
var d = { a: function (n) { console.log(this.c) }, c: 'd.c' } var c = 'window.c'; d.a();
你还记得我刚才说的那句话吗?
this 在一开始定义的的时候并不具有指向性,
只有「当它所在的函数被调用的时候,this 会指向调用方。」
在这段代码中,this 所在的函数是 a,在最后一行,通过d.a()
调用,这时,this 会指向调用 a 函数的人,也就是 d,所以,console.log(this.c)
这句话就会变成console.log(d.c)
,所以最后控制台打印出来的结果就是d.c
怎么样?是不是很简单呢?我们再来看下面这一段代码。
var d = { a: function (n) { n() }, c: 'd.c' } var c = 'Window.c'; d.a(function () { console.log(this.c) });
我们用同样的方式来分析,this
所在的函数为function () { console.log(this.c) }
,这个函数以参数的形式传入到 a 中,并通过代码n()
实现该函数的调用,那么问题来了,n 本身就是这个函数,他的调用者是谁呢?
在 Javascript 中,所有函数的最顶层的调用对象都为全局对象 Window,所以在这段代码中,调用函数 n ( 也就是 this 所在的函数 ) 的那个人,就是全局对象 Window,所以console.log(this.c)
这行代码就变成了console.log(Window.c)
,所以最后的输出结果就是:Window.c
看到这里,你是不是有一种豁然开朗的感觉呢?
那么上面那段代码,应该如何改才能让他继续输出d.c
呢?
其实很简单,只要让调用 this 所在函数的那个人是 d 对象就好了。
没错,关键语句就是d.(function () { console.log(this.c) })
,但是这样写太繁琐了,如果我想在上面那段代码的基础上进行修改,该怎么做呢?
其实也很简单,只要把 n 赋值给 d 的某个新属性(例如 d.n
),然后再调用这个方法就可以啦( d.n()
)。完整代码如下:
var d = { a: function (n) { d.n = n d.n() }, c: 'd.c' } var c = 'Window.c'; d.a(function () { console.log(this.c) });
看到这里,你就会觉得,原来 this 也没什么大不了嘛。
不过,理解 this 只是第一步,更重要的,是要学会举一反三,这样才会掌握的更加扎实、牢固。
此外,this 还有很多其他方面需要注意的,但是我相信,只要你理解了我写的这部分核心知识点,你再去看别的关于 this 的内容,也肯定会如鱼得水,十分顺利~
最后,
如果你觉得我的文章对你有帮助,
就请动动你的小手,
给我点一个赞吧,
你的赞将会是对我的最大的鼓励和支持~
同时,
也欢迎优秀的你给我提出宝贵的意见和建议,
我会不断努力,
把自己打磨的越来越优秀。
- 一分钟秒懂this
- 一分钟秒懂公有云、私有云、混合云......
- 三分钟秒懂java注解
- 5分钟秒懂xml头文件
- 小时 分钟 秒 计算
- 增加小时,分钟,秒
- 3分钟秒懂 物理学家进一步逼近绝对零度
- ava面向对象笔记(五分钟秒懂)
- java将秒化为分钟和秒
- 为什么长达66分钟的阅兵式上我们都捕捉到了那短暂的一秒
- js 日期+分钟+秒 倒计时
- NSTimeInterval转换为分钟秒
- 毫秒转换分钟和秒
- 一分钟
- 5秒懂的是变态,30秒懂的是色鬼,1分钟懂的很纯
- 为什么长达66分钟的阅兵式上我们都捕捉到了那短暂的一秒(转)
- 输入一个数字作为秒数,按小时,分钟,秒
- 秒转x天x小时x分钟x秒
- 19、ES6 函数的扩展---作用域(与文章案例有出入)
- 微信公众号技术文档
- ubuntu 下NetBeans配置opencv开发环境
- 设计模式概述-持续更新
- Git — 如何解决failed to push some refs to git
- 一分钟秒懂this
- RabbitMQ五种消息队列学习(六)--通配符模式(路由类型:Topic)
- 关于mysql创表的时候出现错误:cannot add foreign key constraint
- Appium for Android元素定位方法
- 排序算法集合 -6
- WPF自定义exe进程嵌入控件
- 设计模式学习总结:外观模式(Facade)
- 【JS】用js实现二维数组里面的元素排列组合一个小demo
- 动态代理--cglib 回调