JavaScript中的this问题

Posted 2021-07-24 江州益彤

一、函数中的this

function Person(color) {
	console.log(this)
	this.color = color;
	this.getColor = function() {
		console.log(this)
		return this.color;
	};
	this.setColor = function(color) {
		console.log(this)
		this.color = color;
	};
}

Person("red"); //this是谁? window

var p = new Person("yello"); //this是谁? p

p.getColor(); //this是谁? p

var obj = {};
p.setColor.call(obj, "black"); 	//this是谁?	obj
								//setColor作为obj对象的方法调用
var test = p.setColor;
test(); //this是谁?	 window

function fun1() {
	function fun2() {
		console.log(this);
	}
	fun2(); //this是谁?	 window
}
fun1();

1. this是什么?
   * 一个关键字, 一个内置的引用变量
   * 在函数中都可以直接使用this
   * this代表调用函数的当前对象
   * 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的

2. 如何确定this的值?
   * test() window
   * obj.test() obj
   * new test() 新建的对象
   * test.call(obj) obj

    前置知识:
      * 本质上任何函数在执行时都是通过某个对象调用的
   

			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				console.log(this.name);
			}
			
			//创建两个对象
			var obj = {
					name:"孙悟空",
					sayName:fun
			};
			
			var obj2 = {
					name:"沙和尚",
					sayName:fun
			};
			
			//我们希望调用obj.sayName()时可以输出obj的名字
			obj.sayName();//孙悟空
			obj2.sayName();//沙和尚

在函数中直接使用

//##在函数中直接使用
function get (content) { 
console.log(content)
}
get('你好')
get.call(window, '你好window')//在函数中直接使用,第一个参数是window对象

函数作为对象的方法被调用(谁调用我我就指向谁)

var person = {
	name: '彤彤',
	run: function(time) {
		console.log(`${this.name} 在跑步 最多${time}min就不行了`)
	},
}
//下面两种方式等效
person.run(30)//函数作为对象的方法被调用(谁调用我我就指向谁),run是person对象的方法
person.run.call(person,30)

阿里面试题

var name = 222
var a = {
	name: 111,
	say: function() {
		console.log(this.name)
	}
}
var fun = a.say
fun()			//222	fun.call(window)
a.say()			//111	a.say.call(a)
var b = {
	name: 333,
	say: function(fun) {
		fun()
	},
}
b.say(a.say)	//222	say.call(window)
b.say = a.say
b.say()			//333	b.say.call(b)

二、箭头函数中的this

●箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。
●箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。 正是因为它没有this,所以也就不能用作构造函数。
●箭头函数中的this是在定义函数的时候绑定
:
因为箭头函数没有this
:
指向最近的外部函数的this
:
外面没有函数就指向全局咯

var a = 1;
var obj = {
	a: 2,
	say: () => {
		console.log(this.a);
	},
}
obj.say();//1

所谓的定义时候绑定，就是this是继承自父执行 上下文中的this,比如这里的箭头函数中的this.a,箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.a实际上表示的是window.x,因此输出的是1。

<script type="text/javascript">
	let birth: 1991;
	
	var obj = {
		birth: 1990,
		getAge: function() {
			var b = this.birth; // 1990
			var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
			return fn();
		}
	};
	console.log(obj.getAge())//31
</script>

例子中箭头函数本身是在getAge方法中定义的，因此, getAge方法的父执行上下文是obj，因此这里的this指向则为obj对象