JavaScript中的this用法
this是什么?
一些面向对象语言中 this 表示当前对象的一个引用,JavaScript中的this指向函数运行时所在的对象
也就是说this指向最后一个调用他的那个对象
1. 直接使用this
直接使用时,this代表全局对象,在浏览器中全局对象就是window
这里没有调用this的对象,那么就是全局对象windows
const a = this
console.log(a) // window
2. 纯粹函数调用中的this
这时this表示的是函数所属者,也就是window对象
因为没有myFunction前面没有对象进行调用所以就是全局对象windows
function myFunction() {
return this;
}
console.log(myFunction()) // window
注意:严格模式下this表示undefined
3. 方法中的this
在对象方法中,this表示方法所属的对象,下面this表示的就是a这个对象
这里对象a调用了like(),所以this指向对象a
let a = {
age: 18,
name: "阿花",
like: function() {
return this.name + "喜欢滑板"
}
}
console.log(a.like()) // 阿花喜欢滑板
4. 事件绑定中的this
在绑定事件中,this 表示事件所属的元素
假如在html元素上绑定了一个点击事件,那么这个点击事件中this指向的就是绑定事件的html元素
<div style="background-color: red;" onclick="this.style= 'background-color : green' ">
点我变色
</div>
5. 构造函数中的this
生成新的构造函数时,this表示这个新的对象。
这里最后一个调用a的是obj1,所以this指向的是obj1
function obj() {
this.a = 1;
}
var obj1 = new obj();
obj1.a = 3
console.log(obj1.a) // 3
6. apply,call 调用
在 JavaScript 中函数也属于对象,有方法apply 和 call ,可以切换函数执行的上下文环境(context),即 this 绑定的对象。
var a = {
name : "阿花",
age : 18,
fn : function() {
return this.name + "今年" + this.age + "岁了";
}
}
var b = {
name:"张三",
age: 21,
}
a.fn.call(b); // 张三今年21岁了
这时this表示的是call的参数,也就是b对象。
7. setTimeout和setInterval
setTimeout和setInterval中的this默认指向window
因为setTimeOut和setInterval属于宏任务,执行时和同步任务分离,即使设置延迟时间为0,回调也会等待同步任务和微任务执行完成后再执行,那时this没有指向,默认指向window
const a = {
name: 'ahua',
fn:function(){
console.log(this)
}
}
a.fn() // a
setTimeout(a.fn,100) // window
解决办法:可以将this存在变量中,然后通过变量去获取当时的执行环境下的this,this就不会因为执行环境的改变而改变了
function obj () {
const that = this
this.fn = function(){
console.log(that)
}
}
var obj1 = new obj()
obj1.fn() // obj
setTimeout(obj1.fn,100) // obj
也可以用bind,让this指向原来的构造函数obj,因为bind方法会创建一个新函数,并将第一个参数作为新函数运行时的this,call不能是因为调用后会立即执行
8. 箭头函数中的this
它没有自己的this对象,内部的this是函数定义时上层作用域对象中的this
function obj() {
this.name = '阿花'
setTimeout(() => {
console.log(this.name);
}, 100);
}
var name = 'ahua';
obj() // 阿花
本来执行setTimeout后this指向应该是window,但是箭头函数中this指向定义时的上层作用域,也就是obj对象
因为箭头函数this固化,所以比较合适做回调函数