this与$scope

落日映苍穹つ 2021-12-22 02:55 249阅读 0赞

最近在Angular项目中遇到关于controller内使用$scope&this 暴露数据的问题，下面来分析一下：

"controller as" 是Angular在1.2版本后新增的语法，我将从引用方式，作用范围，对象对比三个方面做两者的比较：

**引用方式：**

1) $scope 只需要在注入中声明，后面就可以直接在附加数据对象：

**controller:**

function ACtrl($scope) {
        
                        $scope.test = "一个例子"; //在$scope对象中加入test
                    }

**html:**

2) this 则采用了controller as(需要版本为ng 1.2+)写法：

**controller:**

function BCtrl() {
        
                        var vm = this;
                        this.test = "一个例子"; //在this对象中加入test
                    }

**html:**

<div ng-controller="BCtrl as vm">
                        {
        {vm.test}}
                    </div>

**作用范围：**

1) $scope 中的变量或数据对象我们可以全部拿到，并且上级控制器中的变量也可以在下级控制器中被获取到：

**controller:**

function ParentCtrl($scope) {
        
                        $scope.test = "测试";
    
                        $scope.cover ="覆盖测试";
                    }
                    function ChildCtrl($scope) {
        
                        $scope.cover ="子覆盖测试";
                        var test = $scope.test; //“测试”
                    }

**html:**

<div ng-controller="ParentCtrl">
                        <p>Parent-test : {
        {test}}</p>
                        <p>Parent-cover : {
        {cover}}</p>
                        <div ng-controller="ChildCtrl">
                            <p>Child-test : {
        {test}}</p>
                            <p>Child-cover : {
        {cover}}</p>
                        </div>
                    </div>

我在父控制器ParentCtrl中声明的test变量并未在子控制器ChildCtrl中做声明，而在ChildCtrl作用范围内的Child-test 中，test却输出了”测试”；基于此我再做了一次覆盖测试，检测结果显示，当父子控制器同时存在相同的变量时，父子控制器各自范围内的值不会被覆盖；

2) this 中的变量则只适用于当前控制器：

**controller:**

function ParentCtrl($scope) {
        
                        var vm = this;
    
                        vm.test = "测试";
                        vm.cover ="覆盖测试";
                    }
                    function ChildCtrl($scope) {
        
                        var vm = this;
    
                        vm.cover ="子覆盖测试";
                    }

**html:**

<div ng-controller="ParentCtrl as parent">
                        <p>Parent-test : {
        {parent.test}}</p>
                        <p>Parent-cover : {
        {parent.cover}}</p>
                        <div ng-controller="ChildCtrl as child">
                            <p>Child-test : {
        {child.test}}</p>
                            <p>Child-cover : {
        {child.cover}}</p>
                        </div>
                        <div ng-controller="ChildCtrl as parent">
                            <p>Child-test : {
        {parent.test}}</p>
                            <p>Child-cover : {
        {parent.cover}}</p>
                        </div>
                    </div>

在使用this的时候，各层级变量的命名空间是平行的状态，模板html中只可以拿到当前控制器下声明的变量。

**对象对比：**

**controller:**

function CCtrl($scope) {
        
                    var vm = this;
    
                    $scope.logThisAndScope = function() {
        
                        console.log(vm === $scope)
                    }
                }

vm与$scope实际上是不相等的，在console中我们可以看到

vm: Constructor;

$scope: $get.Scope.$new.Child;

而在$scope中又包含了一个变量vm: Constructor

实际结构是

$scope: {
        
                ...,
                vm: Constructor,
                ...
            }

那么我们可以整理如下：

$scope 当控制器在写法上形成父子级关系时，子级没有的变量或方法父级会自动强加在子级身上，子级可以任意获取到当前父级的变量或方法，该种形式是不可逆的，即父级无法通过$scope获取到子级的任意变量或方法。

this 则像一个独立的个体，所有东西都是由自己管理，也就不存在父子级变量混淆关系了。

那数据共享该如何进行呢？数据业务逻辑我觉得还是交给更专业的service来处理吧。

两种方式其实在性能上并无优劣之分，只有代码习惯的选择。

这或许可以取决于我们观察的角度，其实可以理解为私用跟公用的区别！