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)();//