web前端开发个人技术博客
当前位置: 前端技术 > 如何理解JavaScript中的this

如何理解JavaScript中的this

2018-12-10 分类:前端技术 作者:码云 阅读(79)

JavaScript中的 this 对于初学者来说是个难点,对于老手也会困惑。之前有一个小伙伴一直问我this的相关问题,所以今天抽出点时间深入的带大家理解this。希望通过我的理解能够对正在处于对this困惑的你指引方法,让你再也不用怕JavaScript中的this了,让你明白在各种情况下使用this。JavaScript 的 this 关键词是很不一样,因为 JavaScript 本来就不是一门基于类的面向对象编程语言。this 就是一个指针,指向我们调用函数的对象

this 本身原本很简单,总是指向类的当前实例,this 不能赋值。这前提是说 this 不能脱离 类/对象 来说,也就是说 this 是面向对象语言里常见的一个关键字。说的极端点,如果你编写的 JS 采用函数式写法,而不是面向对象式,你所有的代码里 this 会少很多,甚至没有。记住这一点,当你使用 this 时,你应该是在使用对象/类 方式开发,否则 this 只是函数调用时的副作用。

this关键词基础知识

首先你要知道JavaScript中所有的函数都有属性,就如对象有属性一样。函数执行时会获取this属性的值,此时this就是一个变量,储存着调用该函数的对象的值。

this这个引用总是指代对象并储存着它的值(只能指代一个对象),一般都在函数或者对象方法里使用,但是也能用在函数外的全局作用域里。需要注意的是,如果在函数里使用严格模式,全局函数里this的值就是undefined。而在匿名函数里则不会绑定任何对象。

假设在函数A里使用this,它就储存着调用函数A的对象的值。要获取调用函数A的对象的属性和方法,就需要用到this,特别是当我们不知道改对象的名称或者没有名称可以指代该对象。所以,需要用this作为一个快捷方式来指代“先行对象”,也就是调用函数的对象。

思考一下下面这段代码,它展示了如何在JavaScript中使用this:

1
2
3
4
5
6
7
8
9
10
var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    //因为下方的showFullName方法使用了“this”关键词而且该方法是在person对象里定义的,
    //那么“this”就会储存着person对象的值,因为该对象会调用showFullName()方法
    showFullName:function () {
    console.log (this.firstName + " " + this.lastName);
    }
    }
    person.showFullName (); // Penelope Barrymore

接着看一下下面很基础的jQuery范例代码,相信大家都见到过,这里面也用了this这个关键词:

1
2
3
4
5
$ ("button").click (function (event) {
    //$(this)会储存按钮对象($("button"))的值
    //因为click()方法是由该按钮对象调用的
    console.log ($ (this).prop ("name"));
});

JavaScript this关键词在jQuery里的语法形式是$(this),它被用在一个匿名函数里面,而该函数则在按钮对象的click()方法里执行。$(this)会被绑定到按钮对象,是因为jQuery库将$(this)绑定到了调用click方法的对象中。所以尽管$(this)在匿名函数里定义且该函数本身无法访问外部函数的this变量,$(this)还是储存着jQuery按钮对象$(“button”)的值。

需要注意的是,该按钮不但是HTML页面的DOM元素,而且是一个对象。因为我们将它封装在 jQuery $()函数里,在这种情况下它就是一个jQuery对象。

this 关键词使用误区

只有当定义this的函数被对象调用时,this才会被赋值。如果你理解这个JavaScript原则,那么你就能深刻地理解this关键词。我们暂且将定义this的函数称为“this函数”。

尽管表面上看起来this指代的是定义它的对象,但只有当THIS函数被一个对象时,this才会被赋值。该值完全取决于调用THIS函数的对象。在大部分情况下,this储存的都是调用对象的值。然而少数情况下this储存的却不是调用对象的值,稍后我会讨论这些情况。

全局作用域下this的使用

