第 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 对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象
-
箭头函数本身没有 this 指向,如果使用 this 则指向上一级函数(非箭头函数)的 this
-
箭头函数声明的构造函数不能够被 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 指向详解
文章的内容/灵感都从下方内容中借鉴
-
【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
-
【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts
-
【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/