文章目录
- this
- call、apply和bind函数
- call函数
- apply函数的用法
- bind函数的用法
this
函数中的this，是指函数的执行上下文环境。
函数的调用方式决定了this的指向，this不能在执行中被赋值，而且每次函数被调用的时候，this的值也有可能不同。
如果我们通过构造函数来创建实例的时候，等函数执行完成后，函数的this是指向实例，比如：
function Person(name){
this.name = name;
}
const son = new Person('35456');
console.log(son.name) 在JavaScript中，this是指向函数的调用者。那么在不同的场景中，this的指向也是有所不同的：
- 在函数没有所属对象，而是直接调用的时候，this指向的是window对象。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var value = 10;
var obj = {
value: 100,
method: function () {
console.log(this);//obj对象
var foo = function () {
console.log(this.value); // 10
console.log(this); // Window对象
};
foo();
return this.value;
}
};
obj.method();
</script>
</body>
</html> 其中method函数的所属对象是obj，在method函数的this是指向obj对象的，然而foo函数没有声明所属的对象，那么foo函数的this是指向window对象。
- this指向所属对象，比如上面代码中的method函数的所属对象是obj，所以我们执行这段代码
console.log(obj.method())
- this指向对象实例，这里指的是通过new操作符调用构造函数来生成对象实例的时候，那么构造函数的this指向的是这个实例，比如：
// 全局变量
var number = 10;
function Person() {
// 复写全局变量
number = 20;
// 实例变量
this.number = 30;
}
// 原型函数
Person.prototype.getNumber = function () {
return this.number;
};
// 通过new操作符获取对象的实例
var p = new Person();
console.log(p.getNumber()); // 30 - this指向call函数、apply函数、bind函数调用重新绑定的对象；
- 闭包中的this，指向自身，因为闭包内的this不能访问外部函数的this变量。
ES5引入了bind方法来设置函数的this指向，不用考虑函数是如何被调用的；
ES6引入了箭头函数，箭头函数不提供自身的this绑定，箭头函数的this对象是函数定义时所在的对象，而不是使用时所在的对象；
call、apply和bind函数
每一个函数都会包含call和apply函数，这两个函数不是继承来的，而是本身就存在的，它们的作用是改变函数的执行上下文环境，也就是改变函数this的指向。
另一个bind函数也是同样的作用，只是在处理方法有所区别。
call函数
将函数的执行上下文环境换成另一个对象，比如：
function.call(thisObj,arg1,arg2,...) call函数的第一个参数表示是新的对象上下文，函数的this指向thisObj，如果thisObj为null或者undefined，那么函数的this指向window对象。其他参数就是函数所接受的参数了。
apply函数的用法
apply的语法：
function.call(thisObj,[arg1,arg2,arg3,...])
bind函数的用法
- call和apply函数在执行后立即调用前面的函数。bind函数不会，bind函数是返回一个新的函数，可以在任何时候进行调用。
- 传入参数格式有所区别。
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)