当代码在浏览器里执行时,全局作用域里的所有全局变量和函数都在window对象里定义,所以在全局函数里使用this,它指代window对象并储存着该对象的值(如上文提到的一样,严格模式除外)。window对象是整个JavaScript程序或网页的主储存器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var firstName = "Peter",
lastName = "Ally";

function showFullName () {
    //这个函数里的"this"会储存window对象的值
    //因为与变量firstName和lastName一样,showFullName()函数是在全局作用域里定义的
    console.log (this.firstName + " " + this.lastName);
 }

var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    showFullName:function () {
    //这行的"this"指代person对象,因为showFullName函数会被person对象调用
        console.log (this.firstName + " " + this.lastName);
    }
}

showFullName (); // Peter Ally​

//因为所有全局变量和函数都是在window对象里定义的,所以:
window.showFullName (); // Peter Ally​

//showFullName()方法定义于person对象里,它里面的"this"依旧指代person对象,所以:
person.showFullName (); // Penelope Barrymore

this最容易用错的情况

this关键词在下列情况下最容易被用错:

  • 当使用this的方法被“借用”时;
  • 当使用this的方法被赋值给变量时;
  • 当使用this的方法被用作回调函数时;
  • 当this被用于闭包-内部函数里时。

下面我将通过代码例子一一探讨每种情况是如何发生的,同时给出让this获取正确值的方法。
函数可以在一个对象里定义并将其作为自己当前的上下文环境,也可以被其他对象调用,从而将上下文环境换成那个对象。

在JavaScript代码里可以做类似的事情:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    showFullName:function () {
        // “上下文环境”
        console.log (this.firstName + " " + this.lastName);
    }
}

//当调用在person对象上定义的showFullName方法时,其“上下文环境”就是person对象
//showFullName()方法里的this储存着person对象的值
person.showFullName (); // Penelope Barrymore​

//如果用其他对象来调用showFullName()方法:
​var anotherPerson = {
    firstName   :"Rohit",
    lastName    :"Khan"
};

//可以使用apply方法将this的设为特定的值 - 稍微会继续讨论apply()方法
//无论哪个对象调用了this,this都会获取该对象的值,所以:
person.showFullName.apply (anotherPerson); // Rohit Khan​

//所以上下文环境现在就是anotherPerson对象,因为是它通过使用apply()方法调用了person.showFullName ()这个方法

总结:调用this函数的对象就是其上下文环境,但其他对象调用this函数就会变成其上下文环境。

使用this的方法被用作回调函数时

当使用this的方法作为回调函数传给其他函数时,这种情况就有点棘手。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//创建一个包含clickHandler()方法的简单对象,当页面上的按钮被点击时可以使用
var user = {
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function (event) {
        var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 01之间的随机整数
        //这行代码从data数组里随机获取名字(person's nam)和年龄(age)并输入
        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
    }
}
//button被封装在jQuery的美元符封装器($)里,所以可以直接作为jQuery对象使用
//因为button对象没有data属性,所以结果为undefined
$ ("button").click (user.clickHandler); //无法获取undefined名为“0”的属性

上面的代码中,按钮($(“button”))本身就是一个对象,我们将user.clickHandler()方法作为其click()方法的回调函数传入,所以user.clickHandler()方法里的this将不再指代user对象。现在this指代的是执行user.clickHandler()方法的对象。虽然this是在user对象里定义的,但是button对象调用了user.clickHandler()方法 - 确切的说,user.clickHandler()方法是在button对象的click()方法里被执行的。

需要注意的是,尽管我们是通过user.clickHandler()这种形式(必须这样子做,因为clickHandler()是在user对象里定义的方法)来调用clickHandler () 方法的,clickHandler () 方法被执行时其上下文环境是button对象,所以this现在指代的是button对象($(“button”))。

说了这么多,应该很清楚了:当上下文环境改变时,也就是说方法在一个对象里定义却到另外一个对象里执行时,this关键词不再指代原对象,而是指代调用该方法的对象。

当方法作为回调函数时,让this获取正确值的方式

