javascript - 如何在 JavaScript 中调用属性(如方法)

Question

我从 Git 下载了代码，这里是链接 https://github.com/MikeWasson/LocalAccountsApp

在此 Visual Studio 解决方案中，我们有名为 app.js 的 JavaScript 文件，其中包含以下代码。

function ViewModel() {
var self = this;
var tokenKey = 'accessToken';

self.result = ko.observable();
self.user = ko.observable();

self.registerEmail = ko.observable();
self.registerPassword = ko.observable();
self.registerPassword2 = ko.observable();

self.loginEmail = ko.observable();
self.loginPassword = ko.observable();

function showError(jqXHR) {
    self.result(jqXHR.status + ': ' + jqXHR.statusText);
    //self.loginPassword();
}

self.callApi = function () {
    self.result('');

    var token = sessionStorage.getItem(tokenKey);
    var headers = {};
    if (token) {
        headers.Authorization = 'Bearer ' + token;
    }

    $.ajax({
        type: 'GET',
        url: '/api/values',
        headers: headers
    }).done(function (data) {
        self.result(data);
    }).fail(showError);
}

self.register = function () {
    self.result('');

    var data = {
        Email: self.registerEmail(),
        Password: self.registerPassword(),
        ConfirmPassword: self.registerPassword2()
    };

    $.ajax({
        type: 'POST',
        url: '/api/Account/Register',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data)
    }).done(function (data) {
        self.result("Done!");
    }).fail(showError);
}

self.login = function () {
    self.result('');

    var loginData = {
        grant_type: 'password',
        username: self.loginEmail(),
        password: self.loginPassword()
    };

    $.ajax({
        type: 'POST',
        url: '/Token',
        data: loginData
    }).done(function (data) {
        self.user(data.userName);
        // Cache the access token in session storage.
        sessionStorage.setItem(tokenKey, data.access_token);
    }).fail(showError);
}

self.logout = function () {
    self.user('');
    sessionStorage.removeItem(tokenKey)
   }
  }
     var app = new ViewModel();
     ko.applyBindings(app);

我无法理解为什么会有这样的属性

self.result, self.registerEmail, self.registerPassword/Password2, self.loginEmail, self.loginPassword 

成为方法。因为当我输入“self”后跟一个点时，智能感知会将所有上述“self”属性作为方法提供。喜欢

  self.result(), self.registerPassword()

显然“ko”来自 Knockout.js 库。

但是当我尝试在简单的 JavaScript 代码中模仿相同的内容时。它失败了，我知道在这里这样做是不对的

  var SomeObj = {
  ok : function()
   {
    var x = 10, y= 10, z;
    z = x+ y;
    return z;
   }
 }


  function ViewModel()
  {
     var self = this;
     self.result = SomeObj.ok();
     function xyz()
     {
        self.result();
         alert(5700);
     }
}

var v = new ViewModel();
alert(v.result());  

但是为什么对象“self”已将“result”声明为属性，并在稍后像 app.js 中的方法一样使用它，就像我尝试的那样

     alert(v.result());

在警报声明中它给了我一个异常(exception)，但如果我这样做

     alert(self.result()); 

在 app.js 中，它返回“未定义”，但为什么不是我在代码中获取的异常。

Answer 1

您在这里看到的问题是，通过使用括号，您正在调用 SomeObj.ok 方法，而不是将其分配为函数。要将方法存储为函数指针，您应该执行以下操作:

self.result = SomeObj.ok;

接下来，您将能够使用 self.result() 执行分配的方法，该方法将返回分配的 SomeObj.ok 方法的结果。

检查 observable 的定义这里:它定义了一个返回函数的函数，该函数还根据是否发送参数提供读写逻辑。如果您的 ok 函数返回一个函数而不是结果，您可以像 observable 一样访问它。

var SomeObj = {
  ok : function() {
    return function() {
      var x = 10, y= 10, z;
      z = x+ y;
      return z;
    }
  }
}

现在，赋值 self.result = SomeObj.ok(); 将使用函数来启动 self.result，因此调用 self.result() 将调用指定的函数。