面向对象编程介绍
面向对象编程介绍
1 面向对象编程 oop ( object Orinted programming)
面向对象是把事物分解成成一个个对象，然后由对象之间分工合作
例子：把大象放进冰箱，分三步 1 . 2 3
面向对象是以对象功能而划分问题，而不是步骤
（拖拉机上有扫把）
面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目.
面向对象的三个特征
- 封装
- 继承
- 多态
面向对象的思维方式
- 抽取（抽象）对象公用的属性和行为封装成一个类（模板）
- 对类进行实例化，获取类的对象
举例
例子：手机，就是抽象的（泛指的，不明确）
小米（苹果）手机，具体的(特指的)
小米和苹果都是手机，也有很多的相同点，比如重量，材料
我们可以抽取出这些相同点，封装成一个模板，然后需要制作出手机的时候，只需要使用这个模板就可以
面向对象编程，我们只需要考虑有哪些对象，按照面向对象的思维方式，不断的创造对象使用对象，指挥对象做事情
2 类和对象
对象
现实生活中，万物皆对象，对象是一个具体的事物，所有看的见摸得着的都是对象，比如纸
在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，比如字符串
- 属性：事物的特征，在对象中用属性来表示
- 方法：事物的行为，在对象中用方法来表示
类 class
可以使用一个class关键字来声明一个类，用这个类来实例化对象
类抽象了对象的公共部分，他泛指一大类，
对象特指某一个，通过类实例化一个具体的对象
比如要做一个宝马车，图纸就是类，比较抽象，我们可以通过这个图纸，造出很多宝马车
类 constructor 构造函数
constructor（）方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例是，自动调用该方法，如果没有显示声明，类内部会自动创建一个constructor()
扫描二维码关注公众号，回复：
12789016 查看本文章
- 创建类
//创建一个类
class Star {
constructor (name){
this.name=name
}
}
//利用类创造对象 new
var star = new Star('没头发')
console.log(star.name);//没头发
//通过class 关键字创建类 类名要首字母大写
// 类里面有个constructor函数，可以接受传递进来的参数，同时返回实例对象
// constructor 函数，只要new生成实例，就会自动调用，就算不写，类也会自动生产
//创建类时，不加小括号，生成实例加 构造函数不需要加 function
- 类中添加共有方法
class Star {
constructor (name){
this.name=name
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
var star = new Star('没头发')star.sing('冰雨') // 没头发 唱的 冰雨
//类里所有的方法都不需要写function
//多个函数方法之间不加，
3 类的继承
类继承 extends和super关键字
现实生活中的继承子承父业
程序中的继承 子类继承父类的一些方法和属性
class Father {
constructor(x,y){
this.x=x
this.y=y
}
money(){
console.log(100);
}
sum(){
console.log(this.x+this.y);
}
}
class Sonextends Father{
constructor(x,y){
this.x=x
this.y=y
}
}
var son = new Son(1,2)
son.money() //100
son.sum() //Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// this指向问题 因为sum中的this指向的是父类不是子类
class Father {
constructor(x,y){
this.x=x
this.y=y
}
sum(){
console.log(this.x+this.y);
}
}
class Sonextends Father{
constructor(x,y){
super() //调用了父类的构造函数
}
}
var son = new Son(1,2)
son.sum() //3
super调用父类普通函数以及继承中属性查找的规则
当没有写extends时
class Father {
say(){
return '父类 '
}
}
class Son{
say(){
console.log('儿子');
//super.say() 就是调用父亲中的函数 say()
}
}
var son = new Son()
son.say()//儿子
当有extends时，就近原则
class Father {
say(){
return '父类 '
}
}
class Son extends Father{
say(){
console.log('儿子');
}
}
var son = new Son()
son.say() //儿子
- 继承中，如果子类要输出一个方法，先在子类中查找有没有这个方法，如果有就执行子类的方法
- 如果子类中没有，就在父类中查找，如果有，就执行父类中的方法（就近原则）
super的注意点
super必须放在子类中的this之前
4 使用类的两个注意点
- 在es6中，没有变量提升，所以必须先定义类，才能通过类实例化对象
var star = new Star('没头发')
class Star {
constructor (name){
this.name=name
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
//'Star' before initialization
``
- 在类中共有的属性和方法，一定要加this才能使用
```javascript
var star = new Star('没头发')
class Star {
constructor (name){
this.name=name
song() // sing is not defined
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
var star = new Star()
5 类里面的注意this指向问题
现在想实现点击页面中的按钮，然后调用父类中的方法
<button>点击</button>
this错误，输出undefined
class Star {
constructor(uname) {
this.uname = uname
this.btn=document.querySelector('button')
this.btn.onclick=this.sing
}
sing() {
//方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(this.uname); //undefined
}
}
var star = new Star('没头发')
改变this
vat _that;
class Star {
constructor(uname) {
_that=this
this.uname = uname
this.btn=document.querySelector('button')
this.btn.onclick=this.sing
}
sing() {
//方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(_that.uname); //没头发
}
}
var star = new Star('没头发')