下面小编就为大家带来一篇基于javascript的this指向总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向。首先需要了解一下几个概念:
1:全局变量默认挂载在window对象下
2:一般情况下this指向它的调用者
3:es6的箭头函数中,this指向创建者,并非调用者
4:通过call、apply、bind可以改改变this的指向
下面我们具体分析一下
1:在函数调用时
(非严格模式)
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //window
};
func(); //window
(严格模式)
'use strict'
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //undefined
};
func(); //undefined
结合第四和第一两条规则:func这个函数是全局的,默认挂载在window对象下,this指向它的调用者即window,所以输出window对象,但是在严格模式下,this不允许指向全局变量window,所以输出为undefined(func2在函数直接调用时默认指向了全局window,其实这属于javascript设计上的缺陷,正确的设计方式是内部函数的this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 javascript 程序员想出了变量替代的方法,约定俗成,该变量一般被命名为 that。这种方式在接下来会讲到)。
2:作为对象方法
const user = {
username: '小张',
age: 18,
selfintroduction: function () {
const str = '我的名字是:' + this.username + ",年龄是:" + this.age;
console.log(str);
const loop = function () {
console.log('我的名字是:' + this.username + ",年龄是:" + this.age);
};
loop(); //我的名字是:undefined,年龄是:undefined
}
};
user.selfintroduction(); //我的名字是:小张,年龄是:18
按照咱的第一条规则,this指向他的调用者,selfintroduction()方法的调用者是user,所以在selfintroduction()方法内部this指向了他的父对象即user,而loop方法输出的为undefined的原因就是我在上面所说的javascript的设计缺陷了,在这种情况下,我们通常选择在selfintroduction()方法里将this缓存下来。
const user = {
username: '小张',
age: 18,
selfintroduction: function () {
const str = '我的名字是:' + this.username + ",年龄是:" + this.age;
console.log(str);
const that=this;
const loop = function () {
console.log('我的名字是:' + that.username + ",年龄是:" + that.age);
};
loop(); //我的名字是:小张,年龄是:18
}
};
user.selfintroduction(); //我的名字是:小张,年龄是:18
此时loop的this指向就理想了。
const user={
username:'小张',
age:18,
selfintroduction:function(){
const str='我的名字是:'+this.username+",年龄是:"+this.age;
console.log(str);
}
};
const other =user.selfintroduction;
other(); //我的名字是:undefined,年龄是:undefined
const data={
username:'小李',
age:19,
};
data.selfintroduction=user.selfintroduction;
data.selfintroduction(); //我的名字是:小李,年龄是:19
在看这段代码,将selfintroduction()赋值给了全局变量other,调用other()方法,other挂载在全局函数window对象下,window对象下没有username 和 age 这两个属性,所以输出为undefined。第二段代码,申明了data对象,包含了username和age属性,记住我们的第二条规则一般情况下this指向它的调用者,大家就明白了,data是selfintroduction()的函数的调用者,所以输出了data的username和age。
3:在html里作为事件触发
<body>
<p id="btn">点击我</p>
</body>
const btn=document.getelementbyid('btn');
btn.addeventlistener('click',function () {
console.log(this); //<p id="btn">点击我</p>
})
在种情况其实也是遵循了第二条规则一般情况下this指向它的调用者,this指向了事件的事件源即event。
4:new关键字(构造函数)
const fun=function(username){
this.username=username;
}
const user=new fun('郭德纲');
console.log(user.username); //郭德纲
这个就不多赘述了,new关键字构造了一个对象实例,赋值给了user,所以username就成为了user对象的属性。
5:es6(箭头函数)
const func1=()=>{
console.log(this);
};
func1(); //window
const data={
username:'校长',
selfintroduction:function(){
console.log(this); //object {username: "校长", selfintroduction: function}
const func2=()=>{
console.log(this); //object {username: "校长", selfintroduction: function}
}
func2();
}
}
data.selfintroduction();
大家在看看我开头说的第三条准则:es6的箭头函数中,this指向创建者,并非调用者,fun1 在全局函数下创建,所以this指向全局window,而fun2在对象data下创建,this指向data对象,所以在func2函数内部this指向data对象,个人认为es6的箭头函数的this指向是对我上面所说的javascript设计缺陷的改进,(个人认知)。
6:改变this的指向
call、apply、bind这三个函数是可以人为的改变函数的this指向的,在这里就不多说这三者的区别了,在往后的博客里我会详细解释这三者的区别的。现在先拿一个来举一个例子
const func=function(){
console.log(this);
};
func(); //window
func.apply({username:"郭德纲"}); //object {username: "郭德纲"}
这三个方法都是可以人为的改变this的指向,区别是call、apply会将该方法绑定this之后立即执行,而bind方法会返回一个可执行的函数。
说这很多总结起来就是我开头说的4点
1:全局变量默认挂载在window对象下
2:一般情况下this指向它的调用者
3:es6的箭头函数中,this指向创建者,并非调用者
4:通过call、apply、bind可以改改变this的指向
说实话第一次写博客,确实挺忐忑的,会不会有人看我的博客?会不会写的不正确?……想好多了,总结了:不好的地方欢迎指正。
以上就是关于javascript中的this指向总结详解的详细内容。