2016-08-04 53 views
0

我写了一个简单的Angular JS代码,它根据一天的时间向用户致意。它工作正常。下面的代码给出:Angular JS object scope

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不应该工作,它应该给错误。但它工作得很好。这是怎么回事?

回答

1

它取决于使用的JavaScript引擎,但根据Mozilla reference,您的“this”实际上会引用父对象,因为您要返回对象。

作为一个对象的方法

当一个函数被调用作为对象的方法,其这被设置为方法被调用的对象。

在下面的示例中,当调用o.f()时,在函数内部,它将绑定到o对象。

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

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