JavaScript is an object-based language. JavaScript 是一个基于对象的语言. But it's not a real OOP language. 但它并不是真正面向对象的语言.

说明：

• OOP: Object Oriented Programming
• ES6之前，没有类的概念，类是面向对象的核心
• ES6 引入了类的概念，但只实现了类的继承，而面向对象的另外两大特性：封装和多态，并没有针对性的实现

三种特性

• 封装
• 继承
• 多态

理解

• 面向对象：
  • 把具有相同属性和行为的事物抽象成一个事物类别，通过实例化，让这个事物类别构造出一个具体的事物，这个具体的事物就是对象。
• 举例：
  • 比如人就是一个事物类别，人有名字、身高、体重等属性，人同时有说话、吃饭、“睡觉、喝水等行为，通过实例化人这个事物类别后，可以得到具体一个人，加入实例化一个小明，名字是小明，身高180，体重130，那么小明就是人的一个实例。
• 更具体的例子：
  • 选项卡功能是一个事物类别，它有页面切换方式的属性，它也有点击导航按钮切换页面的方法，通过实例化这个选项卡的事物类别后，我们可以得到一选项卡A，它的页面切换方式是淡入淡出。

案例

tab

ES5 版本

;(function() {
  var Tab = function(mode) {
    this.mode = (mode === 'fade' || mode === 'slide') ? mode : 'fade';
    this.oTab = $('.J_tab');
    this.oPage = $('.J_page');
    this.oPageItems = this.oPage.find('.item');
    this.oPageWrap = this.oPage.children('.page-wrap');
    this.init();
  }

  Tab.prototype.init = function() {
    this.setMode();
    this.bindEvent();
  }

  Tab.prototype.setMode = function() {
    this.oPageWrap.addClass(this.mode);
  }

  Tab.prototype.bindEvent = function() {
    this.oTab.on('click', '.item', $.proxy(this.tabClick, this));
  }

  Tab.prototype.tabClick = function(e) {
    var e = e || window.event,
        tar = e.target || e.srcElement,
        curIdx = $(tar).index();

    if (tar.className === 'item') {
      $(tar).addClass('current').siblings('.item').removeClass('current');
      this._pageChange(curIdx);
    }
  }

  Tab.prototype._pageChange = function(index) {
    switch (this.mode) {
      case 'fade':
        this._fadePage(index);
        break;
      case 'slide':
        this._slidePage(index);
        break;
      default:
        this._slidePage(index);
        break;
    }
  }

  Tab.prototype._fadePage = function(index) {
      this.oPageItems.eq(index).fadeIn(100).siblings('.item').fadeOut(100);
  }

  Tab.prototype._slidePage = function(index) {
    this.oPageWrap.animate({
      left: (-index * 500) + 'px'
    });
  }

  var tab = new Tab('slide');
})();

ES6 版本

export default class Tab {
  constructor(mode) {
    this.mode = (mode === 'fade' || mode === 'slide') ? mode : 'fade';
    this.oTab = $('.J_tab');
    this.oPage = $('.J_page');
    this.oPageItems = this.oPage.find('.item');
    this.oPageWrap = this.oPage.children('.page-wrap');
    this.init();
  }
  init() {
    this.setMode();
    this.bindEvent();
  }

  setMode() {
    this.oPageWrap.addClass(this.mode);
  }

  bindEvent() {
    this.oTab.on('click', '.item', $.proxy(this.tabClick, this));
  }

  tabClick(e) {
    var e = e || window.event,
        tar = e.target || e.srcElement,
        curIdx = $(tar).index();

    if (tar.className === 'item') {
      $(tar).addClass('current').siblings('.item').removeClass('current');
      this._pageChange(curIdx);
    }
  }

  _pageChange(index) {
    switch (this.mode) {
      case 'fade':
        this._fadePage(index);
        break;
      case 'slide':
        this._slidePage(index);
        break;
      default:
        this._slidePage(index);
        break;
    }
  }

  _fadePage(index) {
      this.oPageItems.eq(index).fadeIn(100).siblings('.item').fadeOut(100);
  }

  _slidePage(index) {
    this.oPageWrap.animate({
      left: (-index * 500) + 'px'
    });
  }
}

继承