从一个组件的实现来深刻理解JS中的继承

其实，无论是写什么语言的程序员，最终的目的，都是把产品或代码封装到一起，提供接口，让使用者很舒适的实现功能。所以对于我来说，往往头疼的不是写代码，而是写注释和文档!如果接口很乱，肯定会头疼一整天。

成都创新互联公司是一家专业提供宿州企业网站建设,专注与成都网站设计、成都网站制作、H5网站设计、小程序制作等业务。10年已为宿州众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

JavaScript 最初是以 Web 脚本语言面向大众的，尽管现在出了服务器端的 nodejs，但是单线程的性质还没有变。对于一个 Web 开发人员来说，能写一手漂亮的组件极为重要。GitHub 上那些开源且 stars 过百的 Web 项目或组件，可读性肯定非常好。

从一个例子来学习写组件

组件教程的参考来自于 GitHub 上，通俗易懂，链接。

要实现下面这个功能，对一个 input 输入框的内容进行验证，只有纯数字和字母的组合才是被接受的，其他都返回 failed：

全局变量写法

这种写法完全没有约束，基本所有人都会，完全没啥技巧：

 
 
    
  
  
  1. // html
    2. 
  
  
    3. 
  
  
  3. // javascript
    4. 
  
  
  4. var input = document.getElementById("input");
    5. 
  
  
  5. function getValue(){
    6. 
  
  
  6.   return input.value;
    7. 
  
  
  7. }
    8. 
  
  
  8. function render(){
    9. 
  
  
  9.   var value = getValue();
    10. 
  
  
  10.   if(!document.getElementById("show")){
    11. 
  
  
  11.     var append = document.createElement('span');
    12. 
  
  
  12.     append.setAttribute("id", "show");
    13. 
  
  
  13.     input.parentNode.appendChild(append);
    14. 
  
  
  14.   }
    15. 
  
  
  15.   var show = document.getElementById("show");
    16. 
  
  
  16.   if(/^[0-9a-zA-Z]+$/.exec(value)){
    17. 
  
  
  17.     show.innerHTML = 'Pass!';
    18. 
  
  
  18.   }else{
    19. 
  
  
  19.     show.innerHTML = 'Failed!';
    20. 
  
  
  20.   }
    21. 
  
  
  21. }
    22. 
  
  
  22. input.addEventListener('keyup', function(){
    23. 
  
  
  23.   render();
    24. 
  
  
  24. }); 
    25.

缺点自然不用多说，变量没有任何隔离，严重污染全局变量，虽然可以达到目的，但极不推荐这种写法。

对象隔离作用域

鉴于以上写法的弊端，我们用对象来隔离变量和函数：

 
 
    
  
  
  1. var obj = {
    2. 
  
  
  2.   input: null,
    3. 
  
  
  3.   // 初始化并提供入口调用方法
    4. 
  
  
  4.   init: function(config){
    5. 
  
  
  5.     this.input = document.getElementById(config.id);
    6. 
  
  
  6.     this.bind();
    7. 
  
  
  7.     //链式调用
    8. 
  
  
  8.     return this;
    9. 
  
  
  9.   },
    10. 
  
  
  10.   // 绑定
    11. 
  
  
  11.   bind: function(){
    12. 
  
  
  12.     var self = this;
    13. 
  
  
  13.     this.input.addEventListener('keyup', function(){
    14. 
  
  
  14.       self.render();
    15. 
  
  
  15.     });
    16. 
  
  
  16.   },
    17. 
  
  
  17.   getValue: function(){
    18. 
  
  
  18.     return this.input.value;
    19. 
  
  
  19.   },
    20. 
  
  
  20.   render: function(){
    21. 
  
  
  21.     var value = this.getValue();
    22. 
  
  
  22.     if(!document.getElementById("show")){
    23. 
  
  
  23.       var append = document.createElement('span');
    24. 
  
  
  24.       append.setAttribute("id", "show");
    25. 
  
  
  25.       input.parentNode.appendChild(append);
    26. 
  
  
  26.     }
    27. 
  
  
  27.     var show = document.getElementById("show");
    28. 
  
  
  28.     if(/^[0-9a-zA-Z]+$/.exec(value)){
    29. 
  
  
  29.       show.innerHTML = 'Pass!';
    30. 
  
  
  30.     }else{
    31. 
  
  
  31.       show.innerHTML = 'Failed!';
    32. 
  
  
  32.     }
    33. 
  
  
  33.   }
    34. 
  
  
  34. }
    35. 
  
  
  35. window.onload = function(){
    36. 
  
  
  36.   obj.init({id: "input"});
    37. 
  
  
  37. } 
    38.