如果要让this.data指代user对象的data属性,可以使用Bind (),Apply ()或者Call ()方法给this设置特定的值。

在我另一篇文章《JavaScript的Apply、Call和Bind方法》里,详细地探讨了这些方法,并讲解了如何在各种容易出错的情况下使用他们正确设置this的值。这里就不重发一遍了。我觉得这篇文章作为JavaScript程序员都应该读一读,建议你好好看一下。

要解决前例的问题,可以使用bind()方法,所以我们不这么写:

1
$ ("button").click (user.clickHandler);

而是这样子将clickHandler()方法绑定到user对象:

1
$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43

this被用于闭包时

另外一种this容易被用错的情况是使用闭包。一定要记住,闭包使用this关键词无法访问外部函数的this变量。函数的this变量只能被自身访问,其内部变量不行。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var user = {
    tournament:"The Masters",
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function () {
        //在这里使用this.data是没问题的,因为“this”指代的是user对象而data是user对象的属性
        this.data.forEach (function (person) {
            //但在这个匿名函数(作为forEach方法的参数)里,“this”不再指代user对象
            //这个内部函数无法访问外部函数里的“this”
            console.log ("What is This referring to? " + this); //[object Window]

            console.log (person.name + " is playing at " + this.tournament);
            // T. Woods is playing at undefined​
            // P. Mickelson is playing at undefined​
        })
    }

}

user.clickHandler(); // What is "this" referring to? [object Window]

匿名函数里的this无法访问外部函数的this,所以在非严格模式下其被绑定了window对象上。

在匿名函数里让this获取正确的值

在匿名函数里使用this,然后将函数传入为forEach()方法的参数,会出问题。解决这个问题可以用JavaScript里一种常用的手法。在将匿名函数传给forEach()方法前,将this赋值给其他变量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var user = {
    tournament:"The Masters",
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    clickHandler:function (event) {
        //要在“this”指代user对象时获取到它的值,我们必须将其值传给其他变量:将“this”的值传给theUserObj变量,以待后面使用
        var theUserObj = this;
        this.data.forEach (function (person) {
            //不用this.tournament,而用theUserObj.tournament​
            console.log (person.name + " is playing at " + theUserObj.tournament);
        })
    }
}

user.clickHandler();
// T. Woods is playing at The Masters​
//  P. Mickelson is playing at The Masters

值得注意的是,很多程序员喜欢将变量命名为that(见下方例子),然后将this赋值给它。个人觉得使用“that”这个词太过简单粗暴,我尽量让命名体现this指代的对象,所以我才在上面的代码中使用theUserObj = this。

1
2
// 程序员的常用手法
var that = this;

this的方法被赋值给变量时

如果将方法赋值给变量,与我们期望的不同,this的值绑定的会是另外一个对象。比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//此处的data是全局变量
var data = [
    {name:"Samantha", age:12},
    {name:"Alexis", age:14}
];

var user = {
    //此处的data是user对象的属性
    data:[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],
    showData:function (event) {
        var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // 01之间的随机整数
    ​
        //这行代码由data数组里产生一个随机的person数据加到text字段里
        console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
    }
}

//将user.showData赋值给变量
var showUserData = user.showData;

//当执行showUserData()函数时,控制台输出的值来自全局的data数组,而不是user对象的data数组
showUserData (); // Samantha 12 (来自全局的data数组)

在方法被赋值给变量时让this获取正确的值

我们可以用bind()方法设置this的值来解决问题:

1
2
3
4
5
//将showData方法绑定到user对象上
var showUserData = user.showData.bind (user);

//因为this关键词绑定到了user对象上,现在得到的是user对象的值
showUserData (); // P. Mickelson 43

当使用this的方法被“借用”时

在JavaScript开发里借用其他对象的方法是很常见的行为,作为JavaScript开发者当然时不时会这样子做,以此来节省开发时间。我在另外一篇文章里深入剖析了如何借用其他对象的方法:《JavaScript的Apply、Call和Bind方法》。

