JavaScript中this的使用规则

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,在每次函数被调用时this的值也可能会不同。在函数中this到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了。

因为 this 的取值是函数执行上下文(context)的一部分,每次调用函数,都会产生一个新的执行上下文环境。当代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻。

这篇文章介绍了JavaScript中this的一些规则,这些规则很简单。最重要的规则是,this决定调用一个函数时的回调是什么。下面简单的罗列一些这方面的规则。

有关于this一篇文章非常的不错,详细介绍了JavaScript中的this怎么使用。

全局中的this

在全局运行上下文中(任何函数体外部),this指代全局对象,无论是否在严格模式下:

console.log(this.document === document); // true

// 在浏览器中,全局对象为 window 对象:
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

构造函数中的this

如果调用一个函数时使用了new关键词,函数内的this绑定一个新对象,即:它的this与即将被创建的新对象绑定。

function ConstructorExample() {
    console.log(this); // => {}
    this.value = 10;
    console.log(this); // => {value: 10}
}
new ConstructorExample();

注意:当构造器返回的默认值是一个this引用的对象时,可以手动设置返回其他的对象,如果返回值不是一个对象,返回this

function C() {
    console.log(this);  // => {}
    this.a = 37;
    console.log(this); // => {a: 37}
}

var o = new C();

console.log(o.a); // => 37

function C2() {
    console.log(this); // => {}
    this.a = 37;
    console.log(this); // => {a: 37}
    return {a: 38};
}

o = new C2();

console.log(o.a); // => 38

在最后的例子中C2,因为在调用构造函数的过程中,手动的设置了返回对象,与this绑定的默认对象被取消(本质上这使得语句this.a = 37成了“僵尸”代码,实际上并不是真正的“僵尸”,这条语句执行了但是对于外部没有任何影响,因此完全可以忽略它)。

关于JavaScript中有关于new更多的介绍,可以阅读下面的文章:

构造函数prototype属性时,this的指向:

function foo() {
    console.log(this); // => {}
    this.x = 10;
}

foo.prototype.getX = 
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/the-simple-rules-to-this-in-javascript.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部