与 JavaScript 代码中的“this”混淆

Confusion with "this" in javascript code

本文关键字：this 混淆 JavaScript 代码      更新时间：2023-09-26

我得到了这个js代码并运行它，它工作得很好，除了，我不完全理解它。请帮忙！！

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="members-wrapper"></div>

 <script>
  var db = [
     {fname:"oscar", lname:"santosh", email:"oscar@gmail.com", country:"Brazil", id:101},
      {fname:"juan", lname:"mata", email:"mata@gmail.com", country:"Spain", id:102},
   {fname:"eden", lname:"hazard", email:"hazard@gmail.com", country:"Belgium", id:103}
  ];
  function CaseName(str)
    {
    return str.replace(/'w'S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    };
  //our object with channable method
  var cascadeVar ={
    user:"",
    finduser: function(userEmail)
    {
       var arraylen = db.length,i;
       for(i=arraylen-1;i>=0;i--)
       {
         if(db[i].email === userEmail )
         {
          this.user = db[i];
           break;
         }
       }
       return this;
    },
    formatname : function()
    {
    if(this.user){
       this.user.fullname = CaseName(this.user.fname) + " " + CaseName(this.user.lname);
       }
       return this;
    },
    createLayout:function () {
    if (this.user) {
    this.user.viewData = "<h2>Member: " + this.user.fullname + "</h2>" + "<p>ID: " + this.user.id + "</p>" + "<p>Email: " + this.user.email + "</p>";
    }
    return this;
    },
    display : function()
    {
    if (!this.user) return;
    $(".members-wrapper").append(this.user.viewData);
    }   
  };
  cascadeVar.finduser("oscar@gmail.com").formatname().createLayout().display();
 </script>
</body>
</html>

在函数 finduser 中，为什么我必须将其用作this.user = db[i];？是因为用户属于对象级联Var，这指向级联。如果是，为什么没有"这个"就不起作用？我知道我很傻，但我仍然很困惑。

如果我忽略 finduser（） 函数 finduser（） 中的用户是否未定义this？

return this在同一函数中返回什么？

返回每个函数return this是什么？

请帮忙！

在javascript中，每个函数都有一个上下文。这就是我们称之为this的东西。
问题是，默认情况下，函数的上下文是函数;父对象。所以，是的，你的假设是正确的：用户属于对象级联Var，这指向级联。

我经常发现代码可以不言自明，所以让我们举一个例子来了解this是如何工作的：

function getName() {
  // what is `this` ?
  return this.userName;
}
var user1 = {
  userName: 'john',
  getName: getName
};
var user2 = {
  userName: 'george'
}
// getName is a global function, meaning that it's parent is window
// in this case, `this` will point to the window object
// and `this.userName` will point to window.userName
// which is undefined
console.log('getName() =>', getName());
// user1.getName is a user1 method, meaning that it's parent is user1
// in this case, `this` will point to user1
// and `this.userName` will point to user1.userName
// which is 'john'
console.log('user1.getName() =>', user1.getName());
// there are other ways that we can dynamically change a function's context
// look into the following function methods: `call`, `apply`, `bind`
console.log('getName.call(user2) =>', getName.call(user2));
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

关于您的另一个问题，所有方法都返回 this 关键字以确保方法链接。这是 jQuery 库流行的一种设计模式，它允许您按顺序调用同一对象的多个方法，而无需调用父对象。
这基本上可以让你做一些语法糖，比如调用a.b().c().d();而不是a.b(); a.c(); a.d();。
和。。当然，这里有一段代码显示了正在使用的链： 

var calculator = {
  value: 0,
  add: function(n) {
    this.value += n;
    return this;
  },
  substract: function(n) {
    this.value -= n;
    return this;
  },
  multiply: function(n) {
    this.value *= n;
    return this;
  }
};
calculator
  .add(6)
  .substract(2)
  .multiply(2)
  .add(3)
  .substract(5);
console.log('(6 - 2) * 2 + 3 - 5 = ', calculator.value);
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

这

在Javascript中指的是当前函数的所有者对象（在本例中为cascadeVar）

没有它，JS解释器将用户理解为一个动态变量，范围限定为findUser函数

在每种情况下，这都返回当前函数的所有者，即 cascadeVar。

原作者给了你一个线索，说这种方法是"可捣乱的"（即可链的）。通过在内部返回 cascadeVar 对象，该函数允许递归函数调用。

相关文章：