JavaScript基础——this指向

最新推荐文章于 2024-08-14 15:45:18 发布

qmzhna_

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量1.1k

点赞数 27

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qmzhna_/article/details/136441071

版权

this指向作为JS中比较容易混淆的机制，也是JS中一个非常重要、常用的关键字，需要好好的深入学习下。

先看看在ES规范中this的描述：

The this keyword evaluates to the value of the ThisBinding of the current execution context.

意思是说this的值是当前执行上下文的 ThisBinding。

那就要先说说什么是执行上下文

当一段 JavaScript 代码在运行的时候，它实际上是运行在执行上下文中。而下列三种代码都会创建相应的执行上下文：

全局执行上下文：它是为运行代码主体而创建的执行上下文，也就是说它是为那些存在于函数之外的任何代码而创建的。
函数执行上下文：每个函数会在执行的时候创建自己的执行上下文。
Eval 函数执行上下文：使用 eval() 函数也会创建一个新的执行上下文。

而创建执行上下文的第一步就是确定this，进行this绑定。

全局中的this

在全局执行上下文中，this总是指向全局对象。比如在浏览器的环境下this指向window对象。

函数中的this

在函数执行上下文中，this 的值取决于函数的调用方式，如果被一个对象调用，那么 this 指向这个对象。
“谁调用它，this就指向谁” 这句话说的就是函数调用的this指向。

由上可以知道，JavaScript 中的 this 关键字并不像 Java 或者其他语言一样是在字面意上的值, JavaScript 中的 this 关键字是在函数调用的时候被确定的, 这个 this 关键字所保留的引用就是 function 的调用者。

下面列举下函数调用的几种方式：

调用方式	示例	函数中的this指向
通过new调用	new method()	新对象
直接调用	method()	全局对象
通过对象调用	obj.method()	前面的对象
call 、apply、bind	method.call(ctx)	第一个参数

通过new调用

在new方式调用的函数运行上下文中，ThisBinding = newObject，因此在new方式调用的函数中，this值就是新创建的对象newObject。

function Fn (x, y) {
    this.x = x;
    this.y = y;
}
var a = Fn(7, 5); // 没有new，普通调用，this为全局对象，在全局对象上创建x=7 y=5
var b = new Fn(7, 5); //使用new调用，this为新创建的对象，在新对象上创建x=7，y=5

call，apply，bind 调用

call, apply 和 bind 是 JavaScript 中常用的函数。它们的作用就是在函数调用时动态地改变函数的上下文。

call 、apply

function.call(context, arg1, arg2, ...)

function.apply(context, [argsArray])

其中，context 是指定函数中的 this 关键字指向的对象，arg1, arg2, …或 argsArray 是传递给函数的参数。
apply 函数与 call 函数类似，都是可以指定调用函数时的this指向对象。它们的区别就是函数参数的传递方式不同。

bind

bind 函数与 call 和 apply 函数不同，它不会立即调用函数。相反，它返回一个新函数，该函数将绑定到指定的上下文，当该函数被调用时，它将以指定的上下文运行。它的语法如下：

function.bind(thisArg, arg1, arg2, ...)

箭头函数

箭头函数的this保存为它被创建时运行上下文的this的值。和我们前面提到的函数都不一样，前面提到的函数都是和调用时的运行上下文相关，箭头函数的this却和创建时的运行上下文相关。因为箭头函数里压根就不存在this，箭头函数与闭包类似是基于词法作用域。这就意味着在函数定义的位置而不是运行的位置来决定this的指向。

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
 
 
var obj = {func: foo};
console.log(obj.func() === globalObject); // true
 
console.log(foo.call(obj) === globalObject); // true
 
foo = foo.bind(obj);
console.log(foo() === globalObject); // true