导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

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

说明：

三种特性

理解

案例

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'
    });
  }
}

继承

class Person {
	constructor(name, age) {
  	this.name = name;
    this.age = age;
  }
  sayHi() {
  	console.log(`I'm ${this.name}`);
  }
}

class Student extends Person {
	constructor(name, age,  school) {
  	super(name, age);
    this.school = school;
  }
  run() {
  	console.log('run');
  }
}

var stu = new Student('Lance', 26, 'School');
console.log(stu);

⭐️ 封装

通过封装，控制类的属性与方法的可访问方式

关键字

好处

然而 ES6 没有支持面向对象的封装特性

⭐️ 利用 Symbol 实现方法私有化

const doAjax = Symbol('doAjax');
class HTTP {
	[doAjax](options) {
  	...
  }
}

const http = new HTTP();
console.log(http);

Untitled

实例化后，无法访问 doAjax 方法，从而实现方法私有化

多态

面向对象的意义

总结