1 JS 面向对象

 

1.1 面向对象编程介绍

 

面向过程编程

 

即POP（Process-oriented programming），面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

 

面向对象编程

 

即 OOP（Object Oriented Programming） 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。在面向对象程序开发思想中，每—个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

 

面向对象的特性： 封装性，继承性，多态性

 

两者的对比

 

面向过程：

 

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。

 

缺点：没有面向对象易维护、易复用、易扩展。

 

面向对象：

 

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护

 

缺点：性能比面向过程低。

 

1.2 ES6 中的类和对象

 

对象的介绍

 

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

 

对象是由属性和方法组成的：

 

属性：事物的 特征，在对象中用 属性 来表示（常用名词）

 

方法：事物的 行为，在对象中用 方法 来表示（常用动词）

 

类 class 的介绍

 

在 ES6 中新增加了类的概念，可以使用 class 关键字声明—个类，之后以这个类来实例化对象。

 

类 抽象了对象的公共部分，它泛指某一大类（class）

 

对象 特指某一个，通过类实例化一个具体的对象

 

面向对象的思维特点：

 

抽取(抽象)对象共用的属性和行为组织(封装)成—个类（模板）

 

对类进行实例化,获取类的对象

 

创建类和对象

 

class ClassName {

 

    // class body

 

}

 

// 创建实例：

 

let obj = new ClassName();

 

类的 constructor 构造函数

 

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

 

// 创建一个学生类

 

class Student {

 

  // 类的构造函数

 

    constructor(uname, age, major) {

 

        this.uname = uname;

 

        this.age = age;

 

        this.major = major;

 

    }

 

  // 类中添加方法

 

  // 直接在类中写方法名和括号即可

 

    sing() {

 

        console.log(this.uname + "会唱歌");

 

    }

 

}

 

// 类的实例化——创建对象

 

let peter = new Student("Peter", 21, "CS");

 

console.log(peter.uname); // Peter

 

peter.sing(); // Peter会唱歌

 

注意：

 

通过 class 关键字创建类, 类名我们还是习惯性定义首字母大写

 

类里面有个 constructor 函数,可以接受传递过来的参数,同时返回实例对象

 

constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数，类也会自动生成这个函数

 

生成实例 new 不能省略

 

最后注意语法规范, 创建类：类名后面不要加小括号。生成实例：类名后面加小括号, 构造函数不需要加 function

 

static 静态成员

 

给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用

 

class Person {

 

    static eat() {

 

        console.log('eat');

 

    }

 

}

 

let  p = new Person();

 

Person.eat(); // eat

 

p.eat(); // 报错

 

配合 getter 和 setter

 

当属性拥有 get/set 特性时，属性就是访问器属性。代表着在访问属性或者写入属性值时，对返回值做附加的操作。而这个操作就是 getter/setter 函数。

 

getter ： 适用于某个需要动态计算的成员属性值的获取

 

setter 则是在修改某一属性时所给出的相关提示

 

class Test {

 

    constructor(log) {

 

        this.log = log;

 

    }

 

    get latest() {

 

        console.log('latest 被调用了');

 

        return this.log;

 

    }

 

    set latest(e) {

 

        console.log('latest 被修改了');

 

        this.log.push(e);

 

    }

 

}

 

let test = new Test(['a', 'b', 'c']);

 

// 每次 log 被修改都会给出提示

 

test.latest = 'd';

 

// 每次获取 log 的最后一个元素 latest，都能得到最新数据。

 

console.log(test.latest);

 

以上输出：

 

latest 被修改了

 

latest 被调用了

 

[ 'a', 'b', 'c', 'd' ]

 

类的继承

 

extends 关键字 子类继承父类

 

super 关键字 用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

 

类里面的 this 指向问题：constructor 里面的 this 指向实例对象, 方法里面的 this 指向这个方法的调用者

 

class Person {

 

    constructor (uname, age) {

 

        this.uname =uname;

 

        this.age = age;

 

    }

 

}

 

class Student extends Person {

 

    constructor (uname, age, major) {

 

        // super 将子类的参数传递给父类构造函数，减少代码量

 

        super(uname, age);

 

        // 子类可以有自己独有的属性

 

        this.major = major;

 

    }

 

}

 

let rick = new Student("Rick", 22, "数学");

 

super 调用父类普通函数

 

class Parent {

 

    sayHi() {

 

        return "Father: hello";

 

    }

 

}

 

class Child extends Parent {

 

    sayHi() {

 

        // super 调用父类普通函数  super.sayHi()

 

        console.log(super.sayHi());

 

    }

 

}

 

let man = new Child();

 

man.sayHi(); // Father: hello

 

面向对象案例

 

类的基本架构：

 

class Tab {

 

    constructor(id) {

 

        // 获取相关元素节点

 

        // 根据传入的id选择器构建主节点

 

        this.main = document.querySelector(id);

 

    }

 

    // 初始化，绑定各个事件

 

    init() {}

 

    // 更新节点，同步整个状态

 

    updateNode() {}

 

    // 1. 切换功能

 

    toggleTab() {}

 

    // 2. 添加功能

 

    addTab() {}

 

    // 3. 删除功能

 

    removeTab() {}

 

    // 4. 修改功能

 

    editTab() {}

 

}

 

注意的地方：

 

在 init() 中绑定事件时，不需要即时执行的话，则事件名后面不加括号。

 

若需要主节点，则声明一个 that 变量，在 constructor() 里面赋值 that = this。

 

insertAdjacentHTML() 方法：可以在指定元素的指定位置添加一个节点字符串。（MDN insertAdjacentHTML）

 

appendChild 不支持追加字符串的子元素，insertAdjacentHTML 支持追加字符串的元素

 

node 是某一个节点，在其上绑定节点的时候需要提前判断该节点存在再绑定事件，可使用 node && node.click()。

 

自动执行某事件而不需要手动触发，使用 node.click()、node.blur() 等等。

 

双击事件：ondblick。

 

双击禁止选中文字：

 

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

 

1

 

双击禁止选中文字（CSS做法）：user-select: none;

 

2 构造函数与原型

 

2.1 构造函数和原型

 

概述

 

在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。

 

ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

 

在 ES6 之前 ，对象不是基于类创建的，而是用一种称为 构建函数 的特殊函数来定义对象和它们的特征。

 

构造函数

 

在 JS 中，使用构造函数时要注意以下两点：

 

构造函数用于创建某一类对象，其首字母要大写

 

构造函数要和 new 一起使用才有意义

 

new 在执行时会做四件事情：

 

在内存中创建一个新的空对象。

 

让 this 指向这个新的对象。

 

执行构造函数里面的代码，给这个新对象添加属性和方法。

 

返回这个新对象（所以构造函数里面不需要 return）。

 

静态成员和实例成员

 

JS的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。

 

通过这两种方式添加的成员，就分别称为 静态成员 和 实例成员。

 

静态成员：在构造函数本上添加的成员称为 静态成员，只能由构造函数本身来访问

 

实例成员：在构造函数内部创建的对象成员称为 实例成员，只能由实例化的对象来访问

 

function Human(uname, age) {

 

    this.uname = uname;  //实例成员

 

    this.age = age;  //实例成员

 

}

 

Human.x = 10; // 静态成员

 

let rick = new Human("rick", 35);

 

// console.log(rick.x); // 实例化的对象不能调用静态成员

 

console.log(Human.x); // 静态成员只能由构造函数本身来访问