--前端派-练功房-01-关于this指向的一些案例补充--

--前端派-练功房-01-关于this指向的一些案例补充--

外传

小虾米在完成每日任务之余,觉得自己对this的理解还不太深,虽然已经知道JavaScript当中this指向的一些问题,但觉得还是需要实战的一些demo来实际加强一下认识,于是写下这篇博客。
一来时常回顾加强认识,二来便于收集积累... ...
关于this的一些绑定内容,可查看博客:--外功篇-《JavaScript那些事》-01-理解This指向--

正传

demo-1:

function a1() {
	var c = 'a1';
	console.log(this);
	console.log(this.c);
}
a1();
//window  
//undefined

这个demo主要就是判断a1的运行环境,其执行环境在window中,this指向Window;
(严格模式下指向undefined)

demo-2:

var o = {
	c: 'a2',
	fn: function() {
		var c = 'a2 in fn';
		console.log(this);
		console.log(this.c);
	}
}
o.fn();
//o
//a2

这个demo则是判断对象函数的执行情况。fn在执行时,程序先在全局环境中执行,执行到o.fn,程序先进入o的执行环境,再执行fn,因此fn的执行环境在o中,this指向的是o;

demo-3:

function a1() {
	var c = 'a1';
	console.log(this);
	console.log(this.c);
}

var o = {
	c: 'a2',
	fn: function() {
		var c = 'a2 in fn';
		console.log(this);
		console.log(this.c);
	}
}

var o2 = {
	c: 'a3',
	fn: function(fnc) {
		fnc();
	}
}

o2.fn(o.fn);//window undefined
o2.fn(a1);//window undefined

demo-3则是通过对象函数传参的方式进行this的调用。
程序执行到o2.fn(),则会通过o2的运行环境进入fn的调用,fn函数执行传进来的形参函数,在内存中找到对应的形参函数本来的位置,此时形参函数的执行函数是在全局环境中的,所以执行环境还是window(也就是隐式绑定)。

离大侠再近一步!
原文地址:https://www.cnblogs.com/Samo-Li/p/13729583.html