js中this不同场景中的含义

1. 全局函数

在全局环境中,this指向Window

 function A(){
    console.log(this)
 }
  A();//Window

2. 对象方法

作为对象方法调用时,this指向调用该方法的对象

var b={
	getThis:function(){
		console.log(this)
	}
b.getThis()//b

下面这个例子不太一样,有点难度,一般会入坑

var c ={
	getFunc:function(){
		return function(){
			console.log(this)
	 	}
	  }
 }
 var cFun =  c.getFunc()
 cFun()//window

这个例子和前一个例子不一样,运行c.getFunc()时,首先返回的是一个匿名函数,我们将这个函数赋值给cFun,接着在全局环境中调用了cFun(),此时this指向的还是Window。

如果我们一定要让这里返回的时c对象呢?在开头我们说过,this对象实在函数执行时确定的,在例子3中,执行c.getFunc()时,this对象指向的还是c,所以我们只要包吃住这个this就好了,对上面的代码稍微改动:

var c={
	getFunc:function(){
		var that = this //在这里保留住this
			return function(){
				console.log(that)
			 }
	  }
	}
	var cFun = c.getFunc()
	cFun() //c

3. call 和apply

此时this对象通常指向函数中制定的this值(注意这里的通常2字)

//例子5
var d = {
getThis:function(){
 console.log(this)
}
}
var e = {
name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

这里我们可以看出call函数:指定一个对象o1去调用其他对象o2的方法,此时this对象指向o1.
前面说的通常是有线面这种情况的,这里thisArg是可以指定为null和undefind。请看:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此时的this指向全局对象Window

4. 箭头函数

es6 中的箭头函数现在也用的比较频繁,但是有个需要注意的点是:函数体内的this对象,就是定义该箭头函数时所在的对象,而不是使用时所在的对象。
其实出现这种情况根本原因是:箭头函数没有this对象,调用箭头函数的this时,指向是其声明时所在的作用于的this.

//例子7
 var f = {
	 getThis:()=>{
   		console.log(this)
  		}
 }
 f.getThis()//Window
     	

这个例子和前面例子2是基本一样的,只是把普通函数改写成箭头函数,但是此时的this对象已经指向了外层的Window。

  • 总结

1、 JavaScript中this关键字代表的是一个函数的上下文环境,这个上下文环境在大多数情况下指的是函数运行封装这个函数的那个对象。
2、当不通过任何对象单独调用一个函数时,上下文环境指的就是全局的window对象。在一个对象的方法中使用this指向的是这个对象本身。
3、对象中嵌套函数其上下文环境是全局的window对象,而非包含它的那个对象。
在call和apply函数中this指向指定的对象,如果指定的对为undefined或者null,那么this对象指向Window
在箭头函数中,this对象等同于外层代码块的this

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章