JavaScript 面向对象

面向对象的两大编程思想

面向过程

面向过程很好理解，就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了

面向对象

上大学时老师教过我们，万物皆对象。面向对象就是把事务分解成为一个个对象，然后由对象之间分工与合作。

举个例子

一个人盖个狗窝，直接弄泥，砖头，修饰一下就成了

但是盖高楼的话，需要打地基，需要运输材料，需要财务结算等，此时不需要等，各做各的，效率才高

面向对象三大特性

就拿拖拉机来说

• 封装性【已经把耕地功能准备好，负责开就行】

• 继承性【继承与拖拉机，会开拖拉机就会弄这个，继承自拖拉机】

• 多态性【可以装配不同的机械，除了耕地还可以拉货】

面向过程和面向对象的优缺点

面向过程

• 优点：性能比面向对象高，步骤练习紧密

• 缺点：不好维护，不易多次使用及扩展

面向对象

• 优点：易维护，可复用，可扩展，灵活性高

• 缺点性能没有面向过程高

ES6 中的类和对象

类 class

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

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

ES：ECMAscript

类是在 ES6 中新加进入的，学会区分类和对象的概念

类：泛指一类

对象：类中的具体的某个实例，【属性和方法的集合体】

类：抽象

类模拟抽象的，泛指的，对象是具体的

面向对象模拟现实世界，更贴近实际生活，生活照分为抽象事物和具体事物

比如：手机【两层含义：具体某个手机，和笼统的概念手机】

1. 抽取，把对象的属性和行为封装成一个类

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

例如：人有身高，体重等，但是具体的某个人也有这个属性 练习了解类和对象

一个对象可以继承多个类，而类就是一个泛指

对象：具体

对象：类中的具体的某个实例【属性和方法的集合体】

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是对象

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

var n = 3;var arr = [1,2,3];function fn () {}var str= 'abcd';<img src='a.jpg'>复制代码

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

属性：对象有什么【访问】【语法：对象.属性】

方法：对象做什么【执行】【语法：对象.方法()】

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

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

面向对象的思维特点

1. 抽取（抽象）对象共用的属性和方法组织(封装)成一个类(模板)

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

3. 类里面的属性和方法，其实是把对象的公共属性和公共方法放到了一起

创建类

语法：class 类名 {属性和方法}【构造函数语法糖】

注意类名首字母大写

类要抽取公共属性方法，定义一个类

class Star {
};
var ldh = new Star();复制代码

类就是构造函数的语法糖

constructor 构造函数

语法

class Star {    constructor (uname,age) {        this.uname = uname;        this.age = age;    }}复制代码

属性：放到 constructor，构造函数里面

注意：类里面的方法不带 function，直接写既可

类里面要有属性方法，属性方法要是想放到类里面，我们用 constructor 构造器

构造函数作用：接收参数，返回实例对象，new 的时候主动执行，主要放一些公共的属性

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。

注意：每个类里面一定有构造函数，如果没有显示定义, 类内部会自动给我们创建一个 constructor() ，

注意：this 代表当前实力化对象，谁 new 就代表谁

类添加方法

语法：注意方法和方法之间不能加逗号

class Star {    constructor () {}    sing () {}    tiao () {}}复制代码

class 类名 { constructor(){} 方法名(){} }

注意：类中定义属性，调用方法都得用 this

注意：方法之间不能加逗号分隔，同时方法不需要添加 function 关键字

总结：类有对象的公共属性和方法，用 class 创建，class 里面包含 constructor 和方法，我们把公共属性放到 constructor 里面，把公共方法直接往后写既可，但是注意不要加逗号

类的继承

extends 关键字

语法：

class Father {}class Son extends Father{}复制代码

注意：是子类继承父类

super 关键字

我们应用的过程中会遇到父类子类都有的属性，此时，没必要再写一次，可以直接调用父类的方法就可以了

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

当子类没有 constructor 的时候可以随意用父类的，但是如果子类也含有的话，constructor 会返回实例，this 的指向不同，不可以再直接使用父类的东西

调用父类构造函数

class F {    constructor(name, age){    }}
class S extends F {    constructor (name, age) {        super(name,age);    }}复制代码

注意: 子类在构造函数中使用 super, 必须放到 this 前面(必须先调用父类的构造方法,在使用子类构造方法

调用父类普通函数

class F {    constructor(name, age) {
    }        say () {        }}
class S extends F {    constructor (name, age) {        super(name,age);    }        say () {        super.say()    }}复制代码

注意：如果子类也有相同的方法，优先指向子类，就近原则

总结：super 调用父类的属性和方法，那么查找属性和方法的原则就近原则

如果子类不写东西，那么直接继承父类就可以用

但是如果子类有自己的构造函数和父类同名的方法，此时不可以直接用父类的东西，需要用 super 调用父类的方法和构造函数

三个注意点

• 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.

• 类里面的共有属性和方法一定要加 this 使用

• 类里面的 this 指向问题

• constructor 里面的 this 指向实例对象, 方法里面的 this 指向这个方法的调用者

例子

class Button {    constructor () {        var btn = document.querySelector('input');        btn.onclick = this.cli;    }
    cli () {        console.log('点击了');    }}
var anniu = new Button();复制代码

类里面的 this 指向

构造函数的 this 指向实例对象

普通函数的 this 是调用者，谁调用 this 是谁

例子

<input type="button" value="点击">var that;class F {    constructor (name, age) {        this.name = name;        this.age = age;        // console.log(this);        that = this;            this.btn = document.querySelector('input');        this.btn.onclick = this.cli;    }    cli () {        console.log(this);    }
    say () {        console.log(this);    }}
var obj = new F('张学友',22);

最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163 相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 ！

完整源码下载地址：https://market.cloud.tencent.com/products/33396

PHP 学习手册：https://doc.crmeb.com

技术交流论坛：https://q.crmeb.com