经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
js函数中的this指向
来源:cnblogs  作者:爱抽烟的王源  时间:2023/2/3 8:42:45  对本文有异议

写代码的时候遇到这个问题了,在这里复习一下

  1. 非箭头函数
    非箭头函数的this指向比较好理解,就是调用这个函数的对象,举个栗子:
  1. var obj = {
  2. foo: {
  3. bar: 3,
  4. foo:{
  5. bar: 4,
  6. foo: function a() { console.log(this.bar) },
  7. },
  8. },
  9. bar: 2
  10. };
  11. var foo = obj.foo.foo.foo;
  12. var bar = 1;
  13. obj.foo.foo.foo(); //由obj.foo.foo调用,所以此时this指向它,所以打印的this.a为4
  14. foo(); //由window调用,所以this指向window,打印1
  1. 箭头函数
    箭头函数的this指向,网上看到有一种说话是:箭头函数的this指向定义他的对象,这样理解是错误的。。。
    严格来讲应该是:箭头函数的this指向定义它的上下文对象,更通俗一点来说就是指向定义箭头函数的那个形成函数作用域的函数所在对象(个人理解,有疑问的话可以在评论区讨论一下)
    举个栗子
  1. var obj = {
  2. foo: {
  3. bar: 3,
  4. foo() {
  5. var bar = 4;
  6. return () => { console.log(this.bar) };
  7. },
  8. },
  9. bar: 2
  10. };
  11. var foo = obj.foo.foo;
  12. var bar = 1;
  13. obj.foo.foo()() // 此时this指向obj.foo对象,打印3
  14. foo()() // 此时this指向window,打印1

需要注意的是,执行函数的时候箭头函数才被定义,所以下面这个栗子打印结果才会不一样
下面这段代码最后打印出来都是3

  1. var obj = {
  2. foo: {
  3. bar: 3,
  4. foo() {
  5. var bar = 4;
  6. return () => { console.log(this.bar) };
  7. },
  8. },
  9. bar: 2
  10. };
  11. var foo = obj.foo.foo(); // 改了这里
  12. var bar = 1;
  13. obj.foo.foo()() // 3
  14. foo() // 3



最后,看一下把箭头函数换成普通函数的写法

  1. var obj = {
  2. foo: {
  3. bar: 3,
  4. foo() {
  5. var bar = 4;
  6. return function() { console.log(this.bar) };
  7. },
  8. },
  9. bar: 2
  10. };
  11. var foo = obj.foo.foo;
  12. var bar = 1;
  13. obj.foo.foo()() // 1
  14. foo()() // 1

总之就是,使用箭头函数的this需要考虑它被定义的时候所在函数作用域的this,使用普通函数只用看谁调用了它。

原文链接:https://www.cnblogs.com/yolocatcat/p/17086824.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号