类的优雅写法

栏目: JavaScript · 发布时间: 6年前

内容简介:虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。例子为一个轻提示组件JavaScript的类,是用

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

一、例子

例子为一个轻提示组件 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();

复制代码

二、类的构成

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.** 方式,还是私有变量的方式,都是独占的。 所以,在写一个类的时候,需要考虑该新增属性是共享的,还是独占的。以此,决定在构造器还是原型上进行声明。 前端全栈交学习流圈:866109386。 欢迎大家进入交流吹水。

三、代码规范

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

四、使实例化与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);
}
复制代码

这样,把锅甩回去,岂不是更妙:alien:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Google總部大揭密

Google總部大揭密

史蒂芬.李維 / 陳重亨 / 財信 / 2011-11

∣如果有一天,Google的搜尋引擎突然故障 ∣GMAIL信件全數消失 ∣Google Maps、Google Docs、Google行事曆等所有雲端服務全面停擺 ∣我們該怎麼辦?! 歷史上像Google如此成功,且廣受推崇的企業可沒幾家。它改變了網路的使用方式,也成了我們生活不可或缺的一部分。這到底是怎麼辦到的? 《連線》雜誌資深主筆史蒂芬.李維史無前例同時取得LS......一起来看看 《Google總部大揭密》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具