面向对象编程,你真正懂吗?

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

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

面向对象

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

举个例子

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

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

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

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

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

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

类抽象了对象的公共部分,它泛指某一大类(class) ES5:没有类,ES6:类

ES:ECMAscript

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

类:泛指一类

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

类:抽象

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

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

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

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

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

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

面向对象编程,你真正懂吗?_第1张图片
一个对象可以继承多个类,而类就是一个泛指

对象:具体

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

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

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

var n = 3;
var arr = [1,2,3];
function fn () {}
var str= 'abcd';

复制代码

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

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

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

属性:事物的特征,在对象中用属性来表示(常用名词)

方法:事物的行为,在对象中用方法来表示(常用动词)

面向对象的思维特点

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

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

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

创建类
语法: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是谁

例子


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

你可能感兴趣的:(oop)