本篇为 JavaScript 进阶 ES6 系列笔记第一篇，将陆续更新后续内容。参考：JavaScript 进阶面向对象 ES6

文章目录

「一」面向对象编程介绍
「二」ES6 中的类与对象
「三」类的继承
「四」面向对象案例

「一」面向对象编程介绍

面向过程编程 POP

分析出解决问题的步骤，按步骤逐步实现

面向对象编程 OOP

将事务分解成对象，由对象间进行分工与合作

面向对象具有特性：

封装性
继承性
多态性

「二」ES6 中的类与对象

创建类

class Name {// class body
}

类名习惯性定义为首字母大写

实例化

var x = new Name();

类构造函数 constructor

constructor() 方法是类的构造函数（默认）。用于传递参数，返回实例对象。通过 new 命令生成对象实例时，自动调用该方法。如果没有显式定义，类内部会自动创建 constructor()。

类添加方法

class Name {方法名() {// function body}
}

「三」类的继承

基本语法

class Father {      // 父类
}
class Son extends Father { // 子类
}

super 关键字

super 用于访问和调用对象父类构造函数、普通函数

调用父类构造函数
调用父类普通函数

子类调用时采取就近原则，先执行子类函数，若子类中无此函数，再执行父类中函数

注意：

子类在构造函数中使用 super ，必须放到 this 前面。必须先调用父类的构造方法，在调用子类的构造方法。

三个注意点

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
类里面的共有属性和方法一定要加 this 使用
类里面 this 指向问题
constructor 里面的 this 指向实例对象，方法里面的 this 指向这个方法的调用者

「四」面向对象案例

面向对象的 Tab 栏切换

因为实现代码过长，这里先分析一下大体框架，具体实现代码后文给出

主要 HTML代码

