JS中this 在各种情况下的值

最新推荐文章于 2022-07-02 21:01:14 发布

A初

最新推荐文章于 2022-07-02 21:01:14 发布

阅读量310

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45148841/article/details/106846148

版权

JS中this 在各种情况下的值

之前对this的使用是很少的,导致在不遇到复杂的程序的情况下很少去用(JS写前台功能)下面简单对this的各种情况下的对应的值做一个说明,也为自己的学习做一个笔记

函数里面

直接上例子

  function  abc (){
  consoe.log(this);
  }
 abc();// window

其实任何严谨点的写法都是 window.abc();
所以这个时候你的this 就是window
意思就是调用的时候前面的对象就是this的指向

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
.obj1{
	width: 100px;
	height: 100px;
	background: red;
}
.obj2{
	width: 100px;
	height: 100px;
	background: blue;
}
</style>
<body>
	<div class="obj1" ></div>
	<div class="obj2" ></div>
</body>
<script type="text/javascript" >
var avc = document.querySelector(".obj1");//querySelector获取第一个.obj1的对象
var avd = document.querySelector(".obj2");//querySelector获取第一个.obj2的对象
avc.onclick = abce;//this 就是他上一级, 就是avc也就是obj1
avd.onclick = abce;//this 就是他上一级, 就是avd也就是obj2
function abce  ()
{
	this.style.background = 'yellow';//对象的背景色 
}
</script>
</html>

这是个很简单的例子,我想说的意思是 this在调用的时候,是默认获取这个函数里的上一级对象就是this

构造函数中

老规矩先上例子


 function abc () {
 this.num=10;
 console.log(this.num);//10
 }
 new  abc(); // 这个时候this 就是abc这个对象

因为new 这个就是把abc变成了一个对象且把这个对象和this进行了绑定.

 function abc () {
 this.num=10;
 }
 abc.prototype.num = 30;
 abc.prototype.abcd = function ()
 {
  num =  20; 
 console.log(this.num)
 }
 var  prototype1= abc.prototype;//{}
 var abcde = prototype1.abcd;// abc.prototype.abcd
 new abc().abcd();// this 之前的一个对象是 abc()所以this.num=10;
 abcde();//this 之前的一个对象是window 所以  this.num =  20
console.log(prototype1.num)//this 之前的一个对象是prototype1 所以 this.num =30

this 最终指定的对象就是他的上级,多层对象调用的话是第一个上级

下面是有return的情况this的值会根据return 的值来改变

是对象的情况下:

 function abc () {
  this.num =20;
 return {};
};
  var abcd= abc()
  var abcde= new abc()
  console.log(abcd)//{}
    console.log( abcde.num)//undefined

 function abc () {
  this.num =20;
 return {
 num:20;
 };
};
  var abcd= abc()
  var abcde= new abc()
  console.log(abcd)//{num:20}
    console.log( abcde.num)//20

不是对象的情况下:

 function abc () {
  this.num =20;
 return 1;
};
  var abcd= abc()
  var abcde= new abc()
  console.log(abcd)//1
    console.log( abcde.num)//20

null 的时候

 function abc () {
  this.num =20;
 return null;
};
  var abcde= new abc()
    console.log( abcde.num)//20

return 结论,如果是对象,就返回对象,如果不是对象就是他本身,null是特殊情况,返回的还是他本身

箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数)

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>火苗</title>
</head>
<style type="text/css">
.abc{
	width: 100px;
	height: 100px;
	background:red;
}
   </style>
<body>
    <div class="abc"  >
    </div>
</body>
<script >
	 var b =document.querySelector('.abc');
 b.onclick = abce;
 function abce() 
 {
 	setTimeout( ()=>{
 		this.style.width= '200px';
 	},1000)
 }
</script>
</html>

abce()里面的setTimeout中的就是箭头函数
正常情况下应该是:

function abce() 
 {
 var  a= this;
 	setTimeout( ()=>{
 		a.style.width= '200px';
 	},1000)
 }

再例如:

function abce() 
 {
 fn:()=> {
 console.log(this)//window
 }
  }

function abce() 
 {
 fn:function () {
 console.log(this)//abce
 }
  }

function abce() 
 {
 fn:()=> {
 console.log(this)//window
 }
  }
  abce.fn.call(b)//还是window,以为前面定义的时候就是window,所以没办法更改

箭头函数可以获取定义的上级作用域中的this指向,他本身是没有this的
注:箭头函数的this指向在定义他的时候就已经确定了,没办法更改的.

修改this指向

call(b,a)//b是对象,a是参数,
apply(b,[a])//b是对象,a是参数,
bind(b,a)///b是对象,a是参数,不会返回任何对象,因为bind这个不会执行方法,需要bind(b)();//

A初

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中this 在各种情况下的值

JS中this 在各种情况下的值之前对this的使用是很少的,导致在不遇到复杂的程序的情况下很少去用(JS写前台功能)下面简单对this的各种情况下的对应的值做一个说明,也为自己的学习做一个笔记函数里面直接上例子 function abc (){ consoe.log(this); } abc();// window 其实任何严谨点的写法都是 window.abc();所以这个时候你的this 就是window意思就是调用的时候前面的对象就是this的指向<!DOCT
复制链接

扫一扫