如何在一条语句中调用 JavaScript 个对象方法（方法链接）

Question

我在函数中创建了一个对象。我想一次调用对象方法声明。

(function(){
        s4 = function(getSection){
            var self = {
            name: function(getname){
                console.log("Name of the Student " +getname);
            },

            subject: function(getsub){
                console.log(" & Studying " +getsub);
            }

        }
     return self;   
        }
    })();

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Details</title>
</head>
<body>
  <div class="hello">
      <h1>Student Details</h1>
  </div>
    <script src="script.js"></script>
    <script>
        s4("5th").name("John"); //This works fine
        s4("5th").subject("Python"); //This works fine
        s4("5th").name("John").subject("Python"); //Shows error: SCRIPT5007: Unable to get property 'subject' of undefined or null reference


    </script>
</body>
</html>

当我打电话给s4("5th").name("John").subject("Python"); 显示错误：

SCRIPT5007: Unable to get property 'subject' of undefined or null reference

请帮我解决这个问题。提前致谢。

Answer 1

在您的方法中，return 对象。 name 和 subject. 中的 return this 这称为方法链接，它通过 returning 一个对象来工作。

(function() {
  s4 = function(getSection) {
    var self = {
      name: function(getname) {
        console.log("Name of the Student " + getname);
        return this;
      },
      subject: function(getsub) {
        console.log(" & Studying " + getsub);
        return this;
      }
    }
    return self;
  }
})();

s4("5th").name("John");
s4("5th").subject("Python");
s4("5th").name("John").subject("Python");

Answer 2

这称为 method chaining，通常通过使每个函数不 return 其他值来实现，return this;:

name: function(getname){
    console.log("Name of the Student " +getname);
    return this;
},

subject: function(getsub){
    console.log(" & Studying " +getsub);
     return this;
}

然后 s4("5th").name("John").subject("Python"); 将起作用，因为 name("John") return 是 s4("5th") 的结果。

Answer 3

您的代码应该是

(function() {
  s4 = function(getSection) {
    var self = {
      name: function(getname) {
        console.log("Name of the Student " + getname);
        return this;
      },
      subject: function(getsub) {
        console.log(" & Studying " + getsub);
        return this;
      }
    }
    return self;
  }
})();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Student Details</title>
</head>

<body>
  <div class="hello">
    <h1>Student Details</h1>
  </div>
  <script src="script.js"></script>
  <script>
    s4("5th").name("John"); //This works fine
    s4("5th").subject("Python"); //This works fine
    s4("5th").name("John").subject("Python"); //Shows error: SCRIPT5007: Unable to get property 'subject' of undefined or null reference
  </script>
</body>

</html>

现在调用函数不会出错subject()

Answer 4

你的函数

name: function(getname){
        console.log("Name of the Student " +getname);
    }

不会 return this。将其更改为：

name: function(getname){
        console.log("Name of the Student " +getname);
        return this;
    }

如何在一条语句中调用 JavaScript 个对象方法（方法链接）

How to call JavaScript object methods in one statement (Method Chaining)

javascript

method-chaining