美文网首页
【融职培训】Web前端学习 第3章 JavaScript基础教程

【融职培训】Web前端学习 第3章 JavaScript基础教程

作者: lmonkey_01 | 来源:发表于2020-06-17 14:43 被阅读0次

    一、面相对象概述

    首先面向对象是一种编程思想,是一种通过多个对象互相协作完成处理流程的编程思路【是对现实世界中一类事物的抽象,在编程中可以理解为是一种建立现实世界事物的模型】

    推及到广义上,面向对象已经越了程序设计和软件开发,我认为面向对象又是一种思维方式,不局限于编程语言,甚至不局限编程本身,它把复杂的需求、业务逻辑抽丝剥茧、逐个分析。

    主要分为:类的声明定义、对象的创建使用、面向对象拥有的特征【三大特征:封装、继承、多态】

    封装:体现了对象对于敏感数据的保护特征

    继承:体现了代码的复用和功能的扩展

    多态:体现了不同操作环境中代码的多样性【程序的健壮性】

    思路:大量的程序开发—软件的开发—解决问题—处理数据—CRUD【增删改查】

    二、基于原型的面向对象

    在ES2015版本之前,JavaScript是没有类的概念的,我们可以使用构造函数来模拟一个类,这在我们之前的课程中已经讲解过了,这里我们简单复习一下。

    创建一个猫的构造函数

    1function Cat(name,age){2this.name = name;3this.age = age;4}56varcat =newCat("miaomiao",2);7console.log(cat.name);

    在上面的代码中,我们定义了一个构造函数Cat,通过var关键字创建了一个变量cat,cat有两个属性,name和age。我们可以直接输出cat.name;

    我们可以通过原型属性为构造函数添加方法,例如我们给这个Cat添加一个shout方法,让这只猫可以叫

    代码如下所示:

    1function Cat(name, age) { 2this.name = name; 3this.age = age; 4} 5 6Cat.prototype.shout =function(){ 7console.log("喵喵喵!") 8} 910varcat =newCat("miaomiao", 2);11cat.shout();

    这样猫就有了shout方法,可以调用shout方法让猫叫。

    通过上面的代码,我们可以模拟一个类的概念,但是这样的写法与真正面相对象语言的写法相比,确实更难以理解。所以ES2015中增加了类的概念。

    三、ES2015中的面向对象

    基于原型的继承方式,虽然实现了代码复用,但是行文松散且不够流畅,可阅读性差,不利于实现扩展和对源代码进行有效的组织管理。不得不承认,基于类的继承方式在语言实现上更健壮,且在构建可服用代码和组织架构程序方面具有明显的优势。所以,ES2015+中提供了基于类class的语法。但class本质上是ES2015+提供的一颗语法糖,正如我们前面提到的,JavaScript是一门基于原型的面向对象语言。

    我们可以用class来定义一个类,然后可以在这个类中定义构造函数,方法和属性。

    代码如下所示:

    1class Cat{ 2    constructor(name,age){ 3this.name = name; 4this.age = age; 5    } 6 7    shout(){ 8console.log("喵喵喵"); 9    }10}1112let cat =newCat("miaomiao",2);13cat.shout();

    上面的这段代码与第二个案例的代码功能是完全一样的,但是通过class关键之定义一个猫的类,让这个类更像是一个整体,而非一个个零散的prototype组合起来的一个功能。

    继承

    课后练习

    按要求实现功能:

    拓展Date对象实现如下功能:实现dateFomate方法,返回值是 “xxxx年xx月xx日”。

    定义一个Person类,让Student类和Teacher类继承Person,为Person类添加getlnfotmation方法,是student类和Teacher类都可以通过此方法获取个人信息

    【融职教育】在工作中学习,在学习中工作

    相关文章

      网友评论

          本文标题:【融职培训】Web前端学习 第3章 JavaScript基础教程

          本文链接:https://www.haomeiwen.com/subject/jwksxktx.html