地狱猫

this指向

如何判断this 指向 就需要找到这个函数的直接调用位置 找位置之后再确定this指向

  1. 默认情况下 严格模式绑定到undefined,非严格模式 绑定全局上window
  2. new 调用 直接指向new 创建的新对象
  3. call ，apply，bind 指向指定的 绑定对象,若果第一个参数传入的为null和undefined，指向全局对象
  4. es6的箭头函数没有自己的this, 他的this指向取决于函数定义时所在的上下文
  5. 事件绑定函数中的this指向当前操作的元素
  6. 作为obj对象时，this指向obj
  7. 作为function时,this指向function对象

参考文档 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

demo

单独函数

function foo(){
	//'use strict'
	this.name = 'foo';
	console.log(this);
}
//1-a:直接调用
foo()//this->window   严格模式下：this->undefined 此处报错
//1-b:构造函数调用
var f = new foo();//this ->f对象
//1-c: call,apply
var obj = {name:'obj',xxx:'this is a test!'}
var f1 = foo.call(obj);//this->obj
var f2 = foo.apply(obj);//this->obj
//1-d bind
var bindObj = {name:'bindObj'}
var f3 = foo.bind(bindObj);
f3();//this->bindObj
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

对象方法中的this

var person = {
	name:'zhangsan',
	sayName:function(){
		console.log(this);
		return this.name;
	}
}
//2-a:通过 对象.方法的形式调用 this 指向调用的对象
person.sayName();// this->person
//2-b:外层变量对对象下方法的引用
var s = person.sayName;
//这时候  s 就回到我们之前说的情况1：单独函数 一样了

//无论函数是以对象方法存在还是 单独函数形式存在  我们拿到该函数的指针变量s 无论在哪里单独调用s()
//此时函数内部的 this 严格模式指向 undefined   非严格模式指向 window
//比如：
//
function bar(){
	s();//s函数内部this->window(严格模式 undefined)
}

domObj.addEventListener('click',function(){
	console.log(this);
	s();//s函数内部this->window(严格模式 undefined)
});
//这里 对dom元素设置监听事件 回调函数内部的this 指向  该dom对象
//下面的例子 更直观 跟2：对象方法中的this 调用  对象.方法名 类似
domObj.onclick = function(){
	console.log(this);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

箭头函数

箭头函数内部不存在自己的this ，这个this 只是定义该函数是所在的对象，而不是使用时所指的对象

var arrow = ()=>{console.log(this)}
arrow();//this->window

var person = {
	name:'zhangsan',
	sayName:function(){
		console.log(this);
		arrow();//arrow函数内部this->window
		var a1 = ()=>{console.log(this)}
		a1();//a1中this 指向  person(定义时所在的对象)
		return this.name;
	}
}
person.sayName();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← call,apply→