相对于开放式的写法，上面的这个方法就比较清晰了。有初始化，有内部函数和变量，还提供入口调用方法。

新手能实现上面的方法已经很不错了，还记得当初做百度前端学院题目的时候，基本就是用对象了。

不过这种方法仍然有弊端。obj 对象中的方法都是公开的，并不是私有的，其他人写的代码可以随意更改这些内容。当多人协作或代码量很多时，又会产生一系列问题。

函数闭包的写法

 
 
    
  
  
  1. var fun = (function(){
    2. 
  
  
  2.   var _bind = function(obj){
    3. 
  
  
  3.     obj.input.addEventListener('keyup', function(){
    4. 
  
  
  4.       obj.render();
    5. 
  
  
  5.     });
    6. 
  
  
  6.   }
    7. 
  
  
  7.   var _getValue = function(obj){
    8. 
  
  
  8.     return obj.input.value;
    9. 
  
  
  9.   }
    10. 
  
  
  10.   var InputFun = function(config){};
    11. 
  
  
  11.   InputFun.prototype.init = function(config){
    12. 
  
  
  12.     this.input = document.getElementById(config.id);
    13. 
  
  
  13.     _bind(this);
    14. 
  
  
  14.     return this;
    15. 
  
  
  15.   }
    16. 
  
  
  16.   InputFun.prototype.render = function(){
    17. 
  
  
  17.     var value = _getValue(this);
    18. 
  
  
  18.     if(!document.getElementById("show")){
    19. 
  
  
  19.       var append = document.createElement('span');
    20. 
  
  
  20.       append.setAttribute("id", "show");
    21. 
  
  
  21.       input.parentNode.appendChild(append);
    22. 
  
  
  22.     }
    23. 
  
  
  23.     var show = document.getElementById("show");
    24. 
  
  
  24.     if(/^[0-9a-zA-Z]+$/.exec(value)){
    25. 
  
  
  25.       show.innerHTML = 'Pass!';
    26. 
  
  
  26.     }else{
    27. 
  
  
  27.       show.innerHTML = 'Failed!';
    28. 
  
  
  28.     }
    29. 
  
  
  29.   }
    30. 
  
  
  30.   return InputFun;
    31. 
  
  
  31. })();
    32. 
  
  
  32. window.onload = function(){
    33. 
  
  
  33.   new fun().init({id: 'input'});
    34. 
  
  
  34. } 
    35.

函数闭包写法的好处都在自执行的闭包里，不会受到外面的影响，而且提供给外面的方法包括 init 和 render。比如我们可以像 JQuery 那样，稍微对其改造一下：

 
 
    
  
  
  1. var $ = function(id){
    2. 
  
  
  2.   // 这样子就不用每次都 new 了
    3. 
  
  
  3.   return new fun().init({'id': id});
    4. 
  
  
  4. }
    5. 
  
  
  5. window.onload = function(){
    6. 
  
  
  6.   $('input');
    7. 
  
  
  7. } 
    8.

还没有涉及到原型，只是简单的闭包。

基本上，这已经是一个合格的写法了。

面向对象

