this的指向问题

最新推荐文章于 2022-10-21 11:01:29 发布

Vinsmoker_Sanji

最新推荐文章于 2022-10-21 11:01:29 发布

阅读量111

点赞数 1

分类专栏： es6 文章标签： javascript html5

本文链接：https://blog.csdn.net/Vinsmoker_Sanji/article/details/120430185

版权

es6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.函数下的this

1.普通函数调用，this指向window

<script type="text/javascript">
		function fn(){
		    var user = "张三";
		    console.log(this.user); 	//undefined
		    console.log(this); 			//Window
		}
		fn();
	</script>

函数下的this，指向的是window对象，所以返回的是 underfined

调用函数fn()，省略了window，完整写法为window.fn()

注：alert(),也是一个window对象的一个属性

2.构造函数调用，this指向的是函数的实例对象

<script type="text/javascript">
		function Person(age, name) {
			this.age = age;
			this.name = name
			console.log(this)	 // 此处 this 分别指向 Person 的实例对象 p1 p2
		}
		var p1 = new Person(19, '张三')
		var p2 = new Person(21, '李四')
	</script>

3.定时器函数，此时指向的是window

<script>
	   setInterval(function () {
	         console.log(this); // window
	       }, 1000);
	</script>

4.箭头函数

箭头函数中的this指向的是定义时的this，而不是执行时的this

<script>
			var obj = {
				foo() {
					console.log(this);
				},
				bar: () => {
					console.log(this);
				}
			}
			obj.foo() // {foo: ƒ, bar: ƒ}
			obj.bar() // window
		</script>

注： call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响

二.对象调用的this，指向这个对象

1.普通对象

<script type="text/javascript">
		var obj = {
		    user:"张三",
		    fn:function(){
                user:"李四",
		        console.log(this.user);   //张三
		    }
		}
		obj.fn();
	</script>

可以理解为此函数为 obj 对象调用的，所以this指向的是 obj 对象

2.包含多个对象

<script type="text/javascript">
		var obj = {
			a: 20,
			b: {
				a: 22,
				fn: function() {
					console.log(this.a); //22
				}
			}
		}
		obj.b.fn();
	</script>

函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

可以理解为是就近原则

三.事件下的this

1.点击事件下的this，此时this指向绑定事件的对象

<body>
	    <button id="btn">点击我</button>
	<script>
	    var btn = document.getElementById("btn");
	    btn.onclick = function() {
	        console.log(this);     // btn
	    }
	</script>
	</body>

四.如果是用call和apply调用，则this指向你手动设置的函数

<script>
			var name = '张三';
			function foo() {
				console.log(this.name);
			}
			var jj = {
				name:'小明'
			}
			var kk = {
				name: '李四'
			}
			foo()			//张三 默认情况下this指向window
			foo.apply(jj); // 小明 将foo中的this指向 jj
			foo.call(kk); // 李四 将foo的this指向对象 kk
		</script>

总结
一、this在全局中指向window
二、this在函数中指向具体看函数如何被调用

1.如果是普通函数调用，this指向window
2.如果是构造函数，通过new调用，this指向构造函数当前new出来的实例
3.如果是对象调用函数，则this指向调用函数的对象,跟随就近原则
4.如果是call和apply调用，this就指向你手动在call和apply后面设置的对象

Vinsmoker_Sanji

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
this的指向问题

一.函数下的this1.普通函数调用，this指向window<script type="text/javascript"> function fn(){ var user = "张三"; console.log(this.user); //undefined console.log(this); //Window } fn(); </script>函数下的this，指向的是window对象，所以返回的是 und
复制链接

扫一扫