Angular JS object scope

Question

我寫了一個簡單的Angular JS代碼，它根據一天的時間向用戶致意。它工作正常。下面的代碼給出：

var modSvc = angular.module("appName",[]); 

modSvc.provider("date",function(){ 
    var greeting; 
    return { 
     showGreeting:function(value){ 
      greeting = value; 
     }, 
     $get:function(){ 
      //it has to return an object which can have variables and functions 
      return { 
       showDate:function(){ 
        var date = new Date(); 
        return date.getHours(); 
       }, 
       showGreetingMessage:function(){     
        //var date = new Date(); 
        return greeting + ", It's "+ this.showDate(); 
       } 
      } 
     } 
    }; 
}); 

modSvc.config(function(dateProvider){ 
    var hours = dateProvider.$get().showDate(); 
    if(hours<12) 
     dateProvider.showGreeting("Good morning!"); 
    else if(hours<17) 
     dateProvider.showGreeting("Good afternoon!"); 
    else if(hours<22) 
     dateProvider.showGreeting("Good evening!"); 
    else 
     dateProvider.showGreeting("Good night!"); 
}); 

function serviceController($scope,date){ 
    $scope.greetingMessage = date.showGreetingMessage(); 
} 

modSvc.controller("svcController",serviceController); 

如果你看到showGreetingMessage功能它只有一行代碼是：

return greeting + ", It's "+ this.showDate(); 

然而showDate功能駐留在同一水平作爲showGreetingMessage功能。這就是爲什麼this.showDate不應該工作，它應該給錯誤。但它工作得很好。這是怎麼回事？

Answer 1

它取決於使用的JavaScript引擎，但根據Mozilla reference，您的「this」實際上會引用父對象，因爲您要返回對象。

作爲一個對象的方法

當一個函數被調用作爲對象的方法，其這被設置爲方法被調用的對象。

在下面的示例中，當調用o.f（）時，在函數內部，它將綁定到o對象。

var o = { 
    prop: 37, 
    f: function() { 
    return this.prop; 
    } 
}; 

console.log(o.f()); // logs 37