特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在绝大多数情况下,函数的调用方式决定了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
更多的介绍,可以阅读下面的文章:
- What is the 'new' keyword in JavaScript?
- 你真的弄明白new了吗
- JavaScript的实例化与继承:请停止使用new关键字
- Why I don’t use the javascript “new” keyword
- Javascript’s “new” Keyword Explained as Simply as Possible
- The new keyword in JavaScript
构造函数prototype
属性时,this
的指向:
function foo() {
console.log(this); // => {}
this.x = 10;
}
foo.prototype.getX =
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/the-simple-rules-to-this-in-javascript.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!