JavaScript系列—变换莫测的this

最新推荐文章于 2022-04-01 10:57:27 发布

jiaojsun

最新推荐文章于 2022-04-01 10:57:27 发布

阅读量128

点赞数

分类专栏： JavaScript系列

本文链接：https://blog.csdn.net/jiaojsun/article/details/90725862

版权

JavaScript系列专栏收录该内容

24 篇文章 4 订阅

订阅专栏

前言

相关知识讲解：

- javascript中的this
- 全局环境
- 事件处理函数
- 函数内部
- 箭头函数内部
- 对象方法内部
- 构造函数中
- 原型链上函数
- getter 和 setter 中

- 全局环境
- window

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<script>
		console.log( this ); //Window
	</script>
</body>
</html>

- --
- 事件处理函数
- DOM 事件处理函数

情况一：

情况二

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="box">div</div>
	<script>
		var box = document.getElementById("box");
		box.onclick = function(){
			console.log(this)//box
			setTimeout( function(){
				console.log( this ); //window
				this.style.backgroundColor = "red"; //报错
			},1000 )
		}
	</script>
</body>
</html>

- 内联事件处理函数

情况一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<!-- box -->
	<div id="box" onclick="console.log( this )" >div</div> 
	<!-- 特殊情况 此处this指的window -->
	<div id="box" onclick="( (function(){console.log( this )})() )" >div</div>
	<script>
		box.onclick = function(){
			console.log( this ); // 事件处理函数中的 this, 该事件由谁触发,this指的就是谁 box
		}
	</script>
</body>
</html>

- --
- 函数内部
   - 函数直接执行
       - 非严格模式下
           - 默认指向全局对象
               - 浏览器

情况一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<script>
		function fn() {
			console.log(this);//window
		}
		fn();//window
	</script>
</body>
</html>

               - node
                   - node交互界面中
                   - js文件中
       - 严格模式下(前面省略window,浏览器严格模式支持)
           - undefined

情况一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<script>
		function fn(){
			"use strict"
			console.log(this);
		}
		fn();//undefined
		window.fn(); //window
	</script>
</body>
</html>

   - call,apply和bind
       - 把 this 的值从一个执行环境传入另一个执行环境
           - call 和 apply 的参数差异
           - 如果传入的不是对象会调用相对的构造函数,进行隐式转换

情况一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<script>
		function fn(m,n){
			console.log( this.a,m,n );
		}	
		fn.call( {a: 1},2,3 ); // 1, 2, 3
		// 函数.call 会直接调用该函数.
			// 并且call 的 第 0个参数就是 函数执行时候的this
			// 后面的参数是 函数执行的时候的参数
	</script>
</body>
</html>