虽然上面的方法以及够好了，但是我们的目的，是为了使用面向对象。面向对象一直以来都是被认为***的编程方式，如果每个人的代码风格都相似，维护、查看起来就非常的方便。

但是，我想在介绍面向对象之前，先来回忆一下 JS 中的继承(实现我们放到***再说)。

入门级的面向对象

提到继承，我首先想到的就是用 new 来实现。还是以例子为主吧，人->学生->小学生，在 JS 中有原型链这么一说，__proto__ 和 prototype ，对于原型链就不过多阐述，如果不懂的可以自己去查阅一些资料。

在这里，我还是要说明一下 JS 中的 new 构造，比如 var student = new Person(name)，实际上有三步操作：

 
 
    
  
  
  1. var student = {};
    2. 
  
  
  2. student.__proto__ = Person.prototype;
    3. 
  
  
  3. Person.call(student, name) 
    4.

得到的 student 是一个对象，__proto__执行 Person 的 prototype，Person.call 相当于 constructor。

 
 
    
  
  
  1. function Person(name){
    2. 
  
  
  2.   this.name = name;
    3. 
  
  
  3. }
    4. 
  
  
  4. Person.prototype.Say = function(){
    5. 
  
  
  5.   console.log(this.name + ' can say!');
    6. 
  
  
  6. }
    7. 
  
  
  7. var ming = new Person("xiaoming");
    8. 
  
  
  8. console.log(ming.__proto__ == Person.prototype) //true new的第二步结果
    9. 
  
  
  9. console.log(ming.name) // 'xiaoming' new 的第三步结果
    10. 
  
  
  10. ming.Say() // 'xiaoming can say!' proto 向上追溯的结果 
    11.

利用 __proto__ 属性的向上追溯，可以实现一个基于原型链的继承。

 
 
    
  
  
  1. function Person(name){
    2. 
  
  
  2.   this.name = name;
    3. 
  
  
  3. }
    4. 
  
  
  4. Person.prototype.Say = function(){
    5. 
  
  
  5.   console.log(this.name + ' can say!');
    6. 
  
  
  6. }
    7. 
  
  
  7. function Student(name){
    8. 
  
  
  8.   Person.call(this, name); //Person 的属性赋值给 Student
    9. 
  
  
  9. }
    10. 
  
  
  10. Student.prototype = new Person(); //顺序不能反，要在最前面
    11. 
  
  
  11. Student.prototype.DoHomeWork = function(){
    12. 
  
  
  12.   console.log(this.name + ' can do homework!');
    13. 
  
  
  13. }
    14. 
  
  
  14. var ming = new Student("xiaoming");
    15. 
  
  
  15. ming.DoHomeWork(); //'xiaoming can do homework!'
    16. 
  
  
  16. ming.Say(); //'xiaoming can say!' 
    17.

大概刚认识原型链的时候，我也就只能写出这样的水平了，我之前的文章。

打开调试工具，看一下 ming 都有哪些东西：

 
 
    
  
  
  1. ming
    2. 
  
  
  2.   name: "xiaoming"
    3. 
  
  
  3.   __proto__: Person
    4. 
  
  
  4.     DoHomeWork: ()
    5. 
  
  
  5.     name: undefined //注意这里多了一个 name 属性
    6. 
  
  
  6.     __proto__: Object
    7. 
  
  
  7.       Say: ()
    8. 
  
  
  8.       constructor: Person(name)
    9. 
  
  
  9.       __proto__: Object 
    10.

当调用 ming.Say() 的时候，刚好 ming.__proto__.__proto__ 有这个属性，这就是链式调用的原理，一层一层向下寻找。

这就是最简单的继承了。

面向对象的进阶

来看一看刚才那种做法的弊端。

  1. 没有实现传统面向对象该有的 super 方法来调用父类方法，链式和 super 方法相比还是有一定缺陷的;
  2. 造成过多的原型属性(name)，constructor 丢失(constructor 是一个非常重要的属性，MDN)。

