js中的this(第六周)
this是很多编程语言中的关键字,在JavaScript中一般这样理解this:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。
this指向的情况,取决于函数调用的方式有哪些:
- 通过函数名()直接调用的:this指向window
- 通过对象.函数名()调用的:this指向这个对象;
- 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
- 函数作为window内置函数的回调函数调用时:this指向window.setTimeout(func,XXms);setInterval(func,XXms)等
- 函数作为构造函数,用new关键字调用时:this指向的是new出的新对象
- 通过函数指定,用apply()\call()\bind() 方法指定this
- 箭头函数中的this问题,指向为定义时的this,而不是执行时的this
1. 通过函数名()直接调用的:this指向window
- 场景一 (函数名直接调用)
function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } myobj();//等价于 window.myobj();
函数执行中this指向的并不是函数本身,(函数也是对象),而是调用它的对象,我们知道,浏览器的全局变量是window,所以这里的this指向window,当然window.mynmme 为 undifined
2. 通过对象.函数名()调用的:this指向这个对象;
- 场景二 (对象.函数名调用)
var myname = "我是window的name"; function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } var a = { fun:myobj, //将函数myobj 赋值给a.fun myname:"我是a的name" }; myobj(); a.fun();
直接调用myobj();实际上是window.myobj(),所以调用myobj的是全局window,所以这里的this指向window,
而将myobj赋值给a对象的fun属性后,调用a.fun(),就是a来调用myobj(),所以this指向a
- 场景三 (对象.对象.函数名调用)
var myname = "我是window的name" function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } var a = { myname:"我是a的name", fun:myobj, b:{ myname:"我是b的name", fun:myobj } } myobj(); a.fun(); a.b.fun();
这里没有什么好说的,对象多级嵌套,this指向调用它的那个对象,即被调用函数的上一级对象
- 场景四 (函数名直接调用变种)
var myname = "我是window的name"; function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } var a = { fun:myobj, //将函数myobj 赋值给a.fun myname:"我是a的name" }; a.fun(); var b = a.fun; b();
这里现象好像很奇怪,下面是我个人的理解方式,看下图:
3. 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
- 场景五 (数组下标调用)
var myname = "我是window的name"; function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); console.log(this[0].myname);//打印数组第0个元素myname属性 } var myarr = [{myname:"我是myarr[0]的name"},myobj];//新建以数组对象 myarr.myname = "我是myarr的name";//为数组对象添加myname属性 myarr[1]();//数组下标方式调用函数
4. 函数作为window内置函数的回调函数调用时:this指向window.setTimeout(func,XXms);setInterval(func,XXms)等
- 场景六 (window内置函数调用)
var myname = "我是window的name"; function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } setTimeout(() => { myobj(); }, 1000);
5. 函数作为构造函数,用new关键字调用时:this指向的是new出的新对象
- 场景七 (作为构造函数,new关键字调用)
var myname = "我是window的name"; function Myobj(){ //构造函数通常首字母大写 this.myname = "发挥不广泛"; console.log(this); console.log(this.myname); } var mobj = new Myobj();
如果函数没写return ,系统会默默的在函数的结尾加return undefined;
new关键字调用函数是会忽略return undefined,(自己写的return undefined也会被忽略),
new关键字调用没写return(或者写了return undefined)函数是会在函数结尾默默加 return this(试了一下,这样并不能成功,不过可以这样理解)
6. 通过函数指定,用apply()\call()\bind() 方法指定this
- 场景八 (通过函数指定this)
var myname = "我是window的name"; function myobj(){ var myname = "发挥不广泛"; console.log(this); console.log(this.myname); } var a = { myname:"我是a的name" }; myobj.apply(a);
7. 箭头函数中的this问题,指向为定义时的this,而不是执行时的this
箭头函数中的this下次分析
<完>
20180901
发挥不广泛