1、this关键字
- 它是一个引用，指向内存中的一个对象
2、对象this的指向
| this的指向类型 | |
1、指向调用方法的对象 |
最常用的一种情况，一个对象调用一个方法，那么方法中的this，指向这个对象 |
2、指向new创建出来的对象 |
构造函数中的this，指向new创建出来的对象 |
<script> // ES5的语法 // 1、指向调用方法的对象 let person = { name: "jasmine", getName() { console.log(this.name); } } person.getName(); // 输出结果:jasmine // 2、指向new创建出来的对象 function person1(name) { this.name = name; } let person2 = new person1("jasmine"); console.log(person2.name); // 输出结果:jasmine // ES6的语法 class Person3 { constructor(name) { this.name = name; } } let person4 = new Person3("jamsine"); console.log(person4.name); // 输出结果:jasmine </script>
3、DOM事件this的指向
- 当DOM事件被触发时，事件监听函数中的this指向触发事件的DOM对象
<button>按钮</button> <script> document.querySelector('button').onclick = function () { console.log(this); } </script>
4、全局事件this的指向
// 2、全局函数this指向window function fun() { console.log(this); }; fun(); // 输出结果:Window
5、普通函数与箭头函数this的指向
| 类型 | this指向 |
| 普通函数 | 指向window |
| 箭头函数 | 指向定义函数的上下文的this |
let person = { name: "jasmine", getName() { console.log(this.name); }, getName1() { setTimeout(() => { // 箭头函数this指向对象 console.log(`箭头函数:${this}`); }, 1000) }, getName2() { setTimeout(function () { console.log(`普通函数:${this}`); }, 1000) } } person.getName(); // 输出结果:jasmine person.getName1(); // 输出结果:[object Object] person.getName2(); // 输出结果:[object Window]
总结
