乐趣区

关于oop:面向对象编程你真正懂吗

jiezi

JavaScript 面向对象
面向对象的两大编程思维
面向过程

面向过程很好了解，就是剖析出解决问题所须要的步骤，而后用函数把这些步骤一步一步实现，应用的时候再一个一个的顺次调用就能够了

面向对象

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

举个例子

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

然而盖高楼的话，须要打地基，须要运输资料，须要财务结算等，此时不须要等，各做各的，效率才高

面向对象三大个性
就拿拖拉机来说

封装性【曾经把耕地性能筹备好，负责开就行】
继承性【继承与拖拉机，会开拖拉机就会弄这个，继承自拖拉机】
多态性【能够拆卸不同的机械，除了耕地还能够拉货】
面向过程和面向对象的优缺点
面向过程

长处：性能比面向对象高，步骤练习严密
毛病：不好保护，不易屡次应用及扩大
面向对象

长处：易保护，可复用，可扩大，灵活性高
毛病性能没有面向过程高
ES6 中的类和对象
类 class
在 ES6 中新减少了类的概念，能够应用 class 关键字申明一个类，之后以这个类来实例化对象。【构造函数实例化对象】

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

ES：ECMAscript

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

类：泛指一类

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

类：形象

类模仿形象的，泛指的，对象是具体的

面向对象模仿事实世界，更贴近理论生存，生活照分为形象事物和具体事物

比方：手机【两层含意：具体某个手机，和抽象的概念手机】

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

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

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


一个对象能够继承多个类，而类就是一个泛指

对象：具体

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

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

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

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

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

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

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

属性：事物的特色，在对象中用属性来示意（罕用名词）

办法：事物的行为，在对象中用办法来示意（罕用动词）

面向对象的思维特点

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

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

类外面的属性和办法，其实是把对象的公共属性和公共办法放到了一起

创立类
语法：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….

PHP 学习手册：https://doc.crmeb.com
技术交换论坛：https://q.crmeb.com

退出移动版