【前端】JS(javascript) 中 this 的几种用法实例详解

2022-12-26
河南
本文字数：1049 字
阅读完需：约 3 分钟

本文主要介绍了 javascript（以下简称 js）中 this 用法，结合具体实例详细分析一下 js 中 this 的含义及使用方法，需要的朋友可以参考下。

this 是 JavaScript 语言的一个关键字，this 的指向其实是非常灵活的，它会根据调用 function 的对象不同，导致了 this 的指向不同。当在全局作用域下调用函数时，this 指向 window。总的来说，this 就是函数运行时所在的环境对象。有四种情况，下面详细讨论 this 的用法。

用法 1：函数的调用

在一般函数方法中使用 this 指代全局对象，这是函数的最通常用法，属于全局性调用，因此 this 就代表全局对象。

function test(){　　　　this.name = zs;　　　　alert(this.name);　　}test(); // zs

复制代码

用法 2：对象方法调用

作为对象方法调用，函数还可以作为某个对象的方法调用，这时的 this 就指这个上级对象。

function test(){　　alert(this.name);}var person = {};person.name = lisi;person.nickname = test;person.nickname (); // lisi

复制代码

用法 3：构造函数调用

作为构造函数调用，this 指代 new 出的对象，在 js 中自己创建构造函数时可以利用 this 来指向新创建的对象上。这样就可以避免函数中的 this 指向全局了。例如：

function test(){　　this.name = wangwu;} var nickname = new test();alert(nickname.name); // wangwu// 运行结果为wangwu // 为了表明这时的this不是全局对象，下面给代码做一点改变，可以看看效果var name = maliu;function test() {    this.name = zhaoqi;} var nickname = new test();alert(name); // 这时结果为maliu

复制代码

用法 4：apply 或 call 调用

apply()是函数的一个方法，作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，因此，这时 this 指的就是这第一个参数。

var name = zhangsan;function test() {    alert(this.name);} var person = {};person.name = lisi;person.nickname = test; //apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为zhangsna，证明this指的是全局对象。person.nickname.apply(); // 结果为zhangsan //如果把最后一行代码修改为person.nickname.apply(person); // 此时结果为lisi