JS中的this值

发表于

什么是This

this是一个与执行上下文相关的特殊对象，当代码访问this的时候，它的值是从执行上下文中获取的，并不需要任何作用域链的查找。this的值在进入上下文的时候进行一次确定。

同一个函数，在不同的上下文中进行调用的时候，this的值是不同的。this的值指向函数被调用时所在的执行环境。

  • 如果一个函数在全局环境中运行，那么this就是指顶层对象（浏览器中为window对象）。

    1
    2
    3
    function fn(){
      console.log(this)   //window
    }

函数的call

任何函数都可以用function.prototype.call()的形式来调用，其中call的第一个参数会变为函数里的this，call的其他参数组成函数里面的arguments。

1
2
3
4
5
6
7
8
9
10
11
12
function f(){
  console.log(this)
  console.log(arguments)
}
var a ={name:'tom'}
f.call(a,1,2,3) 
*call第一个参数会当作this，后面的会当做arguments
*每次进入函数之前，都会创造this和arguments这两件事情
---------------
f()等价于f.call（）
object.f(1,2,3)等价于 obj.f.call(obj,1,2,3)  //this为obj

this 就是你 call 一个函数时，传入的第一个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var A = {
  name: 'Tom',
  describe: function () {
    return '姓名：'+ this.name;
  }
};
var B = {
  name: 'Jack'
};
B.describe = A.describe;
A.describe()  //"姓名：Tom"
B.describe()  // "姓名：Jack"
--------------
A.describe() 转换为 A.describe.call(A)，this就是A，那么this.name即 Tom；
同样的，B.describe() 可以转换为B.describe.call(B),this就是B，那么this.name即Jack

如何确定this的值

1.看源码中对应的函数是怎么被call的

2.看文档

  • 1
    2
    3
    btn.addEventListener('click' ,function handler(){
      console.log(this) // 请问这里的 this 是什么
    })

    EventTarget.addEventListener()处理过程中 this 的值的问题，在MDN文档中是这样说的：

    通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。

    当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

    所以，上面this指的就是事件被监听的元素btn

3.打印出来console.log(this)