关于JavaScript中this对象的指向，及改变的四种情况

最新推荐文章于 2023-03-14 11:36:38 发布

三月的一天

最新推荐文章于 2023-03-14 11:36:38 发布

阅读量1.8k

点赞数 1

分类专栏： Javascript 文章标签： JavaScript中this对象

本文链接：https://blog.csdn.net/qq_36384657/article/details/94986467

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

this对象的几种情况

解析器在调用函数每次都会向函数内部传递进一个隐含的参数, 这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象
* 1.以函数的形式调用时，this永远都是window

* 2.以方法的形式调用时，this就是调用方法的那个对象

* 3.以构造函数的形式调用时，this是新创建的那个对象

* 4.通过call()或apply()改变函数执行环境的情况况下，this就会指向其他对象

分别举例说明this的几种调用方式；

1.this以函数形式调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			//  1.以函数的形式调用时，this永远都是window
			function fun(){
				console.log(this.name);
			}
			var name = "全局的name属性";	
    
			fun();//以函数形式调用，this是window
			//控制台输出"全局的name属性”
		</script>
	</head>
	<body>
	</body>
</html>

2.this以方法形式调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			//2.以方法的形式调用时，this就是调用方法的那个对象
			 
			
			function fun(){
				console.log(this.name);
			}
			
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			
			var obj2 = {
				name:"沙和尚",
				sayName:fun
			};
			
			var name = "全局的name属性";
			obj.sayName();			
			obj2.sayName();
			//以方法的形式调用，this是调用方法的对象
            //控制台输出：孙悟空 沙和尚
		</script>
	</head>
	<body>
	</body>
</html>

3.this以构造函数的形式调用

构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写，构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。
构造函数的执行流程：
           *    1.立刻创建一个新的对象
           *    2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
           *    3.逐行执行函数中的代码
           *    4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			 
            //	3.当以构造函数的形式调用时，this就是新创建的那个对象
			
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};//这里的this是每次创建的对象
			}
			
			function Dog(){
				
			}
			
			var per = new Person("孙悟空",18,"男");//这里this.name="孙悟空"
			var per2 = new Person("玉兔精",16,"女");//这里this指的对象是per2
			var per3 = new Person("奔波霸",38,"男");//这里this指的是per3
			

		</script>
	</head>
	<body>
	</body>
</html>

4.使用call和apply调用时

call()和apply()
这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行。在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递， apply()方法需要将实参封装到一个数组中统一传递

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = {
				name: "obj",
				sayName:function(){
					alert(this.name);
				}
			};//创建一个对象，叫obj

            obj.sayName();//输出“obj”

			// 4.使用call和apply调用时，this是指定的那个对象

			var obj2 = {
				name: "obj2"
			};//创建一个对象叫obj2

            obj.sayName.apply(obj2);//通过apply（）方法传入一个对象obj2
            //输出“obj2”
		</script>
	</head>

	<body>
	</body>

</html>

三月的一天

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于JavaScript中this对象的指向，及改变的四种情况

this对象的几种情况解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象 * 1.以函数的形式调用时，this永远都是window * 2.以方法的形式调用时...
复制链接

扫一扫