1. 事件调用环境
谁触发的this指向谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: #999;
margin: 10px;
}
</style>
</head>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</body>
<script>
const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
box1.onclick = clickBox;
box2.onclick = clickBox;
function clickBox (){
console.log(this);
};
</script>
</html>
如上代码，分别给box1,box2绑定了clickBox方法，如果点击的是box1，则clickBox中的this就会指向当前点击的box1元素。
2.函数内部this指向
(1)非严格模式下直接调用test时，this指向的是window
function test(){
console.log(this); // window
};
test();
(2)非严格模式下直接调用test时，this指向的是window
'use strict';
function test(){
console.log(this); // undefined
};
test();
(3)对象中的this指向
this最终指向的是调用它的对象
函数呗多层对象所包含，如果函数被最外层对象调用，this指向的是它上一级的对象。
b是obj对象上的一个方法，通过obj.b或者window.obj.b执行时，是b方法是b的上一级obj调用的，this指向obj;
var obj = {
a:'11',
b:function(){
console.log(this);//obj
}
};
obj.b();
window.obj.b();
同理，调用fn的时候，fn是由上一级b调用的，所以this指向的是b。
var obj = {
a:'11',
b:{
fn:function(){
console.log(this);// b
}
}
};
obj.b.fn();
将obj.b.fn方法复制给变量abc,此时fn方法并没有执行，而是将fn赋值给abc,此时abc也就是一个function了，当执行abc时，实际是window.abc，则此时this指向的上一级就是window。
var obj = {
a:'11',
b:{
fn:function(){
console.log(this);//window
}
}
};
let abc = obj.b.fn;
console.log(typeof abc);//function
abc();
3.构造函数
构造函数需要使用new关键字，new关键字使用时会有以下几步：
- 1.调用函数
- 2.自动创建一个空对象
- 3.把创建出来的对象和this进行绑定
- 4.如果构造函数（Fn）没有返回值，隐式返回this对象，如果(Fn)有返回值（如：return {d:'d'}）,则返回构造函数中的返回值。
判断this指向(没有返回值)
function Fn (){
this.num = 1;
}
Fn.num = 2;
Fn.prototype.num = 3;
Fn.prototype.method = function(){
console.log(this);
};
此时实例化Fn,newFn就是Fn构造函数，调用newFn.method时，method就指向了Fn，因为Fn内部没有this.method方法，所以会查找prototype上的method,此时method方法中的this指向的是Fn构造函数；
newFn.num执行时，发现构造函数内有this.num，则输出的是1，如果this.num=1不存在的话，则会调用prototype.num，那个时候newFn.num就会是3了。
而直接调用Fn.num就会查找的是Fn构造函数上的num，
即：Fn.num
var newFn = new Fn();
newFn.method();
console.log(newFn.num);
console.log(Fn.num);// 2
下面定义prototype为Fn.prototype，则调用method方法时，实际就是调用的prototype上的method,此时method的上一级是Fn的prototype，所以this指向的是Fn.prototype，如果method中输出this.num，则此时num指向的就是Fn.prototype.num = 3;,即method中的num是3;
var prototype = Fn.prototype;
prototype.method();
如果再次将prototype.method赋值给method变量，则执行method时，上一级实际为window，此时method中的this就是window对象了（非严格模式，严格模式为undefined）
var method = prototype.method;
method();
判断this指向（有返回值）
如果构造函数有返回值,并且返回值是对象、数组、函数、Date、RegExp等内置对象，此时在调用Fn上的相关方法指向的都是返回的对象，如下返回的{dd:'11'}对象
function Fn (){
this.num = 1;
return {
dd:'11'
}
}
Fn.num = 2;
Fn.prototype.num = 3;
Fn.prototype.method = function(){
console.log(this);
};
此时newFn实际就是{dd:'11'}，执行newFn.method就会报错，因为此时newFn指向的是返回值，而不是Fn构造函数了，{dd:'11'} 上并没有method方法。
var newFn = new Fn();
newFn.method();
4.箭头函数
箭头函数本身没有this和arguments，在箭头函数中引用this实际调用的是定义的上一层作用域的this。(对象是没有作用域的)
如下，在上文中我们知道对象中的方法执行时，this指向是指向调用它的上级的。在obj.c方法调用时是没有问题的，但是如果是箭头函数，则箭头函数中的this在定义箭头函数的时候就被指定到上一层作用域了，而对象没有作用域，因d方法中的this在非严格模式下就指向上层的window对象了。
var obj = {
c:function(){
console.log(this);
},
d:()=>{
console.log(this);
}
};
obj.c();// obj
obj.d();// window
5.修改this指向
可通过call,apply,bind实现
网友评论