Каково значение ассигнования переменной 'var that = this;' в angularjs?

В каких-то драйверах Углового я увидел следующее ассигнование:

angular
    .module('users')
    .controller('usersCtrl', function ($scope, $state) {
        'use strict';
         var that = this;
    ...
}

Каково различие между использованием that или использовать this?

5
задан 09.09.2016, 22:39
2 ответа

Поскольку ты вставляешь в рамку твой вопрос в контексте углового, я буду давать тебе различный ответ для того, чтобы ты понял для того, чтобы используется нотация

angular
    .module('users')
    .controller('usersCtrl', function ($scope, $state) {
        'use strict';
         var that = this;
         ...
    });

Для языка сценариев JavaScript у него есть другое значение, которое ты можешь находить здесь

В угловом в версию 1.1.5 ввел то, что знает нотацию controllerAs со следующим sintáxis

<div ng-controller="<NombreController> as <propiedad>">

Даже этот момент использовал следующую нотацию

angular
    .module('users')
    .controller('usersCtrl', function ($scope) {
        $scope.propiedad = 'valor';
    });

и в виде

<div ng-controller="usersCtrl">
    {{propiedad}}
</div>

Благодаря тому, что $scope это шрифт правды это позволяет тебе манипулировать видом с кода язык сценариев JavaScript, что является одной из самых заметных характеристик framework.

Это приносит подготовленный проблему, известную в качестве dot notation, благодаря тому, что $scopes они используют систему наследства внутри. Эта статья (на английском) подбирает вышеупомянутую проблему в детали

Поскольку ты сможешь читать в упомянутой статье решение, он не состоит в том, чтобы манипулировать никогда прямо $scope а свойство этого. Нотация controllerAs реши вышеупомянутую проблему из-за тебя, так как он создает свойство прямо в $scope которым могут манипулировать с ключевым словом this.

В следующем примере я использую this и у этого нет никакого эффекта в виде

angular.module('app', [])
  .controller('EstandardController', function($scope, $timeout) {
    var that = this;

    that.propiedad = 'valor';

    that.objeto = {
      propiedad: 'valor'
    };

    console.log($scope);

    $timeout(function() {
      console.log($scope);
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="EstandardController">
  Manipular this desde la notación estandard no tiene efecto
  <hr>Valor de propiedad: {{propiedad}}
  <hr>Valor de objeto.propiedad: {{objecto.propiedad}}
</div>

Если ты проверяешь $scope в консоли ты можешь подтверждать, что этот не был изменен в абсолютном.

Это демонстрирует тебе несомненно, что, чтобы использовать this в controller углового ты должен быть используя обязательно нотацию controllerAs (иначе он не имел бы смысл).

Здесь - тот же пример, но используя controllerAs

angular.module('app', [])
  .controller('AsController', function($scope, $timeout) {
    var that = this;

    that.propiedad = 'valor';

    that.objeto = {
      propiedad: 'valor'
    };

    console.log($scope);

    $timeout(function() {
      console.log($scope.foo);
    });

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AsController as foo">
  Manipular this desde controller as si modifica los valores
  <hr>Valor de propiedad: {{foo.propiedad}}
  <hr>Valor de objeto.propiedad: {{foo.objeto.propiedad}}
</div>

Не только функционируй но ты можешь видеть, что потом, что controller работал, есть новое свойство foo у которого есть все то, что ты поместил ему в this.

Поскольку связано имя that со свойством foo?

Это вопрос консистенции. Если вместо foo он использовал that вид остался бы, таким образом,

<hr>Valor de propiedad: {{that.propiedad}}
<hr>Valor de objeto.propiedad: {{that.objeto.propiedad}}

Что является точно тем, что ты имеешь в твоем controller тем, что ты не был бы должен быть угадывая, кто принадлежит твоему controller и тот, кто принадлежит controller отец.

Для кода язык сценариев JavaScript не делает никакого различия, которое он называл бы, помести его, важное состоит в том, чтобы ты сохранял стоимость this в переменной, чтобы не терять Вашу ссылку в событиях и методах, и что ты отнесся к тому, что эта была консистентной со стоимостью свойства, которое ты поместил в $scope для того, чтобы он был читабельнее.

Здесь есть путеводитель, который дает тебе ссылки хороших практик для вышеупомянутых нотаций. Обычно он используется var vm = this;, что равняется в ViewModel так как угловым является MVVM.

Здесь есть другая статья, которую он также говорит на this и controllerAs

$scope vs. this в angularjs

Заметь: В угловом невозможно объявлять controller внутри другого благодаря Вашему рисунку modularizado а следовательно нет риска, что стоимость this controller будьте перемешан другим. В виде это другая тема, но каждый controller имеет Ваш $scope независимый.

Update

Существует другой случай, где возможно использовать this в controller и именно в директивном органе хотелось применять наследство, так как controllers директивных органов отец могут быть полученными, если используется конфигурация require, например

return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
        // controller => ngModel
    }
}

Эта конфигурация может быть использованной, например, чтобы добавлять validadores customizados в ngModel и использована внутри директивными органами как ng-required и ng-pattern.

Ты можешь использовать функцию пред-соединение или пост-соединение, чтобы соглашаться на попросивший controller и посылать выполнять какую-то функцию этого. Для того, чтобы вышеупомянутые функции были доступны в руководящих дочерях, ты должен добавлять свойства к функции controller и этого добиваются используя this

Пример

angular.module('app', [])
  .directive('padre', function() {
    return {
      restrict: 'E',
      scope: true,
      controller: function($scope) {
        $scope.contador = 0;
       
        // Esta función estará disponible
        this.incrementar = function() {
          $scope.contador++;
        }
      }
    };
  })
  .directive('hijo', function() {
    return {
      restrict: 'E',
      require: '^padre',
      template: '<button type="button" ng-click="invocar()">Incrementar</button>',
      link: function($scope, $element, $attrs, controller) {
        $scope.invocar = function() {
          // Esta función es la misma que la referenciada en la directiva anterior
          controller.incrementar();
        };
      }
    };
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <padre>
    Contador: {{contador}}
    <br>
    <br>
    <hijo>
    </hijo>
  </padre>
</div>

Если ты обращаешь внимание в примере кнопку, он создается внутри директивного органа hijo однако возможно соглашаться на controller директивного органа padre и манипулировать свойствами этого.

Важно, чтобы ты понял, что это не имеет ничего общего с нотацией controllerAs так как с момента, который ты используешь require controller директивного органа отец (любой, который будет Вашей конфигурацией) будет доступен в четвертом параметре функций pre и post соединение всех руководящих дочерей, которые это попросят

9
ответ дан 24.11.2019, 13:27

this это смущенная концепция в языке сценариев JavaScript, который зависит от контекста, значит вещь или другую.

Так в Угловом как в других framework обычно используют эту технику that чтобы мочь соглашаться внутри других контекстов в this верхнего уровня и не создавать конфликты. Будучи контекстами this следующие:

Глобальный контекст

В контексте глобального выполнения (вне любой функции), this он относится к глобальному объекту, уже будьте в строгом способе или нет.

console.log(this.document === document); // true
// En los navegadores web, el objeto window también es un objeto global:

console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

Контекст функции

Внутри функции, стоимости this завись от того, как функция названа.

function f1(){
  return this;
}

console.log(f1() === window); // objeto global

В этом случае, стоимости this не будь установлен вызовом. Ввиду того, что код не в строгом способе, стоимость this должна быть всегда объектом а следовательно это по умолчанию глобальный объект.

function f2(){
  "use strict"; // consultar modo estricto
  return this;
}

console.log(f2() === undefined);

Контекст объекта

Когда функция названа как метод объекта, this изменись из-за в объект (как в других языках слово self)

var myApp = {
  name : 'Megan',
  lastName : 'Fox',
  completeName (){
    return this.name + ' ' + this.lastName
  }
};

console.log(myApp.completeName());
3
ответ дан 24.11.2019, 13:27
  • 1
    Для языка сценариев JavaScript то, что ты помещаешь, верное, для углового он это не. В угловом используется this в драйверах, чтобы соглашаться на тот же объект controller и действительно не имеет значение, который является именем переменной, которую ты распределяешь ему, может быть vm, self, that или foo. controllers углового звука modularizados поэтому нет конфликтов и #225; mbitos, поскольку ты помещаешь в твоем ответе. –  devconcept 09.09.2016, 21:16

Теги

Похожие вопросы