AngularJS装饰没有object.defineProperty [英] AngularJS Decorator without object.defineProperty

问题描述

我如何使用的装饰，无需object.defineProperty访问？

我期待到可用的垫片：

• ES5，假


• 填充工具

但如果那些没有通过测试的，有装饰的目的是要工作的另一种方式？

我现在用的装饰为 $ onRootScope 。

我采用了棱角分明1.08。我需要兼容IE7。

更新

我已经试过了，似乎工作的一些方法，但我不知道他们之间的区别：的 plunkr

  VAR应用= angular.module（'plunker'，[]）;的app.config（['$提供'功能（$提供）{
  $ provide.decorator（'$ rootScope'，['$委托'，函数（$代表）{
    $ delegate.a = 1;
    $ delegate.constructor.prototype.b = 2;
    Object.defineProperty（$ delegate.constructor.prototype，'C'，{
      值：3
    }）;
    返回$代表;
  }]）;
}]）;app.controller（'MainCtrl'，函数（$ rootScope，$范围）{
  的console.log（$ rootScope）; //揭示了``财产
  的console.log（$ rootScope.constructor.prototype）; // =＆GT; {B：2 C：3}
  的console.log（$ rootScope.a）; // =＆GT; 1
  的console.log（$ rootScope.b）; // =＆GT; 2
  的console.log（$ rootScope.c）; // =＆GT; 3
  $ scope.name ='世界';
}）;
 

感谢你。

解决方案

好了，相当于解决您共享code的PICE是：

  VAR原= Object.getPrototypeOf（Object.getPrototypeOf（$代表））;
原['$ onRootScope'] =功能（名称，监听器）{
   VAR退订= $ $代表对（名称，监听器）。
   这在$（'$毁灭'，退订）。
};
 

在原来的code此行 $ delegate.constructor.prototype 越来越访问$委托的原型样机。

然后，一旦你访问它，你可以简单地在它定义一个新的功能。你并不需要使用 defineProperty 。唯一需要注意的是，通过使用 defineProperty 您可以配置方法不枚举（适用于每个循环不应该出现在）。在这个其他的方式，添加的方法会出现在-每个循环。它可能不是你的问题，但。

我创建了一个的jsfiddle 这一点。

您可以使用约翰Resig的为 getObjectPrototypeOf C>如果功能不适用于当前的浏览器：

 如果（typeof运算Object.getPrototypeOf！==功能）{
  如果（typeof运算测试.__ proto__ ===对象）{
    Object.getPrototypeOf =功能（对象）{
      返回对象.__ proto__;
    };
  }其他{
    Object.getPrototypeOf =功能（对象）{
      //可能会破坏如果构造已被篡改
      返回object.constructor.prototype;
    };
  }
}
 

How do I use decorators without having access to object.defineProperty?

I am looking into the shims available:

• es5-sham
• polyfill

but in case those don't pass testing, is there another way decorators were intended to work?

I am using the decorator for $onRootScope.

I am using angular 1.08. I need compatibility with IE7.

Update

I have tried out a few methods that seem to work but I don't know the difference between them: plunkr

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

app.config(['$provide', function($provide){
  $provide.decorator('$rootScope', ['$delegate', function($delegate){
    $delegate.a = 1;
    $delegate.constructor.prototype.b = 2;
    Object.defineProperty($delegate.constructor.prototype, 'c', {
      value: 3
    });
    return $delegate;
  }]);
}]);

app.controller('MainCtrl', function($rootScope, $scope) {
  console.log($rootScope);   //reveals `a` property
  console.log($rootScope.constructor.prototype); //=> {b:2, c:3}
  console.log($rootScope.a); //=> 1
  console.log($rootScope.b); //=> 2
  console.log($rootScope.c); //=> 3
  $scope.name = 'World';
});

Thank You.

解决方案

Well, an equivalent solution to the pice of code you shared is:

var proto = Object.getPrototypeOf(Object.getPrototypeOf($delegate));
proto['$onRootScope'] = function (name, listener) {
   var unsubscribe = $delegate.$on(name, listener);
   this.$on('$destroy', unsubscribe);
};

In the original code this line $delegate.constructor.prototype is getting access to the $delegate's prototype prototype.

Then, once you get access to it, you can simply define a new function in it. You do not need to use defineProperty. The only caveat is that by using defineProperty you can configure that the method is not enumerable (should not appear in for-each loops). In this other way, the method added would appear in for-each loops. It may not be a problem for you though.

I have created a JSFiddle for this.

You can use John Resig's polyfill for getObjectPrototypeOfif the function is not available for your current browser:

if ( typeof Object.getPrototypeOf !== "function" ) {
  if ( typeof "test".__proto__ === "object" ) {
    Object.getPrototypeOf = function(object){
      return object.__proto__;
    };
  } else {
    Object.getPrototypeOf = function(object){
      // May break if the constructor has been tampered with
      return object.constructor.prototype;
    };
  }
}

这篇关于AngularJS装饰没有object.defineProperty的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！