欢迎光临
我的个人博客网站

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

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 对象

参考资料
JS 中—-this 的指向和如何修改 this 的指向
ES6 箭头函数的 this 指向详解

文章的内容/灵感都从下方内容中借鉴

赞(0) 打赏
未经允许不得转载:张拓的天空 » 第 37 题:谈谈你对 this 指向的了解?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