一.前言
两年前,曾经的组长对我说过,一个前端连闭包原型this都搞不明白,还好意思说自己是前端。之后我一直去试着理解this,看了好多博客和视频教学,发现好像并不是特别好理解。但是在之后的项目中,我都使用了this。在接触和使用过后,好像对this有点了解,特别写一篇博客记录一下关于this的二三事,方便以后查询,也给刚刚接触前端的小伙伴一点点帮助
二.this是什么?
首先this在js中理解起来很简单,他就是当前对象,也可以理解成指向的对象,那么问题来了,那么我怎么知道当前指的是那个对象?
三.this的到底指向的是谁?
首先我们想理解this的话,我们必须要理解两句话
全局变量是window的属性,函数是window的方法
this谁最后调用,他就是谁
首先我们理解一下使用代码理解一下
let a = '5'
console.log(window.a) //5
function foo(){
reutrn 'foo'
}
console.log(window.foo()) //foo
我们申明了一个全局变量a和一个函数foo,但是我们调用他们的时候并没有直接调用,而是使用window这个全局对象调用来调用属性和方法的方式调用,所以可以看到打印出他们的值,可以得出全局变量是window的属性,函数是window的方法这一结论 然后我们运行代码
var name = 'Tom'
function name(){
var name = 'Jerry'
console.log(this.a)
}
name() // 'Tom'
console.log(this) //window
在全局作用域中,函数是window的方法,name函数由window调用,那么函数内部的this指向的就是window,当然打印出出的this.name当然就是全局作用域下的name值了 简单了解了this的指向,我们细分一下几个复杂场景下面的this指向(this到底是谁)
在函数内部嵌套的内部函数
var name = 'apple'
function fn0(){
var name = 'Tom'
function fn1(){
console.log(this.name);
}
fn1();
}
fn0();
函数内部嵌套的内部函数,依然指向全局对象(window)
在构造函数中和对象中
function Person(name){
this.name = name;
this.say = function(){
console.log('Hello'+this.name)
}
}
Person.prototype.printName = function(){
console.log(this.name);
};
var a = new Person('Byron');
a.say() //"HelloByron"
a.printName() //"Byron"
在构造函数中,this的指向就调用他这个对象的方法,无论是否在原型上
var name = 'apple'
var obj1 = {
name: 'Byron',
fn : function(){
console.log(this.name);
}
};
obj1.fn() // Byron
在对象中使用也是一样,this的指向在就是他调用他这个对象上 这里有个小陷阱,加上代码看一下
var fn2 = obj1.fn;
fn2(); //'apple'
我们把方法赋值给一个变量,直接用变量调用看看,这个时候我们就可以看出来,this的指向改变了,变成全局的了,符合我们上面的第二句话,this谁最后调用,他就是谁
setTimeout、setInterval
在setTimeout、setInterval的内部函数中,无论是谁调用,他指向的都是全局变量
var name = 'apple'
var obj1 = {
name: 'Byron',
fn : function(){
setTimeout(function(){
console.log(this.name)
},300)
setInterval(function(){
console.log(this.name+'666')
},300)
}
};
ob1.fn() //apple
//apple+666
fn1 = obj1.fn
fn1() //apple
//apple+666
可以看得出来,打印的结果可以得出this指向的都是全局对象window
DOM对象绑定事件
document.querySelector('input') = function(){
console.log(this.value)
}
DOM对象绑定事件中的函数中的this指向的是当前这个DOM节点
箭头函数
箭头函数中,this的指向有点特别:创建时的封闭词法上下文的this保持一致
var name = 'tom'
var obj1 = {
name : 'Byron',
fn :function(){
setTimeout(()=>{
console.log(this.name)
},0)
}
};
obj1.fn() //'Byron'
由于箭头函数特殊的原因,箭头函数没有原型,所以箭头函数本身没有this,他只能指向定义外层第一个普通的this,那如果那个普通的this变化了,箭头函数中的this会指向哪呢?
var name = 'tom'
var obj1 = {
name : 'Byron',
fn :function(){
setTimeout(()=>{
console.log(this.name)
},0)
}
};
var obj2 = {
name : 'hello world'
}
obj1.fn.call(obj2) //'hello world'
可以看出如果外层的this变化了,箭头函数内的this会随着外层的变化而变化
四.总结
1.this的指向不是固定的,是会变化的(这篇博客还没有讲call,apply,bind等函数的用法)
2.this谁调用他,他就指向谁
3.在setTimeout、setInterval中,不使用箭头函数的情况下this指向全局对象window
4.箭头函数没有原型,this指向外层作用域
五.结语
想要彻底了解this,必须在项目中多多使用this,遇到问题打印一下,结合网上的博客分析为什么会这样,这样学习起来也比较快,理解也能加深,毕竟学习一个东西的最好的方法就是去使用他。如果文中有错误,希望大家在评论里面提出指正,本人加以改正