javascript 中的 getter 和 setter。 setter 是如何实现的？在 Angular 控制器中使用？

Question

我正在阅读有关 getters 和 setters 的文章，这个例子对我来说很有意义：

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith'
};

Object.defineProperty(person, 'fullName', {
    get: function() {
        return firstName + ' ' + lastName;
    },
    set: function(name) {
        var words = name.split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
});

以上等同于：

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

在此代码中：

person.fullName = 'Jack Franklin';

等号如何调用setter？

在此 Angular 代码中：

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

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
});

当我们在这段代码中声明（或调用？）函数的参数时，是否在幕后使用了getter：

function ($scope, $http) {...}

Dependency Injector 是否根据名称获取这些服务，调用它们以便它们 return 某些东西，并将这些服务的 return 值设置为那些参数的值？

Answer 1

在您的 phonecatApp 示例中，它没有使用任何属性访问器。它只是使用原始属性。

两个使用属性访问器和 controllerAs 语法重写它看起来像：

PhoneListController.$inject = ['$http'];
function PhoneListController($http) {

    var self = this;
    $http.get('phones/phones.json').success(function(data) {
        self._phones = data;
    }):

    Object.defineProperty(this, 'phones', {
        get: function() {
            return self._phones;
        }
    })

    Object.defineProperty(this, 'orderProp', {
        get: function() {
            return 'age';
        }
    }}
}
phonecatApp.controller('PhoneListController', PhoneListController);

Answer 2

回答您的问题：

1.等号如何调用setter?

A getter 和 setter 是一种 ECMA 语言构造 - 它通过调用您定义的 setter 函数来工作 - 请参阅 spec

2。当我们在这段代码中声明（或调用？）函数的参数时，是否在幕后使用了 getter：

否，getter未使用。除非有明确的注解，否则 Angular 使用函数的参数名称来查找以前注册的要注入的服务 - 请参阅 src。这就是代码缩小（更改参数名称）打破这一点的原因，以及使用以下两种方法需要显式注释的原因：

app.controller("Foo", FooCtrl);

FooCtrl.$inject = ["$scope", "$http"];
function FooCtrl($scope, $http){
}

app.controller("Foo", ["$scope", "$http", FooCtrl]);

function FooCtrl($scope, $http){
}

javascript 中的 getter 和 setter。 setter 是如何实现的？在 Angular 控制器中使用？

Getters and Setters in javascript. How is the setter implemented? Used in Angular controller?

javascript

getter

angularjs