Javascript 在服务AngularJS中公开内联函数与声明函数_Javascript_Angularjs

Javascript 在服务AngularJS中公开内联函数与声明函数

javascript angularjs

Javascript 在服务AngularJS中公开内联函数与声明函数,javascript,angularjs,Javascript,Angularjs,我很难理解为什么下面的代码不起作用 index.html <html> <head lang="en"> <script src="../Scripts/angular.js"></script> <script src="app/books/BooksController.js"></script> <script src="app/services/dataService.js">&l

我很难理解为什么下面的代码不起作用

index.html

<html>
<head lang="en">
    <script src="../Scripts/angular.js"></script>
    <script src="app/books/BooksController.js"></script>
    <script src="app/services/dataService.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="BooksController as vm">
        <h3>All Books</h3>

        <div>
            <ul>
                <li ng-repeat="book in vm.allBooks">
                    {{ book.title }} - {{ book.author }}
                </li>
            </ul>
        </div>
    </div>

</body>
</html>

dataService.js

(function() {

  var app = angular.module('app', []);

  var BooksController = function(dataService) {
    var vm = this;

    vm.allBooks = dataService.getAllBooks;

  }

  app.controller('BooksController', ["dataService", BooksController]);
})();

(function() {

  var app = angular.module('app');

  var dataService = function() {

    return {
      getAllBooks: getAllBooks
    };

    var getAllBooks = function() {
      return [{
          book_id: 1,
          title: "Harry Pptter and the Deathly Hallows",
          author: "J.K. Rowling",
          year_published: 2000
        },
        {
          book_id: 2,
          title: "The Cat in the Hat",
          author: "Dr. Seuss",
          year_published: 1957
        },
        {
          book_id: 3,
          title: "Encyclopedia Brown, Boy Detective",
          author: "Donald J. Sobol",
          year_published: 1963
        }
      ];
    };
  }

  app.factory('dataService', dataService);
})();

问题似乎在于，当我使用以下方法通过服务公开方法时：

return {
    getAllBooks: getAllBooks
};

如果我将函数

getAllBooks

的声明更改为如下所示

function getAllBooks() {
    ...
}

并通过以下方式调用控制器中的服务：

vm.allBooks = dataService.getAllBooks()

它会很好用的

我的问题是，为什么它不适用于声明函数并将它们放入变量中？这是因为函数只是定义的，而不是实际执行的吗？

这是因为函数表达式没有被提升，函数声明被提升

您只需要将return语句放在函数表达式之后

所以把这个返回语句放在函数表达式之后

return {
    getAllBooks: getAllBooks
};

解释在javascript中，可以提升函数，这意味着您可以在声明它们之前使用它们

但这仅限于函数声明，而不限于函数表达式

函数声明示例：

testFunction();//this will print this function is hoisted
function testFunction(){
 console.log("this function is hoisted");
}

testFunction(); //Error because testFunction expression is not hoisted
var testFunction = function(){
 //this functions is not hoisted
}

函数表达式示例：

testFunction();//this will print this function is hoisted
function testFunction(){
 console.log("this function is hoisted");
}

testFunction(); //Error because testFunction expression is not hoisted
var testFunction = function(){
 //this functions is not hoisted
}

有关提升的更多信息，这两个链接非常有用

另一种解决起重问题的方法是这样写工厂。在工厂内创建一个对象，然后将每个方法附加到该对象，然后仅返回该对象，您的方法将在控制器中可用

(function() {

var app = angular.module('app');

var dataService = function() {

var factory = {};

factory.getAllBooks = function() {
  return [];
};

return factory;
}

app.factory('dataService', dataService);
})();