因为链式是一层层向上寻找，知道找到为止，很明显 super 直接调用父类更具有优势。

 
 
    
  
  
  1. // 多了原型属性
    2. 
  
  
  2. console.log(ming.__proto__) // {name: undefined} 
    3.

为什么会多一个 name，原因是因为我们执行了 Student.prototype = new Person();，而 new 的第三步会执行一个 call 的函数，会使得 Student.prototype.name = undefined，恰好 ming.__proto__ 指向 Student 的 prototype，用了 new 是无法避免的。

 
 
    
  
  
  1. // 少了 constructor
    2. 
  
  
  2. 
  
  
  3. console.log(ming.constructor == Person) //true
    4. 
  
  
  4. 
  
  
  5. console.log(ming.constructor == Student) // false 
    6.

这也很奇怪，明明 ming 是继承与 Student，却返回 false，究其原因，Student.prototype 的 constructor 方法丢失，向上找到了Student.prototype.__proto__ 的 constructor 方法。

再找原因，这句话导致了 Student.prototype 的 constructor 方法丢失：

 
 
    
  
  
  1. Student.prototype = new Person();
    2.

在这句话之前打一个断点，曾经是有的，只是被替换掉了：

 找到了问题所在，现在来改进：

 
 
    
  
  
  1. // fn 用来排除多余的属性(name)
    2. 
  
  
  2. var fn = function(){};
    3. 
  
  
  3. fn.prototype = Person.prototype;
    4. 
  
  
  4. Student.prototype = new fn();
    5. 
  
  
  5. // 重新添上 constructor 属性
    6. 
  
  
  6. Student.prototype.constructor = Student; 
    7.

用上面的继承代码替换掉之前的 Student.prototype = new Person();

面向对象的封装

我们不能每一次写代码的时候都这样写这么多行来继承吧，所以，于情于理，还是来进行简单的包装：

 
 
    
  
  
  1. function classInherit(subClass, parentClass){
    2. 
  
  
  2.   var fn = function(){};
    3. 
  
  
  3.   fn.prototype = parentClass.prototype;
    4. 
  
  
  4.   subClass.prototype = new fn();
    5. 
  
  
  5.   subClass.prototype.constructor = subClass;
    6. 
  
  
  6. }
    7. 
  
  
  7. classInherit(Student, Person); 
    8.


哈哈，所谓的包装，就是重抄一下代码。

进一步完善面向对象

上面的问题只是简单的解决了多余属性和 constructor 丢失的问题，而 supper 问题仍然没有改进。

举个栗子，来看看 supper 的重要，每个人都会睡觉，sleep 函数是人的一个属性，学生分为小学生和大学生，小学生晚上 9 点睡觉，大学生 12 点睡觉，于是：

 
 
    
  
  
  1. Person.prototype.Sleep = function(){
    2. 
  
  
  2.   console.log('Sleep!');
    3. 
  
  
  3. }
    4. 
  
  
  4. function E_Student(){}; //小学生
    5. 
  
  
  5. function C_Student(){}; //大学生
    6. 
  
  
  6. classInherit(E_Student, Person);
    7. 
  
  
  7. classInherit(C_Student, Person);
    8. 
  
  
  8. //重写 Sleep 方法
    9. 
  
  
  9. E_Student.prototype.Sleep = function(){
    10. 
  
  
  10.   console.log('Sleep!');
    11. 
  
  
  11.   console.log('Sleep at 9 clock');
    12. 
  
  
  12. }
    13. 
  
  
  13. C_Student.prototype.Sleep = function(){
    14. 
  
  
  14.   console.log('Sleep!');
    15. 
  
  
  15.   console.log('Sleep at 12 clock');
    16. 
  
  
  16. } 
    17.

