专题 | this的指向 替换this

已于 2022-12-15 17:42:13 修改
阅读量279 收藏
点赞数
分类专栏： 详细知识 文章标签： 前端 javascript
于 2021-07-26 11:38:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A123ppleQueen/article/details/119105778
版权

案列还没有修改，就这样吧！那天有时间那天修改

this指向

1.全局和独立调用指向window

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
      var x=this;
	  console.log(this);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
      function c(a,b){
		  a+b;
             //return返回函数内部的值
		  return this;  
	  }
	  console.log(c(2,4));
		</script>
	</body>
</html>

2.严格模式下，this指向undefined,不会造成全局污染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		"use strict"
      function c(a,b){
		  a+b;
		  
		  return this;  
	  }
	  console.log(c(2,4));
		</script>
	</body>
</html>

3.构造函数中，this指向构造出来的实例

this指向构造出来的实例，严谨的说，是构造出来的实例引用了构造出来的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function Student(name,age){
            console.log(this);
			this.name=name;
			this.age=age;
			this.intr=function(){
				return `I’m ${this.name},I'm ${this.age}`
			}
		}
		var kevin=new Student("kevin",18);
		</script>
	</body>
</html>

4.箭头函数

箭头函数this指向执行的上下文，一般都是父级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var kevin = {
			name:"kevin",
			age:[18,22,26],
			intr:function(){
				this.age.forEach(sname=>console.log(`${this.name}今年${sname}岁了`))
				console.log(this);
			}
		}
		kevin.intr()
		</script>
	</body>
</html>

5.函数谁调用指向谁

这种情况很复杂，应该包括了下面的6,7，也就是下面的6.7不用看了，等我那天有空再来修改

继承prototype

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// this->将来哪个子对象调用这个共有方法，this就指向前面的那个子对象。谁调用指谁。
		function Student(name,age){
            console.log(this);
			this.name=name;
			this.age=age;
		}
		
		Student.prototype.intr=function(){
			console.log(this);
			return `I’m ${this.name},I'm ${this.age}`
		}
		
		var kevin=new Student("kevin",18);
		kevin.intr();
		</script>
	</body>
</html>

访问器属性中的this指向访问器属性所在的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 要求，kevin的年龄只能在18到65岁之间
		var kevin = {
			name : "kevin",
			age:18
		}
		
		Object.defineProperty(kevin,"_age",{
			value:kevin.age,
			writable:true,
			enumerable:false,
			configurable:false,
		})
		
		Object.defineProperty(kevin,"age",{
			get:function(){
				console.log(this);
				return this._age;
			},
			set:function(value){
				if(value >= 18 && value <= 65){
					this._age=value;
				}else{
					throw Error("年龄超出范围，没有权限修改");
				}
			},
			enumerable:true,
			configurable:false
		})
		
		// 修改
		kevin.age=66;
		console.log(kevin);
		</script>
	</body>
</html>

改变this指向

call/apply/bind可以改变this指向，但不能改变箭头函数的this指向

1.箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 普通this指向,值undefined
		var kevin = {
			name:"kevin",
			age:[18,22,26],
			intr:function(){
				this.age.forEach(function(sname){
				 console.log(`${this.sname} 今年${this.age}岁了`)
				})
			}
		}
		kevin.intr()
		
		
		// 箭头函数this改变,值正确
		var kevin = {
			name:"kevin",
			age:[18,22,26],
			intr:function(){
				this.age.forEach(sname=>console.log(`${this.name}今年${sname}岁了`))
				console.log(this);
			}
		}
		kevin.intr()
		</script>
	</body>
</html>

2.call

临时替换一次this为指定对象

函数名.call()

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function sum(salary1,salary2,salary3){
			console.log(`三月总工资为${salary1+salary2+salary3}`) 
		}
		
		var kevin={name:"kevin"}
		
		// call方法添加函数
		sum.call(kevin,13000,8000,9000)
		</script>
	</body>
</html>

3.apply

临时替换一次this,并打散数组apply

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function sum(salary1,salary2,salary3){
			console.log(`三月总工资为${salary1+salary2+salary3}`) 
		}
		
		var kevin={name:"kevin"}
		var arr=[10000,3000,19000];
		
		// apply方法给函数添加函数和传参
		sum.apply(kevin,arr)
		</script>
	</body>
</html>

4.bind

bind固定一个参数值为基础，然后可以传新的参数

