为了账号安全,请及时绑定邮箱和手机立即绑定

第 37 题:谈谈你对 this 指向的了解?

标签:
Html5 CSS3 面试

this 的指向不是在创建时就决定了,而是由执行环境决定的,包括全局环境、对象环境、构造函数环境、事件对象

全局环境

全局环境下,this 就代表 window 对象

var name = 'xiaoming';
function say(){
  console.log(this.name);
}
say(); //xiaomig

对象环境

对象环境指向对象

var obj = {
  name : "xiaoming",
  say : function(){
    console.log(this.name);
  }
}
obj.say(); //xiaoming

构造函数环境

构造函数中的 this 会指向创建出来的实例对象

function Person() {
    this.name = 'xiaoming';
}
var p = new Person();
console.log(p.name); // xiaoming

事件对象

在 DOM 事件中使用 this,this 指向了触发事件的 DOM 元素本身

li.onclick = function(){
    console.log(this.innerHTML);
}

改变 this 指向的方法有哪些?

通过 call()、apply()、bind()改变 this 指向

那么箭头函数中的 this 呢?

箭头函数体内的 this 对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象

  1. 箭头函数本身没有 this 指向,如果使用 this 则指向上一级函数(非箭头函数)的 this

  2. 箭头函数声明的构造函数不能够被 new 实例化

var name = 'window';

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window

这里的箭头函数,也就是 sayHello,所在的作用域其实是最外层的 js 环境,因为没有其他函数包裹;然后最外层的 js 环境指向的对象是 winodw 对象,所以这里的 this 指向的是 window 对象

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消