对于 Sleep 方法，显得比较混乱，而我们想要通过 supper，直接调用父类的函数：

 
 
    
  
  
  1. E_Student.prototype.Sleep = function(){
    2. 
  
  
  2.   this._supper(); //supper 方法
    3. 
  
  
  3.   console.log('Sleep at 9 clock');
    4. 
  
  
  4. }
    5. 
  
  
  5. C_Student.prototype.Sleep = function(){
    6. 
  
  
  6.   this._supper(); //supper 方法
    7. 
  
  
  7.   console.log('Sleep at 12 clock');
    8. 
  
  
  8. } 
    9.

不知道对 supper 的理解正不正确，总感觉怪怪的，欢迎指正!

来看下 JQuery 之父是如何 class 的面向对象，原文在这，源码如下。

 
 
    
  
  
  1. /* Simple JavaScript Inheritance
    2. 
  
  
  2.  * By John Resig http://ejohn.org/
    3. 
  
  
  3.  * MIT Licensed.
    4. 
  
  
  4.  */
    5. 
  
  
  5. // Inspired by base2 and Prototype
    6. 
  
  
  6. (function(){
    7. 
  
  
  7.   // initializing 开关很巧妙的来实现调用原型而不构造，还有回掉
    8. 
  
  
  8.   var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
    9. 
  
  
  9.   // The base Class implementation (does nothing)
    10. 
  
  
  10.   // 全局，this 指向 window，***的父类
    11. 
  
  
  11.   this.Class = function(){};
    12. 
  
  
  12.  
    13. 
  
  
  13.   // Create a new Class that inherits from this class
    14. 
  
  
  14.   // 继承的入口
    15. 
  
  
  15.   Class.extend = function(prop) {
    16. 
  
  
  16.     //保留当前类，一般是父类的原型
    17. 
  
  
  17.     var _super = this.prototype;
    18. 
  
  
  18.    
    19. 
  
  
  19.     // Instantiate a base class (but only create the instance,
    20. 
  
  
  20.     // don't run the init constructor)
    21. 
  
  
  21.     //开关 用来使原型赋值时不调用真正的构成流程
    22. 
  
  
  22.     initializing = true;
    23. 
  
  
  23.     var prototype = new this();
    24. 
  
  
  24.     initializing = false;
    25. 
  
  
  25.    
    26. 
  
  
  26.     // Copy the properties over onto the new prototype
    27. 
  
  
  27.     for (var name in prop) {
    28. 
  
  
  28.       // Check if we're overwriting an existing function
    29. 
  
  
  29.       //对函数判断，将属性套到子类上
    30. 
  
  
  30.       prototype[name] = typeof prop[name] == "function" &&
    31. 
  
  
  31.         typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    32. 
  
  
  32.         (function(name, fn){
    33. 
  
  
  33.           //用闭包来存储
    34. 
  
  
  34.           return function() {
    35. 
  
  
  35.             var tmp = this._super;
    36. 
  
  
  36.            
    37. 
  
  
  37.             // Add a new ._super() method that is the same method
    38. 
  
  
  38.             // but on the super-class
    39. 
  
  
  39.             this._super = _super[name];
    40. 
  
  
  40.            
    41. 
  
  
  41.             // The method only need to be bound temporarily, so we
    42. 
  
  
  42.             // remove it when we're done executing
    43. 
  
  
  43.             //实现同名调用
    44. 
  
  
  44.             var ret = fn.apply(this, arguments);  
    45. 
  
  
  45.             this._super = tmp;
    46. 
  
  
  46.             return ret;
    47. 
  
  
  47.           };
    48. 
  
  
  48.         })(name, prop[name]) :
    49. 
  
  
  49.         prop[name];
    50. 
  
  
  50.     }
    51. 
  
  
  51.    
    52. 
  
  
  52.     // 要返回的子类
    53. 
  
  
  53.     function Class() {
    54. 
  
  
  54.       // All construction is actually done in the init method
    55. 
  
  
  55.       if ( !initializing && this.init )
    56. 
  
  
  56.         this.init.apply(this, arguments);
    57. 
  
  
  57.     }
    58. 
  
  
  58.     //前面介绍过的，继承
    59. 
  
  
  59.     Class.prototype = prototype;
    60. 
  
  
  60.    
    61. 
  
  
  61.     Class.prototype.constructor = Class;
    62. 
  
  
  62.  
    63. 
  
  
  63.     Class.extend = arguments.callee;
    64. 
  
  
  64.    
    65. 
  
  
  65.     return Class;
    66. 
  
  
  66.   };
    67. 
  
  
  67. })(); 
    68.

