标签：function console log length 关于 foo fn

• 关于 this
  • 总结
  • 例题
  • 箭头函数

关于 this

总结

关于 this 的总结:

1. 沿着作用域向上找最近的一个 function（不是箭头函数），看这个 function 最终是怎样执行的；
2. this 的指向取决于所属 function 的调用方式，而不是定义；
3. function 调用一般分为以下几种情况：
   1. 作为函数调用，即：foo()
      1. 指向全局对象，注意严格模式问题(严格模式下，全局的 this，指向 undefined)
   2. 作为方法调用，即：foo.bar() / foo.bar.baz()
      1. 指向最终调用这个方法的对象
   3. 作为构造函数调用，即：new Foo()
      1. 指向一个新对象 Foo{}
   4. 特殊调用，即：foo.call() / foo.apply() / foo.bind()
      1. 参数指定成员
4. 找不到所属的 function，就是全局对象
   1. var obj = { foo: () => { console.log(this) }}，此处 this 指向 window

例题

var length = 0
function fn() {
  console.log(this)
  console.log(this.length)
}

const obj = {
  length: 5,
  method(fn) {
   fn()
   arguments[0]()
  }
}

obj.method(fn, 1, 2)

解析

var length = 0
function fn() {
  console.log(this) // => [fn, 1, 2]
  console.log(this.length) // 3
}

const obj = {
  length: 5,
  method(fn) {
   fn() // => window this.length 10
   // arguments => 实参列表 => [fn, 1, 2]
   arguments[0]() // 可理解成是 arguments.0(), 所以 fn 是由 arguments 调用
  }
}

obj.method(fn, 1, 2)

箭头函数

const obj1 = {
  foo() { // 沿着作用域向上找，最近的一个 function 是 foo，看它怎样执行的 obj1.foo()，所以 this 指向 obj1
    return () => { // 箭头函数和 this 无关，可简单把 => 当成 if 或 for 循环，和其内部的 this 无关，
      console.log(this) // obj1
    }
  }
}

obj1.foo()()

// class 中的 this，实际还是构造函数中的 this，class 只是语法糖而已
class Person {
  say = () => {
    console.log(this) //  => Person 
  }
}

const a = new.Person()
a.say()

转换成 es5

function Person() {
  this.say = () => {
    console.log(this)
  }
}

标签：function,console,log,length,关于,foo,fn
来源： https://www.cnblogs.com/dwyWeb/p/16426634.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。