对JavaScript中的this的理解
Posted xfmeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对JavaScript中的this的理解相关的知识，希望对你有一定的参考价值。
什么是this：
解析器（就是浏览器）在调用函数时，每次都会向函数内部传递两个隐含的参数；
这两个隐含参数其中一个就是this（还有一个是arguments，用来接收函数的实参），this指向的是一个对象，这个对象我们称为函数执行的上下文对象；
this的指向问题：
首先我们需要知道的是，this的指向不是固定的，它会根据函数的不同调用方式，来决定this的指向，常见的情况有以下几种：
1，封装函数后，直接以函数的形式调用：
——一般情况下以函数的形式来调用，this指向的是window对象
function fun() { console.log(this); } // 以函数形式调用，this是window fun();
——严格模式下为undefined
"use strict"; function fun() { console.log(this); }
2，以方法的形式调用
——以方法的形式来调用，this就是调用方法的那个对象
function fun() { console.log(this.name); } // 创建一个对象 var obj = { name: "meng", sayName: fun } var obj2 = { name: "xue", sayName: fun } // 以方法的形式调用，this是调用方法的那个对象（这里就是obj，而不是obj2或window） obj.sayName();
3，函数作为构造函数使用时
——以构造函数的形式来调用，this就是构造函数返回的那个对象
function Persion() { this.name = "meng"; } // 这里的this指向构造函数返回的那个对象 var per = new Persion(); // Persion返回一个对象 console.log(per)
4，在DOM操作，给元素对象绑定事件响应函数时，响应函数给谁绑定this就是谁
——事实上，也可以理解为事件响应函数函数在解析器内部，也是通过方法的形式调用的
<body>
<div id="box1"></div>
<button id="btn1">点我一下</button>
<script>
// 获取box1
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick = function() {
// 这里的this是btn1元素对象
console.log(this)
};
</script>
</body>
this的重定义：
有时候，我们希望自己定义this的指向，这个时候就用到了call，apply，bind三个方法，他们是属于Function构造函数原型中的方法，都有改变this指向的功能，但是他们的传参和使用方式有一些区别，这三个方法的使用和差别可参考：https://www.runoob.com/w3cnote/js-call-apply-bind.html
总结：
this其实是函数调用时，浏览器默认传给函数的一个参数；
这个参数指向一个对象，具体是那个对象根据函数的调用方式不同而不同；
我们可以通过call，apply，bind三个方法来改变this的指向；
以上是关于对JavaScript中的this的理解的主要内容，如果未能解决你的问题，请参考以下文章
精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解!（转载）