这个时候就可以很轻松的实现面向对象，使用如下：

 
 
    
  
  
  1. var Person = Class.extend({
    2. 
  
  
  2.   init: function(name){
    3. 
  
  
  3.     this.name = name;
    4. 
  
  
  4.   },
    5. 
  
  
  5.   Say: function(name){
    6. 
  
  
  6.     console.log(this.name + ' can Say!');
    7. 
  
  
  7.   },
    8. 
  
  
  8.   Sleep: function(){
    9. 
  
  
  9.     console.log(this.name + ' can Sleep!');
    10. 
  
  
  10.   }
    11. 
  
  
  11. });
    12. 
  
  
  12. var Student = Person.extend({
    13. 
  
  
  13.   init: function(name){
    14. 
  
  
  14.     this._super('Student-' + name);
    15. 
  
  
  15.   },
    16. 
  
  
  16.   Sleep: function(){
    17. 
  
  
  17.     this._super();
    18. 
  
  
  18.     console.log('And sleep early!');
    19. 
  
  
  19.   },
    20. 
  
  
  20.   DoHomeWork: function(){
    21. 
  
  
  21.     console.log(this.name + ' can do homework!');
    22. 
  
  
  22.   }
    23. 
  
  
  23. });
    24. 
  
  
  24. var p = new Person('Li');
    25. 
  
  
  25. p.Say(); //'Li can Say!'
    26. 
  
  
  26. p.Sleep(); //'Li can Sleep!'
    27. 
  
  
  27. var ming = new Student('xiaoming');
    28. 
  
  
  28. ming.Say(); //'Student-xiaoming can Say!'
    29. 
  
  
  29. ming.Sleep();//'Student-xiaoming can Sleep!'
    30. 
  
  
  30.             // 'And sleep early!'
    31. 
  
  
  31. ming.DoHomeWork(); //'Student-xiaoming can do homework!' 
    32.

除了 John Resig 的 supper 方法，很多人都做了尝试，不过我觉得 John Resig 的实现方式非常的妙，也比较贴近 supper 方法，我本人也用源码调试了好几个小时，才勉强能理解。John Resig 的头脑真是令人佩服。

ES6 中的 class

在 JS 中，class 从一开始就属于关键字，在 ES6 终于可以使用 class 来定义类。比如：

 
 
    
  
  
  1. class Point {
    2. 
  
  
  2.   constructor(x, y){
    3. 
  
  
  3.     this.x = x;
    4. 
  
  
  4.     this.y = y;
    5. 
  
  
  5.   }
    6. 
  
  
  6.   toString(){
    7. 
  
  
  7.     return '(' + this.x + ',' + this.y + ')';
    8. 
  
  
  8.   }
    9. 
  
  
  9. }
    10. 
  
  
  10. var p = new Point(3, 4);
    11. 
  
  
  11. console.log(p.toString()); //'(3,4)' 
    12.

更多有关于 ES6 中类的使用请参考阮一峰老师的 Class基本语法。

