JavaScript中的this关键字用法详解
先举一个生活例子：
小明正在跑步，他看起来很开心
这里的小明是主语，如果没有这个主语，那么后面的代词『他』将毫无意义。有了主语，代词才有了可以指代的事物。
类比到JavaScript的世界中，我们在调用一个对象的方法的时候，需要先指明这个对象，再指明要调用的方法。
var xiaoming = {
name: 'Xiao Ming',
run: function() {
console.log(`${this.name} seems happy`);
},
};
xiaoming.run();在上面的例子中，第8行中的xiaoming指定了run方法运行时的主语。因此，在run中，我们才可以用this来代替xiaoming这个对象。可以看到this起了代词的作用。
同样的，对于一个JavaScript类，在将它初始化之后，我们也可以用类似的方法来理解：类的实例在调用其方法的时候，将作为主语，其方法中的this就自然变成了指代主语的代词。
class People {
constructor(name) {
// 在用new关键字实例化一个对象的时候，相当于在说，
// “创建一个People类实例（主语），它（this）的name是……”
// 所以这里的this就是新创建的People类实例
this.name = name;
}
run() {
console.log(`${this.name} seems happy.`)
}
}
// new关键字实例化一个类
var xiaoming = new People('xiaoming');
xiaoming.run();这就是我认为this关键字设计得精彩的地方！如果将调用方法的语句var xiaoming = new People('xiaoming');和方法本身的代码连起来，像英语一样读，其实是完全通顺的。
this的绑定
句子的主语是可以变的，例如在下面的场景中，run被赋值到小芳（xiaofang）身上之后，调用xiaofang.run，主语就变成了小芳！
var xiaofang = {
name: 'Xiao Fang',
};
var xiaoming = {
name: 'Xiao Ming',
run: function() {
console.log(`${this.name} seems happy`);
},
};
xiaofang.run = xiaoming.run;
// 主语变成了小芳
xiaofang.run();但是如果小明很抠门，不愿意将run方法借给小芳以后，this就变成了小芳的话，那么小明要怎么做呢？他可以通过Function.prototype.bind让run运行时候的this永远为小明自己。
var xiaofang = {
name: 'Xiao Fang',
};
var xiaoming = {
name: 'Xiao Ming',
run: function() {
console.log(`${this.name} seems happy`);
},
};
// 将小明的run方法绑定（bind）后，返回的还是一个
// 函数，但是这个函数之后被调用的时候就算主语不是小明，
// 它的this依然是小明
xiaoming.run = xiaoming.run.bind(xiaoming);
xiaofang.run = xiaoming.run;
// 主语虽然是小芳，但是最后this还是小明
xiaofang.run();那么同一个函数被多次bind之后，到底this是哪一次bind的对象呢？你可以自己尝试看看。
call与apply
Function.prototype.call允许你在调用一个函数的时候指定它的this的值。
var xiaoming = {
name: 'Xiao Ming'
};
function run(today, mood) {
console.log(`Today is ${today}, ${this.name} seems ${mood}`);
}
// 函数的call方法第一个参数是this的值
// 后续只需按函数参数的顺序传参即可
run.call(xiaoming, 'Monday', 'happy')Function.prototype.apply和Function.prototype.call的功能是一模一样的，区别进在于，apply里将函数调用所需的所有参数放到一个数组当中。
var xiaoming = {
name: 'Xiao Ming'
};
function run(today, mood) {
console.log(`Today is ${today}, ${this.name} seems ${mood}`);
}
// apply只接受两个参数
// 第二个参数是一个数组，这个数组的元素被按顺序
// 作为run调用的参数
run.apply(xiaoming, ['Monday', 'happy'])那么call/apply和上面的bind混用的时候是什么样的行为呢？这个也留给大家自行验证。但是在一般情况下，我们应该避免混用它们，否则会造成代码检查或者调试的时候难以跟踪this的值的问题。
当方法失去主语的时候，this不再有？
其实大家可以发现我的用词，当一个function被调用的时候是有主语的时候，它是一个方法；当一个function被调用的时候是没有主语的时候，它是一个函数。当一个函数运行的时候，它虽然没有主语，但是它的this的值会是全局对象。在浏览器里，那就是window。当然了，前提是函数没有被bind过，也不是被apply或call所调用。
那么function作为函数的情景有哪些呢？
首先，全局函数的调用就是最简单的一种。
function bar() {
console.log(this === window); // 输出：true
}
bar();立即调用的函数表达式（IIFE，Immediately-Invoked Function Expression）也是没有主语的，所以它被调用的时候this也是全局对象。
(function() {
console.log(this === window); // 输出：true
})();但是，当函数被执行在严格模式（strict-mode）下的时候，函数的调用时的this就是undefined了。这是很值得注意的一点。
function bar() {
'use strict';
console.log('Case 2 ' + String(this === undefined)); // 输出：undefined
}
bar();不可见的调用
有时候，你没有办法看到你定义的函数是怎么被调用的。因此，你就没有办法知道它的主语。下面是一个用jQuery添加事件监听器的例子。
window.val = 'window val';
var obj = {
val: 'obj val',
foo: function() {
$('#text').bind('click', function() {
console.log(this.val);
});
}
};
obj.foo();在事件的回调函数（第6行开始定义的匿名函数）里面，this的值既不是window，又不是obj，而是页面上id为text的HTML元素。
var obj = {
foo: function() {
$('#text').bind('click', function() {
console.log(this === document.getElementById('text')); // 输出：true
});
}
};
obj.foo();这是因为匿名函数是被jQuery内部调用的，我们不知道它调用的时候的主语是什么，或者是否被bind等函数修改过this的值。所以，当你将匿名函数交给程序的其他部分调用的时候，需要格外地谨慎。
如果我们想要在上面的回调函数里面使用obj的val值，除了直接写obj.val之外，还可以在foo方法中用一个新的变量that来保存foo运行时this的值。这样说有些绕口，我们看下例子便知。
window.val = 'window val';
var obj = {
val: 'obj val',
foo: function() {
var that = this; // 保存this的引用到that，这里的this实际上就是obj
$('#text').bind('click', function() {
console.log(that.val); // 输出：obj val
});
}
};
obj.foo();另外一种方法就是为该匿名函数bind了。
window.val = 'window val';
var obj = {
val: 'obj val',
foo: function() {
$('#text').bind('click', function() {
console.log(this.val); // 输出：obj val
}.bind(this));
}
};
obj.foo();总结
在JavaScript中this的用法的确是千奇百怪，但是如果利用自然语言的方式来理解，一切就顺理成章了。不知道你读完这篇文章的时候理解了吗？
以上就是JavaScript中的this关键字用法详解的详细内容，更多关于JavaScript this关键字的资料请关注脚本之家其它相关文章！
相关文章
在Web开发中,实现前端的国际化i18n是一项重要的任务,它允许网站内容根据不同地区的用户需求进行本地化,下面这篇文章主要给大家介绍了关于前端国际化JS库i18n配置使用的相关资料,需要的朋友可以参考下2024-06-06
今天小编就为大家分享一篇关于js中Array对象的常用遍历方法详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了方便小编直接使用了可清除的input自定义组件，下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件，感兴趣的朋友一起看看吧2018-07-07
检测AC是否放行成功，是否可以访问公网阿里云服务器。下面给大家分享JS检测是否可以访问公网服务器功能代码，需要的的朋友参考下吧2017-06-06
这篇文章主要为大家介绍了javascript实现tab响应式切换特效，以一个完整的实例对tab响应式切换特效进行详细的分析，感兴趣的小伙伴们可以参考一下2016-01-01
在使用uniapp开发过程中,随着我们的代码工程越来越大,必然会面临一个问题,就是打出来的包会越来越大,下面这篇文章主要给大家介绍了关于uni-app分包项目实战的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了原生JavaScript写出Tabs标签页的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下2015-11-11
对JavaScript 放大镜来说, 计算倍率必不可少.一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗.2011-05-05
这篇文章主要介绍了JavaScript 高阶函数的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
最新评论