🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## this关键字 JavaScript代码都存在于一定的`上下文对象`中。上下文对象通过`this`关键字来动态指定,它永远指向当前对象。简单的说,就是返回属性或方法“当前”所在的对象。 **this的工作原理** 在5种不同的情况下,`this`指向的各不相同。 **(1)全局范围内** ``` this ``` 当在全局范围内使用`this`,它将指向全局对象 **(2)函数调用** ``` function test(){ console.log(this); } test(); ``` 这里的`this`也指向全局对象。 **(3)方法调用** ``` test.foo(); ``` 这个例子中,`this`指向test对象。 **(4)调用构造函数** ``` new test(); ``` 如果函数倾向于`new`关键词一块使用,则我们称这个函数是构造函数。在函数内部,`this`指向新创建的实例对象。 **(5)显式的设置this** ``` function test(a, b) {} var bar = {}; test.apply(bar, [1, 2]); //数组将会会被扩展 test.call(bar , 1, 2); // 传递到test的参数是: a = 1, b = 2 ``` 当使用`Function.prototype`上的`call`或`apply`方法时,函数内的`this`将会被显式设置为函数调用的第一个参数。 **改变this指向的方法** JavaScript提供了call、apply、bind这三个方法,来切换/固定this的指向。 **(1)call()** 语法: ``` call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ``` 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 **(2)apply()** 语法: ``` apply([thisObj[,argArray]]) ``` 定义:应用某一对象的一个方法,用另一个对象替换当前对象。 说明: 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。 bind()方法 bind()方法是在ECMAScript 5中新增的方法。 toString()方法 函数的toString方法返回函数的源码。 ``` function f(){ return 1; } f.toString() //function f(){ // return 1; //} ``` **(3)bind()** bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。 ``` var bar=function(){ console.log(this.x); } var foo={ x:3 } bar(); bar.bind(foo)(); /*或*/ var func=bar.bind(foo); func(); 输出: undefined 3 ``` 注意:bind()返回的是函数。