JavaScript中的this关键字

时间:2021-12-15 19:36:48

this 关键字在 JavaScript 中既常用,功能又强大,但很多时候容易混淆其指向的对象。下面通过两个例子来理解一下 this

看第一个例子:

var style = {
  color: "Window Color"
};
var object = {
  style: {
    color: "Object Color"
  }
};
function sayColor(){
  console.log(this.style.color);
}
//使用.bind() 改变函数 this 指向
varsayObjectColor = sayColor.bind(object);
//调用
sayColor(); //"WindowColor"
sayColor.call(); //"Window Color"
sayColor.apply(); //"Window Color"
sayColor.call(object); //"Object Color"
sayColor.apply(object); //"Object Color"
sayObjectColor(); //"Object Color"

前三次调用时,this指向 window 对象,后三次调用时,this 指向 window.object 对象,其中最后一次通过 .bind() 改变了函数的 this 指向,有关 .bind() 在之后的博客中会进一步探讨。

补充:call() apply()

通过 call() apply() 可以改变函数调用的上下文,两者功能相同,区别仅仅在于接收参数的方式不同:

1. call() 方法第一个参数为函数调用的上下文,其余参数直接传递给函数,传递的参数必须逐个列举;

2. apply() 方法第一个参数为函数调用的上下文,另一个是参数数组,可以是Array的实例,也可以是arguments对象。

再看一个复杂一点的例子:

var name = "WindowName";var firstObj = {  name: "First Object Name",  getName: function() {    return this.name;  }};var secondObj = {  name: "Second Object Name",  getName: function() {    return function() {      return this.name;    };  }};var thirdObj = {  name: "Third Object Name",  getName: function() {    var that = this; //定义that变量,保存this对象    return function() {      return that.name; //通过闭包访问    };  }};//调用firstObj.getName(); //"First Object Name"secondObj.getName()(); //"Window Name"thirdObj.getName()(); //"Third Object Name"

其中,第一次调用时this 指向 firstObj ,因为 fristObj.getName是一个函数,而它通过 firstObj.getName() firstObj 上下文中被调用。

第二次调用时 this指向 window ,因为 secondObj.getName() 是一个函数,而它通过 secondObj.getName()() window 上下文中被调用。

第三次调用时,用到了闭包闭包是指有权访问另一个函数作用域中的变量的函数,在这里通过闭包访问到了 getName 中定义的 that 变量,而该变量中的 this 指向 thirdObj

有关闭包我们放到下一篇博客中去探讨,博客地址:

http://xitongjiagoushi.blog.51cto.com/9975742/1672553

最后,总结成一句话,this 的指向是由它所在函数调用的上下文决定的,而不是由它所在函数定义的上下文决定的

 

完。


拓展阅读:

JavaScript事件中的this http://www.quirksmode.org/js/this.html

本文出自 “细桶假*” 博客,请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1670529