关于JS中this的认识
程序员文章站
2022-03-28 16:06:26
与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。在普通函数中如果this出现在普通的函数中,this表示window,如果你通过window调用一个函数,这个函数中的this也是window。 var b="win"; function fn(){...
与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。
在普通函数中
如果this出现在普通的函数中,this表示window,如果你通过window调用一个函数,这个函数中的this也是window。
var b="win";
function fn(){
var b=3;
console.log(b);
console.log(this.b);
console.log(this);
}
fn();
事件绑定,事件处理程序,事件发生时
事件绑定,事件处理程序,事件发生时,浏览器帮我们调用这个函数,此函数中的 this表示事件源
let box = document.getElementById("box");
function f(){
console.log(this); // window
return function g(){
console.log(this); // 事件源
}
} box.onclick = f();
在对象中
在一个对象中,如果有方法(函数),如果通过这个对象调用方法,方法中的this表示这个对象
var b="win";
function fn(){
var b=3;
console.log(b);
console.log(this.b);
console.log(this);
}
fn();
var c= {
b:4,
ff:function c(){}
};
c.ff=fn;
c.ff();
注意:
在js中如果通过函数名.调用,那么这个f就是一个对象,this并不是指向函数内部而是指向f在这个对象(个人理解,如果有误请指正)
var b="win";
function fn(){
var b=3;
console.log(b);
console.log(this.b);
console.log(this);
}
function f(){
let b = 4;
var ff;
}
f.ff=fn;
f.ff();
因为对象中没有b这个属性所以输出undefined
在IIFE(立即执行函数)中
在IIFE中,this表示window
var b="win";
(function fn(){
var b=3;
console.log(b);
console.log(this.b);
console.log(this);
})();
严格模式
在严格模式中JavaScript不允许默认绑定,所以在严格模式下的this都是undefined
"use strict"
var b="win";
(function fn(){
console.log(this);
})();
function f(){
console.log(this);
}
f();
总结
this 既不指向函数自身,也不指函数的词法作用域。它实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。也就是说谁调用的this,this就指向谁(非严格模式)
在严格模式中JavaScript不允许默认绑定,所以在严格模式下的this都是undefined
var b="全局里面的b"
function f(){
console.log(this.b);
}
f(); //这里是程序员调用f(),所以是由window调用的所以this指向window
let a={
b:"对象a里面的b",
c:function f(){
console.log(this.b);
}
}
a.c();//这里是a这个对象调用的this,所以this指向了a对象
本文地址:https://blog.csdn.net/Zmy1997/article/details/107573692