this指向总结

总结:

  1. 纯粹的函数调用:指向全局
  2. 作为对象方法的调用:指向对象(调用者)
  3. 构造函数调用:构造函数中的this指向new出来的对象实例
  4. apply调用:指向apply所接受的执行空间
  5. 剪头函数:指向上一级

不重要的

  • 定时器指向window
  • 事件绑定指向元素本身

一道腾讯笔试题

  var x = 20;
  var a = {
    x: 15,
    fn: function () {
      var x = 30;
      return function () {
        return this.x
      }
    }
  }
  console.log(a.fn());//返回一个函数
  console.log((a.fn())());//20
  console.log(a.fn()());//20
  console.log(a.fn()() == (a.fn())()); //true
  console.log(a.fn().call(this)); //20
  console.log(a.fn().call(a)); //15 

demo:

  var name = 'tangbohu'
  // 1.纯粹的函数调用:指向全局
  function doit() {
    alert(this.name)//'tangbohu'
  }
  doit()
  // 2.作为对象方法的调用:指向对象(调用者)
  const person = {
    name: 'xusheng',
    sayName: function () {
      alert(this.name)//xusheng
    }
  }
  person.sayName()
  // 3.构造函数调用:构造函数中的this指向new出来的对象实例
  function foo(name, age) {
    this.name = name
    this.age = age
  }
  const baby = new foo('heshang', 13);
  alert(baby.name)//heshang

  // 4.apply调用:指向apply所接受的执行空间
  name = 'window-Name'
  function testapply() {
    alert(this.name)
  }
  testapply.apply(person)//xusheng    并不是window下的window-Name

  // 5.剪头函数:指向上一级
  const person2 = {
    name: 'xusheng??????',
    sayName: () => {
      alert(this.name)//window-Name
    }
  }
  person2.sayName()
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 今天的分享让我有些迫不及待。主题是——如何利用心理学小技巧,引导用户的行为,达到自己的目的。 这一切来源于一个研...
    底层的奋进阅读 4,766评论 0 4
  • CS曾经令无数80后的男生为之着迷,不惜日夜奋战,而现在,那群玩着CS成长的80后大部分都已为人夫,为人父,有了自...
    徽韵蒹葭阅读 4,187评论 19 15
  • 满朝朱紫贵,尽是读书人
    万十千阅读 1,243评论 0 0

友情链接更多精彩内容