面试中的this指向

最新推荐文章于 2024-03-28 02:46:40 发布

小周子1015

最新推荐文章于 2024-03-28 02:46:40 发布

阅读量289

点赞数 1

分类专栏： HTML WEB 文章标签： javascript web

本文链接：https://blog.csdn.net/weixin_40228604/article/details/107235407

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

WEB

1 篇文章 0 订阅

订阅专栏

近来面试很多小童鞋们，发现只要问到this指向时候都回答不是很好，包括一些老码童鞋，下面我整理了一下，希望能帮到大家

<body>
	<div id="box">box</div>
	<div id="box1">箭头函数</div>
</body>

一、事件调用指向

<script>
	var dom = document.getElementById('box')
	dom.onclick = function(){
		this.style.color = 'red';
		// 谁调用事件，函数中的this指向谁
	}
</script>

二、全局指向

<script>
	console.log(this);	
	// 浏览器环境下，指向window
	// node运行js文件，指向module.exports
	// 函数直接调用指向window	非严格模式
	// 函数直接调用 undefined	严格模式	window.fn 调用是指向window
</script>

三、普通函数


<!-- 减少内存消耗 使用对象管理 -->
<!--   -->
<!-- /**
*	函数内部 
*	(1) this最终指向调用他的对象，和它的声明是没有任何关系的
*	(2) 如果函数被多层对象包含，如果函数被最外层对象调用，this指向的也是它上以及对象
*/ -->
<script>
	var obj = {
		a: 10,
		fn: function() {
			console.log(this)	
		}
	}
	obj.fn();	//obj (1)
	window.obj.fn();	//obj (2)	//window包含obj //obj 包含fn

	var fn1 = obj.fn
	fn1()	// window (1)
	/**
	*	fn1() 实际调用方式 window.fn1();
	*/
</script>

四、构造函数(无返回值)

<script>
	function foo(){
		// obj1 = {};	//对应实例化
		this.num = 1;
		console.log(this);
	}

	var obj1 = new foo();	// 指向obj1对象
	/**
	*	实例化都做了什么?
	*	1. 调用foo函数
	*	2. 自动创建一个对象
	*	3. 把创建出来的对象和实例化的对象进行绑定
	*	4. 如果方法中没有返回值(return)，默认返回this对象
	*/

	foo.num = 2;
	foo.prototype.num = 3;
	foo.prototype.fnn = function(){
		console.log(this.num);
	}
	
	var prototype = foo.prototype;
	var fnn = prototype.fnn;

	new foo().fnn();	//	1	new foo() == {}.fnn()	-> this.num = 1;
	prototype.fnn();	//	3	foo.prototype == {}.fnn()	-> foo.prototype.num = 3;
	fnn();				//	undefined	window.fnn();	window 中无num
</script>

四、构造函数(构造函数)

<!-- /*
	有返回值
	如果返回是一个对象，this指向对象本身
	如果返回是一个基本数据类型或者布尔值，this指向实例化对象
	*/ -->
<script>
	function fooh(){
		this.num = 10;
		return '';	//10
		// return 1;	//10
		// return [];	//undefined
		// return {};	//undefined
		// return {num:20};	//20
		// return function(){};	//undefined
		// return null;	//10
		// return true;	//10
		// return false;	//10
		// return undefined;	//10

	}
	var objh = new fooh();
	console.log(objh.num)
</script>

五、箭头函数

<!-- 
箭头函数 在定义时候就决定this指向
根据上下文关系定义this指向
箭头函数 中本身没有this和arguments的
在箭头函数中引用this实际上调用上级作用域的this
对象不能形成对立作用域所以对象中的箭头函数this指向window
 -->
<script>
	var box1 = document.getElementById('box1')
	box1.onclick = function(){
		// setTimeout(function(){
		// 	this.style.color = 'red';
		// 	// this 指向window
		// },1000)
		setTimeout(()=>{
			this.style.color = 'red';
		},1000)
	}
</script>

六、修改this指向

<script>
	var box2 = document.getElementById('box1'), a=1,b=2;
	var obj2 = {
		fn: function(){
			console.log(this);
		}
	}
	obj2.fn.call(box2,a,b);
	obj2.fn.apply(box2,[a,b]);
	obj2.fn.bind(box2)();
	// bind 返回是一个方法需要执行
</script>

小周子1015

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试中的this指向

进来面试很多小童鞋们，发现只要问到this指向时候都回答不是很好，包括一些老码童鞋，下满我整理了一下，希望能帮到大家<body> <div id="box">box</div> <div id="box1">箭头函数</div></body>一、事件调用指向<script> var dom = document.getElementById('box') dom.onclick = function
复制链接

扫一扫

专栏目录