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/In…
- 【大数据可视化图表插件】https://www.npmjs.com/package…
- 【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/