第 37 题：谈谈你对 this 指向的了解？

所属分类：Web前端

摘要

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); }

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

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

var name = 'window';  var A = {    name: 'A',    sayHello: () => {       console.log(this.name)    } }  A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

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