    <main><h4>动态添加标签页</h4><div class="tabsbox" id="tab"><!-- tab 标签 --><nav class="firstnav"><ul><li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li><li><span>测试2</span><span class="iconfont icon-guanbi"></span></li><li><span>测试3</span><span class="iconfont icon-guanbi"></span></li></ul><div class="tabadd"><span>+</span></div></nav><!-- tab 内容 --><div class="tabscon"><section class="conactive">测试1</section><section>测试2</section><section>测试3</section></div></div></main><script src="tab.js"></script>

由于篇幅问题，css 代码不再给出
JS 代码

var that;
class Tab {constructor(id) {that = this;this.main = document.querySelector(id);this.add = this.main.querySelector('.tabadd');// li 的父元素this.ul = this.main.querySelector('.firstnav ul:first-child'); // .firstnav 下第一个 ul// section 的父元素this.fsection = this.main.querySelector('.tabscon');this.init();}// 初始化操作init() {this.updateNode();this.add.onclick = this.addTab;     // no ()for (var i = 0; i < this.lis.length; i++) {this.lis[i].index = i;this.lis[i].onclick = this.toggleTab;   // no ()// 点击删除按钮，调用删除函数this.remove[i].onclick = this.removeTab;// 双击 span ，调用编辑函数this.spans[i].ondblclick = this.editTab;this.sections[i].ondblclick = this.editTab;}}// 1. 切换功能toggleTab() {that.clearClass();// 去除底侧边框this.className = 'liactive';that.sections[this.index].className = 'conactive';}// 2. 添加功能addTab() {that.clearClass();var random = Math.random();var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';var section = '<section class="conactive">测试' + random + '</section>';that.ul.insertAdjacentHTML('beforeend', li);that.fsection.insertAdjacentHTML('beforeend', section);that.init();}// 3. 删除功能removeTab(e) {// 防止触发父类 li 点击事件，应该阻止冒泡e.stopPropagation();// 获取索引号var index = this.parentNode.index;// 利用索引直接删除元素， 直接利用 remove()that.lis[index].remove();that.sections[index].remove();that.init();// 删除非选定状态if (document.querySelector('.liactive')) return;// 删除选定状态，手动调用点击事件，使得前一个被选中index == 0 ? index : index--;that.lis[index] && that.lis[index].click();     // 妙啊}// 4. 修改功能editTab() {var str = this.innerHTML;// 双击禁止选定文字window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();this.innerHTML = '<input type="text" />';var input = this.children[0];input.value = str;// 使得文本框中文字处于选定状态input.select();// 失去焦点，文本赋值给 spaninput.onblur = function () {this.parentNode.innerHTML = this.value;}// 点击回车，也可赋值input.onkeyup = function (e) {if (e.keyCode === 13) {     // 13 回车键this.blur();}}}// 清除样式clearClass() {for (var i = 0; i < this.lis.length; i++) {this.lis[i].className = '';this.sections[i].className = '';}}// 动态更新所有 li 和 sectionupdateNode() {this.lis = this.main.querySelectorAll('li');this.sections = this.main.querySelectorAll('section');// 删除 ✖this.remove = this.main.querySelectorAll('.icon-guanbi');// 获取 spanthis.spans = this.main.querySelectorAll('.firstnav li span:first-child');}
}new Tab('#tab');

补充 1

insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中

语法：element.insertAdjacentHTML(position, text);

注意： appendChild 不支持追加字符串的子元素，insertAdjacentHTML() 支持

补充 2

双击事件：ondblclick

双击会默认选定文字，若要禁止选中文字，需要代码
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

JavaScript 面向对象编程（一） —— 面向对象基础相关推荐

php控制器面向对象编程,PHP 面向对象编程（2）
一些内建方法: class Person { public $isAlive = true; function __construct($name) { //这里我们创建了一个name的属性 $thi ...
python面向对象的优点_Python面向对象编程——总结面向对象的优点
Python面向对象编程--总结面向对象的优点一.从代码级别看面向对象 1.在没有学习类这个概念时,数据与功能是分离的 def exc1(host,port,db,charset): conn=co ...
python面向对象编程的优点-Python面向对象编程——总结面向对象的优点
Python面向对象编程--总结面向对象的优点一.从代码级别看面向对象 1.在没有学习类这个概念时,数据与功能是分离的 def exc1(host,port,db,charset): conn=co ...
【Java开发语言 03】第三章面向对象编程（面向对象与面向过程+类和对象+类成员一：属性+类成员二：方法+对象的创建和使用+封装和隐藏+构造器+关键字this,package,import）
面向对象编程 1 面向对象与面向过程 1.1 java类及类的成员 2 java语言的基本元素:类和对象 2.1 类的语法格式 2.2 创建Java自定义类 2.3 对象的创建及使用 3 类的成员之一 ...
什么是面向对象编程和面向对象编程语言
面向对象编程是一种编程范式或编程风格.它以类或对象作为组织代码的基本单元,并将封装.抽象.继承.多态四个特性,作为代码设计和实现的基石 . 面向对象编程语言是支持类或对象的语法机制,并有现成的语法机制 ...
python入门：正则表达式，面向对象编程，零基础视频教程分享
正则表达式 import re #首先必须import re模块,re=Regular Expression,就是正则表达式的意思. pattern=re.compile(r'hello') #指明你 ...
python中面向对象编程简称为_Python基础-面向对象编程
本文完全转载自廖雪峰大神的教程: 面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的 ...
python 面向对象编程简称_Python基础-面向对象编程
简介三中编程范式面向过程编程函数式编程面向对象编程面向对象和面向过程对比面向过程优点: 性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Lin ...
怎么理解面向对象编程【java基础第一讲】
面向对象编程(OOP)是什么 OOP:Object Oriented Programming.要讲面向对象我们先来理解一下面向过程的含义,如果你已经有c语言相关的开发经验可能就已经明白面向过程的意义. ...
MATLAB 面向对象编程 APP Designer基础
类的基本组成定义一个类 < 表示可继承创建实例化对象添加属性(公有或私有属性) 构造方法,初始化设置函数和获取函数继承多态(同一个函数传递不同的对象) 基本模板,点击MATLAB中新 ...

JavaScript 面向对象编程（一） —— 面向对象基础