课程表

Ember.js 基础

Ember.js 对象模型

Ember.js handlebars模板

Ember.js 路由

Ember.js 组件

Ember.js 控制器

Ember.js 模型

Ember.js 测试

工具箱
速查手册

Ember 类的扩展(重载)

当前位置:免费教程 » JS/JS库/框架 » Ember.js

reopen不知道怎么翻译好,如果按照reopen翻译过来应该是“重新打开”,但是总觉得不顺,所以就译成扩展了,如果有不妥请指正。

当你想扩展一个类你可以直接使用reopen()方法为一个已经定义好的类添加属性、方法。如果是使用extend()方法你需要重新定义一个子类,然后在子类中添加新的属性、方法。 前一篇所过,调用create()方法时候不能传入计算属性并且不推荐在此方法中新定义、重写方法,但是使用reopen()方法可以弥补create()方法的补足。与extend()方法非常相似,下面的代码演示了它们的不同之处。

  1. Parent = Ember.Object.extend({
  2. name: 'ubuntuvim',
  3. fun1() {
  4. console.log("The name is " + this.name);
  5. },
  6. common() {
  7. console.log("common method...");
  8. }
  9. });
  10.  
  11. // 使用extend()方法添加新的属性、方法
  12. Child1 = Parent.extend({
  13. // 给类Parent为新增一个属性
  14. pwd: '12345',
  15. // 给类Parent为新增一个方法
  16. fun2() {
  17. console.log("The pwd is " + this.pwd);
  18. },
  19. // 重写父类的common()方法
  20. common() {
  21. //console.log("override common method of parent...");
  22. this._super();
  23. }
  24. });
  25.  
  26. var c1 = Child1.create();
  27. console.log("name = " + c1.get('name') + ", pwd = " + c1.get('pwd'));
  28. c1.fun1();
  29. c1.fun2();
  30. c1.common();
  31. console.log("-----------------------");
  32.  
  33. // 使用reopen()方法添加新的属性、方法
  34. Parent.reopen({
  35. // 给类Parent为新增一个属性
  36. pwd: '12345',
  37. // 给类Parent为新增一个方法
  38. fun2() {
  39. console.log("The pwd is " + this.pwd);
  40. },
  41. // 重写类本身common()方法
  42. common() {
  43. console.log("override common method by reopen method...");
  44. //this._super();
  45. },
  46. // 新增一个计算属性
  47. fullName: Ember.computed(function() {
  48. console.log("compute method...");
  49. })
  50. });
  51. var p = Parent.create();
  52. console.log("name = " + p.get('name') + ", pwd = " + p.get('pwd'));
  53. p.fun1();
  54. p.fun2();
  55. p.common();
  56. console.log("---------------------------");
  57. p.get('fullName'); // 获取计算属性值,这里是直接输出:compute method...
  58.  
  59. // 使用extend()方法添加新的属性、方法
  60. Child2 = Parent.extend({
  61. // 给类Parent为新增一个属性
  62. pwd: '12345',
  63. // 给类Parent为新增一个方法
  64. fun2() {
  65. console.log("The pwd is " + this.pwd);
  66. },
  67. // 重写父类的common()方法
  68. common() {
  69. //console.log("override common method of parent...");
  70. this._super();
  71. }
  72. });
  73. var c2 = Child2.create();
  74. console.log("name = " + c2.get('name') + ", pwd = " + c2.get('pwd'));
  75. c2.fun1();
  76. c2.fun2();
  77. c2.common();

执行结果

从执行结果可以看到如下的差异:
同点: 都可以用于扩展某个类。
异点
1. extend需要重新定义一个类并且要继承被扩展的类;
2. reopen是在被扩展的类本身上新增属性、方法,可以扩展计算属性(相比create()方法);

到底用那个方法有实际情况而定,reopen方法会改变了原类的行为(可以想象为修改了对象的原型对象的方法和属性),就如演示实例一样在reopen方法之后调用的Child2类的common方法的行为已经改改变了,在编码过程忘记之前已经调用过reopen方法就有可能出现自己都不知道怎么回事的问题! 如果是extend方法会导致类越来越多,继承树也会越来越深,对性能、调试也是一大挑战,但是extend不会改变被继承类的行为。

扩展静态属性

使用reopenClass()方法可以扩展static类型的属性、方法。

  1. Parent = Ember.Object.extend();
  2.  
  3. // 使用reopenClass()方法添加新的static属性、方法
  4. Parent.reopenClass({
  5. isPerson: true,
  6. username: 'blog.ddlisting.com'
  7. //,name: 'test' //这里有点奇怪,不知道为何不能使用名称为name定义属性,会提示这个是自读属性,使用username却没问题!!估计name是这个方法的保留关键字
  8. });
  9.  
  10. Parent.reopen({
  11. isPerson: false,
  12. name: 'ubuntuvim'
  13. });
  14. console.log(Parent.isPerson);
  15. console.log(Parent.name); // 输出空
  16. console.log(Parent.create().get('isPerson'));
  17. console.log(Parent.create().get('name')); // 输出 ubuntuvim

对于在reopenClass方法中使用属性name的问题下面的地址有解释

  1. http://discuss.emberjs.com/t/reopenclass-method-can-not-pass-attribute-named-name-of-it/10189
  2. http://stackoverflow.com/questions/36078464/reopenclass-method-can-not-pass-attribute-named-name-of-it
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号