优雅的类写法

前言

虽然如今已是ES6的时代，可是，仍是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法，并分步骤讲述如何写出优雅的类。

1、例子

例子为一个轻提示组件Toast。 须要实现的功能：

• on方法，显示提示
• off方法，隐藏提示
• init方法，初始化提示语

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}

Toast.prototype = {
  // 构造器
  constructor: Toast,
  // 初始化方法
  init: function(option){
    this.prompt = option.prompt || '';
    this.render();
    this.bindEvent();
  },
  // 显示
  show: function(){
    this.changeStyle(this.elem, 'display', 'block');
  },
  // 隐藏
  hide: function(){
    this.changeStyle(this.elem, 'display', 'none');
  },
  // 画出dom
  render: function(){
    var html = '';
    this.elem = document.createElement('div');
    this.changeStyle(this.elem, 'display', 'none');

    html += '<a class="J-close" href="javascript:;">x</a>'
    html += '<p>'+ this.prompt +'</p>';
    
    this.elem.innerHTML = html;

    return document.body.appendChild(this.elem);
  },
  // 绑定事件
  bindEvent: function(){
    var self = this;
    
    this.addEvent(this.elem, 'click', function(e){
      if(e.target.className.indexOf('J-close') != -1){
        console.log('close Toast!');
        self.hide();
      }
    });
  },
  // 添加事件方法
  addEvent: function(node, name, fn){
    var self = this;
    
    node.addEventListener(name, function(){
      fn.apply(self, Array.prototype.slice.call(arguments));
    }, false);
  },
  // 改变样式
  changeStyle: function(node, key, value){
      node.style[key] = value;
  }
};

var T = new Toast({prompt:'I\'m Toast!'});
T.show();

复制代码

2、类的构成

JavaScript的类，是用函数对象来实现。 类的实例化形式以下：

var T = new Toast();
复制代码

其中的重点，就是Function的编写。

类分为两部分：constructor+prototype。也即构造器+原型。

2.1 构造器

构造器从直观上来理解，就是写在函数内部的代码。 从Toast例子上看，构造器就是如下部分：

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
复制代码

这里的this,指向的是实例化的类。 每次经过new Toast()的方式进行实例化，构造器都会执行一遍。

2.2 原型

原型上的方法和变量的声明，都是经过Toast.prototype.*的方式。 那么在原型上普通的写法以下：

Toast.prototype.hide = function(){/*code*/}
Toast.prototype.myValue = 1;
复制代码

可是，该写法很差的地方：就是每次都要写前半部分Toast.prorotype，略显累赘。 在代码压缩优化方面也不友好，没法作到最佳的压缩。 改进的方式以下：

Toast.prorotype = {
  constructor: Toast,
  hide: function(){/*code*/},
  myValue: 1 
}
复制代码

这里的优化，是把原型指向一个新的空对象{}。 带来的好处，就是能够用{key:value}的方式写原型上的方法和变量。 可是，这种方式会改变原型上构造器prototype.constructor的指向。 若是不从新显式声明constructor的指向，Toast.constructor.prototype.constructor的会隐式被指向Object。而正确的指向，应该是Toast。 虽然经过new实例化没有出现异常，可是在类继承方面，constructor的指向异常，会产生不正确的继承判断结果。这是咱们不但愿看到的。 因此，须要修正constructor。

2.3 构造器和原型的不一样

原型上的方法和变量，是该类全部实例化对象共享的。也就是说，只有一份。 而构造器内的代码块，则是每一个实例化对象单独占有。无论是否用this.**方式，仍是私有变量的方式，都是独占的。 因此，在写一个类的时候，须要考虑该新增属性是共享的，仍是独占的。以此，决定在构造器仍是原型上进行声明。

3、代码规范

• 类的命名规范，业界有不成文的规定，就是首字母大写。
• 原型上的私有方法，默认如下划线开始。这种只是团队合做方面有review代码的好处，实际上仍是暴露出来的方法。

4、使实例化与new无关

类的实例化，一个强制要求的行为，就是须要使用new操做符。若是不使用new操做符，那么构造器内的this指向，将不是当前的实例化对象。 优化的方式，就是使用instanceof作一层防御。

function Toast(option){
  if(!(this instanceof Toast)){
    return new Toast(option);
  }
  
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
复制代码

从上述代码能够看出，使用这个技巧，能够防止团队一些大头虾出现使用错误实例化方式，致使代码污染的问题。 这种忍者技巧很酷，但从另外一方面考虑，仍是但愿使用者能够用正确的方式去实例化类。 因此，改为如下这种防御方式

function Toast(option){
  if(!(this instanceof Toast)){
    throw new Error('Toast instantiation error');
  }
  
  this.prompt = '';
  this.elem = null;
  this.init(option);
}
复制代码

这样，把锅甩回去，岂不是更妙👽

---

喜欢我文章的朋友，能够经过如下方式关注我：

• 「star」 或 「watch」 个人GitHub blog
• RSS订阅个人我的博客：王先生的基地