在JavaScript中,this是一个关键字,用于指代当前执行的上下文环境,即函数在运行时所处的环境对象。这个环境对象可以是全局对象、函数内部对象或者外部对象等等,具体取决于函数的调用方式。
下面我们通过举例来详细了解this的指向:
//例一function foo() {console.log(this);}foo(); // 在全局作用域下, this 指向全局对象 window //例二var obj = {bar: function() {console.log(this);}};obj.bar(); // 在对象的方法中, this 指向该对象//例三function Person(name) {this.name = name;this.sayName = function() {console.log(this.name);};}var person1 = new Person('Jack');person1.sayName(); // 在构造函数中, this 指向创建的实例对象除了以上三种情况外,还有其他几种特殊的应用场景需要注意:
第一种是当使用call()、apply()和bind()方法调用函数时,它们的第一个参数都是this要指向的对象:
function foo() {console.log(this);}var obj = {};foo.call(obj); // 使用 call() 方法,this 指向 obj第二种是当函数用作事件处理函数或者回调函数时,this通常指向触发事件的对象或者调用函数的对象:
var btn = document.querySelector('button');btn.addEventListener('click', function() {console.log(this); // 在事件处理函数中,this 指向触发事件的按钮});第三种是在箭头函数中,它的this指向是在箭头函数创建时继承的上下文:
var obj = {foo: function() {setTimeout(() => {console.log(this); // 在箭头函数中,this 指向创建此函数的上下文对象 obj}, 100);}};obj.foo();总结来说,this指向的对象是可以动态变化的,取决于函数的调用方式和上下文环境。而this的应用场景也非常广泛,在JavaScript中扮演着一个非常重要的角色。
上一篇:css把矩形改成圆形
下一篇:css把鼠标变成手









