JS基础（八）--this 关键字用法详解

祭夜醉美

已于 2022-04-21 10:01:24 修改

阅读量425

点赞数

分类专栏：前端求职文章标签：前端

于 2022-04-14 11:29:48 首次发布

本文链接：https://blog.csdn.net/qq_44665456/article/details/124167054

版权

前端求职专栏收录该内容

50 篇文章 0 订阅

订阅专栏

一、this关键字的使用方法

方法中的 this,指向调用方法的对象
全局环境下的 this ,指向全局对象
全局函数中的 this,指向全局对象
内部函数中的 this,指向全局对象
事件中的 this.指向触发事件的DOM对象
构造函数中的 this ,指向 new 创建的对象【面试题new 的作用】
箭头函数中的 this, 指向定义函数上下文的 this
使用闭包， var 获取dom 的索引

<script>
/*
	1、直接输出 this 指向全局对象
*/
// this
console.log(this)  // window

// 全局函数其实是window (全局对象) 的方法
function fun(){
	console.log(this)
}
window.fun();

// this 放在方法中，this指向调用这个方法的对象
let cat = {
	name: "喵喵",
	sayName(){
		console.log("我是" + this.name)
	}
}

cat.sayName();
</script>

 <body>
 <button>按钮</button>
 
 <script>
	const btn = document.querySelector("button");
	btn.onclick = function(){
		console.log(this);
	}
</script>
 </body>

<script>
// new 关键字做了什么：new 会创建对象，将构造函数中的 this 指向创建出来的对象
//  构造函数:是用来创建对象
function F(){
	this.name = "小明";
	}
let f = new F();
console.log(f);

// 箭头函数没有 this
/*
	1、普通函数，谁调用谁指向谁，箭头函数：在哪里定义指向谁
	2、箭头函数外指向谁就指向谁
	3、箭头函数中没有 this

*/

let cat = {
	name: "喵喵",
	sayName(){
		setTimeout(()=>{
			console.log(this)
		},1000)
	}
}
cat.sayName();
</script>

祭夜醉美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础（八）--this 关键字用法详解

一、this关键字的使用方法方法中的 this,指向调用方法的对象全局环境下的 this ,指向全局对象全局函数中的 this,指向全局对象内部函数中的 this,指向全局对象事件中的 this.指向触发事件的DOM对象构造函数中的 this ,指向 new 创建的对象【面试题new 的作用】箭头函数中的 this, 指向定义函数上下文的 this使用闭包， var 获取dom 的索引<script>/* 1、直接输出 this 指向全局对象*/// this
复制链接

扫一扫

专栏目录