面向对象编程，你真正懂吗？

Javascript 面向对象
面向对象的两大编程思想
面向过程

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

面向对象

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

举个例子

一个人盖个狗窝&＃xff0c;直接弄泥&＃xff0c;砖头&＃xff0c;修饰一下就成了

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

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

封装性【已经把耕地功能准备好&＃xff0c;负责开就行】
继承性【继承与拖拉机&＃xff0c;会开拖拉机就会弄这个&＃xff0c;继承自拖拉机】
多态性【可以装配不同的机械&＃xff0c;除了耕地还可以拉货】
面向过程和面向对象的优缺点
面向过程

优点&＃xff1a;性能比面向对象高&＃xff0c;步骤练习紧密
缺点&＃xff1a;不好维护&＃xff0c;不易多次使用及扩展
面向对象

优点&＃xff1a;易维护&＃xff0c;可复用&＃xff0c;可扩展&＃xff0c;灵活性高
缺点性能没有面向过程高
ES6中的类和对象
类class
在ES6中新增加了类的概念&＃xff0c;可以使用class关键字声明一个类&＃xff0c;之后以这个类来实例化对象。【构造函数实例化对象】

类抽象了对象的公共部分&＃xff0c;它泛指某一大类&＃xff08;class&＃xff09; ES5&＃xff1a;没有类&＃xff0c;ES6&＃xff1a;类

ES&＃xff1a;ECMAscript

类是在ES6中新加进入的&＃xff0c;学会区分类和对象的概念

类&＃xff1a;泛指一类

对象&＃xff1a;类中的具体的某个实例&＃xff0c;【属性和方法的集合体】

类&＃xff1a;抽象

类模拟抽象的&＃xff0c;泛指的&＃xff0c;对象是具体的

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

比如&＃xff1a;手机【两层含义&＃xff1a;具体某个手机&＃xff0c;和笼统的概念手机】

抽取&＃xff0c;把对象的属性和行为封装成一个类

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

例如&＃xff1a;人有身高&＃xff0c;体重等&＃xff0c;但是具体的某个人也有这个属性 练习了解类和对象

一个对象可以继承多个类&＃xff0c;而类就是一个泛指

对象&＃xff1a;具体

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

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

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

var n &＃61; 3;
var arr &＃61; [1,2,3];
function fn () {}
var str&＃61; &＃39;abcd&＃39;;
&＃39;a.jpg&＃39;>



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

属性&＃xff1a;对象有什么【访问】【语法&＃xff1a;对象.属性】

方法&＃xff1a;对象做什么【执行】【语法&＃xff1a;对象.方法()】

属性&＃xff1a;事物的特征&＃xff0c;在对象中用属性来表示&＃xff08;常用名词&＃xff09;

方法&＃xff1a;事物的行为&＃xff0c;在对象中用方法来表示&＃xff08;常用动词&＃xff09;

面向对象的思维特点

抽取&＃xff08;抽象&＃xff09;对象共用的属性和方法组织(封装)成一个类(模板)

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

类里面的属性和方法&＃xff0c;其实是把对象的公共属性和公共方法放到了一起

创建类
语法&＃xff1a;class 类名 {属性和方法}【构造函数语法糖】

注意类名首字母大写

类要抽取公共属性方法&＃xff0c;定义一个类

class Star {};var ldh &＃61; new Star();



类就是构造函数的语法糖

constructor 构造函数
语法

class Star {constructor (uname,age) {this.uname &＃61; uname;this.age &＃61; age;}
}



属性&＃xff1a;放到constructor&＃xff0c;构造函数里面

注意&＃xff1a;类里面的方法不带function&＃xff0c;直接写既可

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

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

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

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

注意&＃xff1a;this代表当前实力化对象&＃xff0c;谁new就代表谁

类添加方法
语法&＃xff1a;注意方法和方法之间不能加逗号

class Star {constructor () {}sing () {}tiao () {}
}



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

注意&＃xff1a;类中定义属性&＃xff0c;调用方法都得用this

注意&＃xff1a;方法之间不能加逗号分隔&＃xff0c;同时方法不需要添加function 关键字

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

类的继承
extends 关键字
语法&＃xff1a;

class Father {}
class Son extends Father{}



注意&＃xff1a;是子类继承父类

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

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

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

调用父类构造函数

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()}
}



注意&＃xff1a;如果子类也有相同的方法&＃xff0c;优先指向子类&＃xff0c;就近原则

总结&＃xff1a;super调用父类的属性和方法&＃xff0c;那么查找属性和方法的原则就近原则

如果子类不写东西&＃xff0c;那么直接继承父类就可以用

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

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

class Button {constructor () {var btn &＃61; document.querySelector(&＃39;input&＃39;);btn.onclick &＃61; this.cli;}cli () {console.log(&＃39;点击了&＃39;);}
}var anniu &＃61; new Button();



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

普通函数的this是调用者&＃xff0c;谁调用this是谁

例子

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


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

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

完整源码下载地址&＃xff1a;https://market.cloud.tencent.com/products/33396

PHP学习手册&＃xff1a;https://doc.crmeb.com
技术交流论坛&＃xff1a;https://q.crmeb.com