JavaScript高级之面向对象和类的继承

其他 2020-07-26 10:11:25 阅读次数: 0

1. 面向对象编程介绍

1.1 两大编程思想

  • 面向过程
  • 面向对象

1.2 面向过程编程 POP（Process-oriented programming）

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

举个栗子：将大象装进冰箱，面向过程做法。

在这里插入图片描述
面向过程，就是按照我们分析好的步骤，按照步骤解决问题。

1.3 面向对象编程 OOP（Object Oriented Programming）

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

举个例子：将大象装进冰箱，面向对象的做法。

先找出对象，并写出这些对象的功能：

  1. 大象对象
  • 进去
  1. 冰箱对象
  • 打开
  • 关闭
  1. 使用大象和冰箱的功能

面向对象是以对象的功能来划分问题，而不是步骤。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特征：

  • 封装性
  • 继承性
  • 多态性

1.4 面向过程和面向对象的对比

面向过程

  • 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，比如单片机就采用的面向过程编程
  • 缺点：没有面向对象易维护、易复用、易扩展

面向对象

  • 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特征，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
  • 缺点：性能比面向过程低

2. ES6中的类和对象

面向对象
面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物。但是事物分为具体的事物和抽象的事物。
在这里插入图片描述
面向对象的思维特点：

  1. 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)
  2. 对类进行实例化，获取类的对象

面向对象编程我们考虑的是有哪些对象，按照面向对象的思维持点不断的创建对象，使用对象指挥对象做事情。

2.1 对象

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，—个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

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

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

  • 属性：事物的特征，在对象中用属性来表示(常用名词)
  • 方法：事物的行为，在对象中用方法来表示(常用动词)

2.2 类class

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

  • 类抽象了对象的公共部分，它泛指某一大类(class)
  • 对象特指某一个，通过类实例化一个具体的对象

面向对象的思维特点：

  1. 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）
  2. 对类进行实例化，获取类的对象

2.3 创建类

语法：

class Name {
	// class body
}

创建实例：

var xx = new Name();

注意：类必须使用new实例化对象

2.4 类 constructor 构造函数

constructor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例，自动调用该方法。如果没有显示定义类，内部会自动给我们建一个 constructor()

// 1. 创建类 class 创建一个明星类
class Star {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}

// 2. 利用类创建对象 new
var ldh = new Star('刘德华',18);
console.log(ldh.uname); // 刘德华
console.log(ldh.age); // 18

总结：

  1. 通过class关键字创建类，类名我们还是习惯性定义首字母大写
  2. 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象
  3. constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
  4. 生成实例new不能省略
  5. 最后注意语法规范，创建类时类名后面不要加小括号，生成实例时类名后面加小括号，构造函数不需要加function

2.5 类添加方法

语法：

class Person {
	constructor(name, age) {
    	this.name = name;
    	this.age = age;
	}
	say() {
    	console.log(this.name + "你好");
  	}
}

注意：

  1. 我们类里面所有的函数不需要写function
  2. 多个函数方法之间不需要添加逗号分隔

2.6 三个注意点

  1. 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
  2. 类里面的共有的属性和方法一定要加this使用
  3. 类里面的this指向问题：constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
var that;
var _that;
class Star {
  constructor(uname, age){
    // constructor 里面的this指向的是 创建的实例对象
    that = this
    console.log(this) // Star

    this.uname = uname
    this.age = age
    // this.sing() // 在构造函数中使用定义好的方法，对象一new出来就直接执行该方法
    this.btn = document.querySelector('button')
    this.btn.onclick = this.sing // 按钮点击，执行方法
  }
  sing(){
    // 这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
    console.log(this) // <button>点击</button>

    console.log(that.uname) // that 里面存储的是constructor里面的this
  }
  dance(){
    // 这个dance里面的this指向的是实例对象ldh，因为ldh调用了这个函数 
    _that = this
    console.log(this) // Star
  }
}

var ldh = new Star('刘德华', 18)
console.log(that == ldh); // true
ldh.dance()
console.log(_that == ldh); // true

3. 类的继承

3.1 继承

现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。

语法：

class Father {
    constructor() {}
    money() {
        console.log(100);
    }
}
// 继承
class Son extends Father {

}

var son = new Son()
son.money()

3.2 super关键字

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

  • 1.调用父类的构造函数：
class Father {
    constructor(x,y) {
      this.x = x
      this.y = y
    }
    sum() {
        console.log(this.x + this.y);
    }
}

class Son extends Father {
    constructor(x,y,z){
      super(x,y) // 调用了父类中的构造函数,super可以理解为Father(父类)的实例对象
      this.z = z
    }
    out_ans(){
      console.log(this.z);
    }
}

var son = new Son(1, 2, 4)
son.sum() // 3 
son.out_ans() // 4

Son中的constructor传递Son的参数，super表示调用父类的构造函数，也就是说，将参数同样传递给Father，再执行继承过来父类的sum方法。

  • 2.调用父类的普通函数
    • 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法
    • 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
class Father {
  say() {
    return "我是爸爸";
  }
}

class Son extends Father {
  say() {
    console.log(super.say() + '的儿子');
  }
}

var son = new Son();
son.say();

总结：继承中的属性或者方法查找原则：就近原则

  • 3.子类继承父类方法同时扩展自己的方法
// 父类有加法方法
class Father {
    constructor(x,y){
      this.x = x
      this.y = y
    }
    sum(){
      console.log(this.x + this.y);
    }
}
// 子类继承父类的加法方法，同时扩展减法方法
class Son extends Father {
  constructor(x,y){
  	// 利用super调用父类的构造函数
  	// super 必须在子类this之前调用
    super(x,y)
    this.x = x
    this.y = y
  }
  substract(){
    console.log(this.x - this.y);
  }
}

var son = new Son(5,3)
son.sum() //8
son.substract() //2

注：super 必须在子类this之前调用

参考资料

参考pink老师B站视频：https://www.bilibili.com/video/BV1X7411n72U?p=1

猜你喜欢

转载自blog.csdn.net/xiecheng1995/article/details/106630566
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022