其实 ES6 中的 class 只是写对象原型的时候更方便，更像面向对象，class 的功能 ES5 完全可以做到，比如就上面的例子：

 
 
    
  
  
  1. typeof Point; //'function'
    2. 
  
  
  2. Point.prototype;
    3. 
  
  
  3. /*
    4. 
  
  
  4. |Object
    5. 
  
  
  5. |--> constructor: function (x, y)
    6. 
  
  
  6. |--> toString: function()
    7. 
  
  
  7. |--> __proto__: Object
    8. 
  
  
  8. */ 
    9.

和用 ES5 实现的真的没有什么差别，反而现在流行的一些库比 ES6 的 class 能带来更好的效益。

回到最开始的组件问题

那么，说了这么多面向对象，现在回到最开始的那个组件的实现——如何用面向对象来实现。

还是利用 John Resig 构造 class 的方法：

 
 
    
  
  
  1. var JudgeInput = Class.extend({
    2. 
  
  
  2.   init: function(config){
    3. 
  
  
  3.     this.input = document.getElementById(config.id);
    4. 
  
  
  4.     this._bind();
    5. 
  
  
  5.   },
    6. 
  
  
  6.   _getValue: function(){
    7. 
  
  
  7.     return this.input.value;
    8. 
  
  
  8.   },
    9. 
  
  
  9.   _render: function(){
    10. 
  
  
  10.     var value = this._getValue();
    11. 
  
  
  11.     if(!document.getElementById("show")){
    12. 
  
  
  12.       var append = document.createElement('span');
    13. 
  
  
  13.       append.setAttribute("id", "show");
    14. 
  
  
  14.       input.parentNode.appendChild(append);
    15. 
  
  
  15.     }
    16. 
  
  
  16.     var show = document.getElementById("show");
    17. 
  
  
  17.     if(/^[0-9a-zA-Z]+$/.exec(value)){
    18. 
  
  
  18.       show.innerHTML = 'Pass!';
    19. 
  
  
  19.     }else{
    20. 
  
  
  20.       show.innerHTML = 'Failed!';
    21. 
  
  
  21.     }
    22. 
  
  
  22.   },
    23. 
  
  
  23.   _bind: function(){
    24. 
  
  
  24.     var self = this;
    25. 
  
  
  25.     self.input.addEventListener('keyup', function(){
    26. 
  
  
  26.       self._render();
    27. 
  
  
  27.     });
    28. 
  
  
  28.   }
    29. 
  
  
  29. });
    30. 
  
  
  30. window.onload = function(){
    31. 
  
  
  31.   new JudgeInput({id: "input"});
    32. 
  
  
  32. } 
    33.

但是，这样子，基本功能算是实现了，关键是不好扩展，没有面向对象的精髓。所以，针对目前的情况，我们准备建立一个 Base 基类，init 表示初始化，render 函数表示渲染，bind 函数表示绑定，destory 用来销毁，同时 get、set 方法提供获得和更改属性：

 
 
    
  
  
  1. var Base = Class.extend({
    2. 
  
  
  2.   init: function(config){
    3. 
  
  
  3.     this._config = config;
    4. 
  
  
  4.     this.bind();
    5. 
  
  
  5.   },
    6. 
  
  
  6.   get: function(key){
    7. 
  
  
  7.     return this._config[key];
    8. 
  
  
  8.   },
    9. 
  
  
  9.   set: function(key, value){
    10. 
  
  
  10.     this._config[key] = value;
    11. 
  
  
  11.   },
    12. 
  
  
  12.   bind: function(){
    13. 
  
  
  13.     //以后构造
    14. 
  
  
  14.   },
    15. 
  
  
  15.   render: function(){
    16. 
  
  
  16.     //以后构造
    17. 
  
  
  17.   },
    18. 
  
  
  18.   destory: function(){
    19. 
  
  
  19.     //定义销毁方法
    20. 
  
  
  20.   }
    21. 
  
  
  21. }); 
    22.