我们来看下方法被借用后,this是如何指代对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//这里有两个对象,一个有叫avg()的方法而另外一个没有
//所以我们会让另外一个对象借用一下该方法
var gameController = {
    scores  :[20, 34, 55, 46, 77],
    avgScore:null,
    players :[
        {name:"Tommy", playerID:987, age:23},
        {name:"Pau", playerID:87, age:33}
    ]
}

var appController = {
    scores:[900, 845, 809, 950],
    avgScore:null,
    avg:function () {
        var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
            return prev + cur;
    });
    ​
        this.avgScore = sumOfScores / this.scores.length;
    }
}

//如果运行下方代码,gameController.avgScore属性就会被设置为由appController对象"scores"数组得出的平均分数

//别运行下面这行代码,它只作展示用。让appController.avgScore的值为null
gameController.avgScore = appController.avg();

avg方法的this关键词不会指代gameController对象,而是指代appController对象,因为调用它的是appController对象。

方法被借用时让this获取正确的值

要解决问题,确保appController.avg () 里的this指代的是gameController对象,this 可以被 call/apply 改变,所以我使用apply ()方法:

1
2
3
4
5
6
7
8
//注意使用的是apply()方法,所以第二个参数必须是数组-这些参数最后都会被传给appController.avg()方法
appController.avg.apply (gameController, gameController.scores);

//gameController对象上的avgScore属性成功设置,尽管avg()方法是从appController对象借过来的
console.log (gameController.avgScore); // 46.4

//appController.avgScore依然未null,其值没有被更新,只有gameController.avgScore的值被更新了
console.log (appController.avgScore); // null

avg方法的this关键词不会指代gameController对象,而是指代appController对象,因为调用它的是appController对象。

this 可以被 call/apply 改变

call()/apply() 是函数调用的另外两种方式,两者的第一个参数都可以改变函数的上下文 this。call/apply 是 JS 里动态语言特性的表征。动态语言通俗的定义 程序在运行时可以改变其结构,新的函数可以被引进,已有的函数可以被删除,即程序在运行时可以发生结构上的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var m1 = {
    message: 'This is A'
}
var m2 = {
    message: 'This is B'
}  
 
function showMsg() {
    alert(this.message)
}
 
showMsg() // undefined
showMsg.call(m1) // 'This is A'
showMsg.call(m2) // 'This is B'

可以看到单独调用 showMsg 返回的是 undefined,只有将它绑定到具有 message 属性的对象上执行时才有意义。发挥想象力延伸下,如果把一些通用函数写好,可以任意绑定在多个类的原型上,这样动态的给类添加了一些方法,还节省了代码。这是一种强大的功能,也是动态语言的强表现力的体现。

结束语

函数的上下文 this 是 JS 里不太好理解的,在于 JS 函数自身有多种用途。目的是实现各种语言范型(面向对象,函数式,动态)。this 本质是和面向对象联系的,和写类,对象关联一起的, 和“函数式”没有关系的。如果你采用过程式函数式开发,完全不会用到一个 this。 但在浏览器端开发时却无可避免的会用到 this,这是因为浏览器对象模型(DOM)本身采用面向对象方式开发,Tag 实现为一个个的类,类的方法自然会引用类的其它方法,引用方式必然是用 this。当你给DOM对象添加事件时,回调函数里引用该对象就只能用 this 了。this的上下文环境一改变,有时就会很麻烦。当涉及到回调函数,或者方法由其他对象调用,又或者方法被其他对象借用时,会特别绕。反正你记住this储存的是调用THIS函数的对象的值就行了。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 3 条评论 - 如何理解JavaScript中的this

  1. stinkaroo Windows 7 Chrome 68.0.3440.106

    学习了,this确实是个难点

    1. 111 Windows NT Chrome 69.0.3497.100

      @stinkaroo可以,写的不错

      1. 码云 Windows 7 Chrome 69.0.3497.100

        @111谢谢,多多交流

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论