var 新函数名=旧函数名.bind(替换this的对象，固定参数)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function sum(salary1,salary2,salary3){
			console.log(`三月总工资为${salary1+salary2+salary3}`) 
		}
		
		var kevin={name:"kevin"}
		
		// 形参基础值20000
		var sum2=sum.bind(kevin,20000);
		
		sum2(10000,3000);
		sum2(800,100);
		</script>
	</body>
</html>

我在看一种很新的东西，改变类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function foo(a,b,c,d,e){
				console.log(this);
			}
			var obj = {
				a:2,
				foo:foo
			}
			var bar = obj.foo;
			
			obj.foo(1,2,3,4,5);
			// 变为数组
			// bar.call(1,2,3,4,5);
			
			// 变为bool
			// bar.call(false,2,3,4,5);
			
			// undefined->值为window诶,没有包装类，就是默认的绑定
			// bar.call(undefined,2,3,4,5);
			
			// null->值为window,理由同上
			bar.apply(null,[1,2,3,4,5])
		</script>
	</body>
</html>

通用 globalThis

this题目合集

有专门的一篇，这个下面的内容等我以后再看值不值得留

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//1
		var a=123;
		function num(){
			var a=10;
			console.log(this.a);//123
			console.log(this);//window
		}
		num();
		
		//2.
		var name="kevin";
		var person={
			name:"kevin",
			fn(){
				console.log(this);
			}
		}
		person.fn();//{name: "kevin", fn: ƒ}
		
		//3.
		var name="Jason";
		var person1={
			name:"Jason",
			fn(){
				console.log(this);//{name: "Jason", fn: ƒ, fn1: ƒ}
			},
			fn1:()=>{
				console.log(this.name)//Jason
			}
		}
		person1.fn();
		person1.fn1();
		
		//4.
		</script>
	</body>
</html>