基于这个 Base，我们修改 JudgeInput 如下：

 
 
    
  
  
  1. var JudgeInput = Base.extend({
    2. 
  
  
  2.   _getValue: function(){
    3. 
  
  
  3.     return this.get('input').value;
    4. 
  
  
  4.   },
    5. 
  
  
  5.   bind: function(){
    6. 
  
  
  6.     var self = this;
    7. 
  
  
  7.     self.get('input').addEventListener('keyup', function(){
    8. 
  
  
  8.       self.render();
    9. 
  
  
  9.     });
    10. 
  
  
  10.   },
    11. 
  
  
  11.   render: function(){
    12. 
  
  
  12.     var value = this._getValue();
    13. 
  
  
  13.     if(!document.getElementById("show")){
    14. 
  
  
  14.       var append = document.createElement('span');
    15. 
  
  
  15.       append.setAttribute("id", "show");
    16. 
  
  
  16.       input.parentNode.appendChild(append);
    17. 
  
  
  17.     }
    18. 
  
  
  18.     var show = document.getElementById("show");
    19. 
  
  
  19.     if(/^[0-9a-zA-Z]+$/.exec(value)){
    20. 
  
  
  20.       show.innerHTML = 'Pass!';
    21. 
  
  
  21.     }else{
    22. 
  
  
  22.       show.innerHTML = 'Failed!';
    23. 
  
  
  23.     }
    24. 
  
  
  24.   }
    25. 
  
  
  25. });
    26. 
  
  
  26. window.onload = function(){
    27. 
  
  
  27.   new JudgeInput({input: document.getElementById("input")});
    28. 
  
  
  28. } 
    29.

比如，我们后期修改了判断条件，只有当长度为 5-10 的时候才会返回 success，这个时候能很快定位到 JudgeInput 的 render 函数：

 
 
    
  
  
  1. render: function(){
    2. 
  
  
  2.   var value = this._getValue();
    3. 
  
  
  3.   if(!document.getElementById("show")){
    4. 
  
  
  4.     var append = document.createElement('span');
    5. 
  
  
  5.     append.setAttribute("id", "show");
    6. 
  
  
  6.     input.parentNode.appendChild(append);
    7. 
  
  
  7.   }
    8. 
  
  
  8.   var show = document.getElementById("show");
    9. 
  
  
  9.   //修改正则即可
    10. 
  
  
  10.   if(/^[0-9a-zA-Z]{5,10}$/.exec(value)){
    11. 
  
  
  11.     show.innerHTML = 'Pass!';
    12. 
  
  
  12.   }else{
    13. 
  
  
  13.     show.innerHTML = 'Failed!';
    14. 
  
  
  14.   }
    15. 
  
  
  15. } 
    16.

以我目前的能力，只能理解到这里了。

总结

从一个组件出发，一步一步爬坑，又跑去介绍 JS 中的面向对象，如果你能看到***，那么你就可动手一步一步实现一个 JQuery 了，纯调侃。

关于一个组件的写法，从入门级到最终版本，一波三折，不仅要考虑代码的实用性，还要兼顾后期维护。JS 中实现面向对象，刚接触 JS 的时候，我能用简单的原型链来实现，后来看了一些文章，发现了不少问题，在看 John Resig 的 Class，感触颇深。还好，现在目的是实现了，共勉!

标题名称：从一个组件的实现来深刻理解JS中的继承
分享路径：http://www.shufengxianlan.com/qtweb/news33/394683.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

分类信息网站

响应式网站设计　　 　成都移动主机托管　　 　做网站　　 　网站托管运营　　 　成都画册设计　　 　航空文化传媒　　 　电信机房托管　　 　成都手机网站建设　　 　郫县网站建设　　 　腾讯免备案主机　　 　四川艺考培训　　 　温岭熙道网站　　 　成都活动策划　　 　搜索引擎优化　　 　定制网站　　 　娄底尾呼妄服装　　 　商城网站建设公司　　 　成都网站推广　　 　成都酒店服定制　　 　建站定制开发