关于Javascript中’this’关键字的混淆

前端之家收集整理的这篇文章主要介绍了关于Javascript中’this’关键字的混淆前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于那些来自C#等语言的人,我可以声称’this’关键字是 Javascript中最令人困惑的部分.

我已经在互联网和StackOverflow上阅读了很多相关内容.像herehere.

我知道’this’关键字将绑定到上下文.并且在构造函数中它将被绑定到正在创建的对象,并且当没有直接上下文时,它将绑定到全局对象(即窗口)

我知道这一切,但是仍然没有完全清除混乱;所以最好的理解方法是测试代码.

所以我决定编写一些小代码,我很惊讶这个关键字有多复杂.

这是我测试的代码

function sayHi(name){
   var tt = name;
   return {
     ss: tt,work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

//this method invocation has no effect at all right now
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

正如预期的那样,警报窗口将显示(Hiiiiii May)然后(华莱士).现在请注意该行sayHi(“John”);完全没有效果.

现在当我改变一件事时,混乱将开始(改变var tt => this.tt):

function sayHi(name){
   //this is the ONLY change I did.
   this.tt = name;
   return {
     ss: tt,work: function(anotherName){

     alert ("hiiiii    " + anotherName);
   }
 };
}

// Now this line invocation will be problematic 
sayHi("John");


var hi2 = new sayHi("wallace");

hi2.work("May");
alert(hi2.ss);

当警报方法(Hiiiiiii May)和(John)没有(华莱士)时,结果让我感到惊讶;

所以我有想法评论一线sayHi(“约翰”);但这导致整个代码无法正常工作而无法正常工作.

demo is here

我知道这可能是一个新问题.但这里真的很混乱,我确实尝试阅读很多文章和SO问题,但我忽略了这一点.

为什么这条线说希(“约翰”);把hi2.ss设置为约翰?为什么在删除代码时会破坏代码;虽然我们之后使用new关键字调用sayHi方法

解决方法

当您第一次调用sayHi(“John”);时,它将指向全局对象窗口.这意味着this.tt = name实际上创建了一个全局tt变量.

然后当你调用new sayHi(“wallace”);时,这正确地指向了sayHi的新实例,但是你返回另一个对象而不是让new自然地返回实例.

如果你仔细查看你的对象文字,你可以定义像ss:tt一样的ss.由于您没有使用this.tt并且在构造函数的作用域中找不到tt符号,因此该值将被解析为全局变量(之前已设置为John).

原文链接:https://www.f2er.com/js/158125.html

猜你在找的JavaScript相关文章