快乐的高兴的学习代码中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html中this的作用,HTML5前端之谈谈我对this的理解
weixin_31507527的博客
06-17 1355
原标题：HTML5前端之谈谈我对this的理解在全局作用域中声明的任何变量和函数默认都是作为window对象的属性而存在的this是在函数执行的过程中自动创建的一个指向一个对象的内部指针,this的指向不是固定的，会根据调用的不同，而指向不同的地方。 两个方向1. 全局作用域中使用this全局作用域中使用this，也就是说不在任何函数体内部使用this，那么这个时候this就是指的 window。...
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
10-14
在JavaScript中，函数的this指向是在运行时动态决定的，取决于函数被调用时的上下文环境。对于普通函数和匿名函数（也称为普通函数表达式），this的值是在函数被调用的时候决定的，而且如果函数是直接被调用（而不是...
替换this(3种)
前端码农
05-23 431
文章目录先准备数据call替换apply替换bind替换 先准备数据 const newobj={ uname:'小明', age:22, jub(a,b,c){ console.log(`I an ${this.uname} age ${this.age}`) console.log(a,b,c) } } const obj={ uname:'小红', age:120 }
小tips：JS中this操作执行像(object.getName = object.getName)()操作改变了this
weixin_33971130的博客
09-12 150
var name = "The window"; var object = { name: "My Object", getName: function(){ console.log(this.name); } } object.getName(); // My Object (object.getName)(); // My Ob...
html中的this指向
liuss7713的博客
12-29 1329
一、this谁调用就指向谁 1.在浏览器中，this指向的对象是window 2.在函数中，this指向调用它的哪个对象 3.在构造函数中，this指向new出来的新对象 4.在箭头函数中的this比较特殊，箭头函数this是父系的this，不是调用时的this 5.call、apply、bind中的this被强行绑定在某个对象上 call:参数是单个使用 apply:参数是一个数组，在数组里可以挂载上参数 bind:使用时会强行改变this指...
html中this的作用,JavaScript 中的 this ：工作原理和陷阱
weixin_36459429的博客
07-04 572
在 JavaScript 中，this 是一个相对难懂的特殊变量。因为它随处可用，而不仅仅是面向对象的编程中。本文将解释 this 是如何工作的，以及它可能导致问题的地方，并在文章的给出最佳实践。为了方便理解 this ，最好的方式是根据使用 this 的位置划分三种类型：在函数内部： this 是一个额外的隐含的参数。在函数外部(顶级作用域中)： this 在浏览器中指向全局对象；在 Node....
javascript中的this作用域详解
10-16
在这个例子中，FunA函数通过call方法以window对象为上下文执行，此时FunA内部的this指向window，使得FunA的value属性变为"AAA"。而FunB函数同样以window对象作为上下文执行，这并不影响FunB内部的this指向，因为它...
C++中this指针的用法
11-04
如果将`pstudent`替换为`this`，则可以将其视为C++中的类成员函数调用。 #### 六、this指针与其他特性 1. **函数表**：对于非虚成员函数和静态成员函数来说，并不存在专门的函数表来保存函数指针。但对于虚函数而...
对于this和$(this)的个人理解
09-05
`html(this.nodeName)`将元素的HTML内容替换为元素的节点名称，而`hide(10000)`则让元素在10秒内逐渐隐藏。 总结来说，`this`在JavaScript中代表当前上下文的对象，而在jQuery中，`$(this)`通常用于将JavaScript的`...
什么是this
05-08
在上面的例子中，this指向obj对象，因为fun方法是被obj对象调用的。 this的使用场景 1. 对象内部的方法，被对象自己调用 在对象内部的方法中，this总是指向当前对象自身。例如： ``` var obj = { ename: "eric...
html标签中的this使用介绍
12-13
如例： 复制代码代码如下: <html> <head> [removed] function showHint(str){ alert(str) ; } [removed] </head> <body> <input type=”text” onkeyup=”showHint(this.value)”/> <!–此处，在html标签中的this代表的是此标签–> </body> </html> 运行结果为：当通过键盘向文本框中输入字符后，当按键抬起时（即当keyup事件发生后），会显示按下的字符。
html关键字this,关于js里的this关键字的理解
weixin_29649047的博客
06-07 418
this关键字在c++，java中都提供了这个关键字，在刚开始学习时觉得有难度，但是只要理解了，用起来就方便多了，下面通过本篇文章给大家详解js里this关键字的理解。关于this，是很多前端面试必考的题目，有时候在网上看到这些题目，自己试了一下，额，还真的错了！在实际开发中，也会遇到 this 的问题(虽然一些类库会帮我们处理)，例如在使用一些框架的时候，例如:knockout，有时候不明白为什...
html关键字this,如何使用Javascript中的this关键字
weixin_35719380的博客
06-07 548
一、基本的：function doSomething(){alert(this.id);}alert(window.doSomething);//证明了doSomething是属于window的doSomething();//undefinedwindow.onload = function(){document.getElementById("div2").onclick = doSomethi...
html 方法this,jquery $(this)怎么用？
weixin_30383561的博客
06-29 706
jquery $(this)怎么用？this通常是一个Html 元素，例如(textbox)，textbox有text属性。可以在textbox的事件里面引用this获取元素$(this)通常是一个JQuery对象 ，可以调用jquery的方法和属性值，例如click(), keyup()。$(function () {$('button').click(function () {$(this)表...
html 函数 this,关于JavaScript中的this指向问题总结篇
weixin_42306503的博客
06-24 296
在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念：1:全局变量默认挂载在window对象下2:一般情况下this指向它的调用者3:es6的箭头函数中，this指向创建者，并非调用者4:通过call、apply、bind可以改改变this的指向下面我们具体分析一下1:在函数调用时(非严格模式)co...
html 怎样修改标签样式,html标签修改自带样式整理
weixin_29119475的博客
06-03 715
1用能境战求道，重件开又是正易里是了些之框. 标求圈分件圈浏第用代是水刚道。的它还签(1)修改前demo代码新直能分支调二浏页器朋代说：.......box{width: 500px;height: 200px;margin: 100px auto;background: pink;}hr{display: inline-block;width: 100%;margin: 100px auto;}...
HTML应用开发基础篇 - this 的使用
徐小mu的博客
12-18 572
this 是 JavaScript 语言的一个关键字，代表函数运行时，自动生成的一个内部对象。this 指向当前函数体的父级对象。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <bo...
HTML this 参数在JS中的使用方法
qq_39429962的博客
09-27 7630
在前端页面中，当我们需要为当前标签绑定某个事件时，一般的思路是给其绑定一个独一无二的id，但是当我们们的代码量比较大的时候，id命名就会变得很困难，而且对于每一个元素都要写一个js事件，这是代码重复就会产生，this指针的出现解决了这一现象，他会自动给js函数绑定当前标签，下边是一个实例： 实现鼠标放到div块上颜色改变： &lt;html&gt; &lt;head&gt; &lt;/h...
ES5 this关键字.html
weixin_42193179的博客
06-08 485
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this关键字</title> </head> <body> <!--示例6.在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。-->...
vue3中的this
最新发布
10-29
在Vue 2中，this指向组件实例，可以访问组件的data、computed、methods等属性和方法。但是在Vue 3中，this的指向发生了改变。 首先，Vue 3中使用了Composition API，可以使用setup()函数来创建组件。在setup()中，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值