专栏首页h5学习笔记ES6中的对象与类

ES6中的对象与类

面向对象

面向对象更贴近我们的实际生活,可以使用面向对象描述现实世界事物,但是事物分为具体的事物和抽象的事物

手机 抽象的(泛指的) 荣耀p30 具体的(特指的)

面向对象的思维特点:

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

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

1、对象

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

一个数据库、一张网页、 一个与远程服务器的连接也可以是“对象"。

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

对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物

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

1.1创建对象

//以下代码是对对象的复习
//字面量创建对象
var ldh = {
    name: '刘德华',
    age: 18
}
console.log(ldh);
​
//构造函数创建对象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('刘德华', 18)//实例化对象
console.log(ldh);

如上两行代码运行结果为:

2.类

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

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

对象特指某一个,通过类实例化一个具体的对象

2.1创建类

  1. 语法:
//步骤1 使用class关键字
class name {
  // class body
}     
//步骤2使用定义的类创建实例  注意new关键字
var xx = new name();     

类constructor构造函数

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

如果没有显示定义类,内部会自动给我们创建一个constructor()

  1. 示例
 // 1. 创建类 class  创建一个 明星类
 class Star {
   // 类的共有属性放到 constructor 里面
   constructor(name, age) {
    this.name = name;
    this.age = age;
   }
 }
   // 2. 利用类创建对象 new
   var ldh = new Star('刘德华', 18);
   console.log(ldh);

以上代码运行结果:

2.2类创建添加属性和方法

类添加方法

语法: class Person { constructor (name,age) { // constructor 构造器或者构造函数 this.name = name; this.age = age; } say() { console.1og (this.name + '你好'); }

 // 1. 创建类 class  创建一个类
class Star {
    // 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数
    constructor(uname, age) {
      this.uname = uname;
      this.age = age;
    }//------------------------------------------->注意,方法与方法之间不需要添加逗号
    sing(song) {
      console.log(this.uname + '唱' + song);
    }
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
console.log(ldh); // Star {uname: "刘德华", age: 18}
ldh.sing('冰雨'); // 刘德华唱冰雨

以上代码运行结果:

注意:

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

2.3类的继承

现实中的继承:子承父业,比如我们都继承了父亲的姓。

程序中的继承:子类可以继承父类的一些属性和方法。

  1. 语法

// 父类 class Father{ } // 子类继承父类 class Son extends Father { }

  1. 示例
class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('你的姓是' + this.surname);
       }
}
​
class Son extends Father{  // 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();      //结果为 你的姓是刘

super关键字

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

子类使用super关键字访问父类的方法

//定义了父类
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(x, y); //使用super调用了父类中的构造函数
        }
    }
    var son = new Son(1, 2);
    son.sum(); //结果为3

注意:

  1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
  2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
  3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用 // 父类有加法方法 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之前调用,放到this之后会报错   super(x, y);   this.x = x;   this.y = y; ​ }  subtract() {  console.log(this.x - this.y); } } var son = new Son(5, 3); son.subtract(); //2 son.sum();//8 以上代码运行结果为:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 继承

    ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承

    星辰_大海
  • CSS用户界面样式

    所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我...

    星辰_大海
  • JavaScript变量

    本质:变量是程序在内存中申请的一块用来存放数据的空间。类似酒店的房间,一个房间就可以看做是一个变量。

    星辰_大海
  • constructor属性解析

    JavaScript中constructor属性一直不是很清楚,今日终于弄清了其中缘由,下面举例说明。 首先是一个典型的JavaScript实例声明: func...

    寒月十八
  • 利用Citrix Receiver浏览器进行渗透

    Citrix Receiver 是一种轻便的通用软件客户端,并带有类似浏览器的可扩展“插件”架构。Receiver 标 配 有 多 种 可 选 插 件 , 可 ...

    贝塔安全实验室
  • zbar源码分析--技术关键点及优化策略

    前面一篇文章已经说过zbar中QR的解码流程,现在这里主要介绍一些技术关键点和专注优化策略上的建议:

    心跳包
  • [Gradle] Gradle 聚合模块配置

    此处主要为了过滤容器模块中的插件配置,容器模块的主要用来管理下属部分的模块,无需添加依赖和插件 spring-security-sso、common-depen...

    架构探险之道
  • 不要再认为Stream可读性不高了!

    距离Java 8发布已经过去了7、8年的时间,Java 14也刚刚发布。Java 8中关于函数式编程和新增的Stream流API至今饱受“争议”。

    用户1148394
  • Python|try/except捕捉SyntaxError

    大家在编写程序的时候,多多少少都会出现各种问题。有的时候会让你的程序根本无法运行起来,有的时候会让你的程序在运行过程中出毛病。如果是第一种情况,我们把这个问题叫...

    不可言诉的深渊
  • Pod容器应用"优雅发布" - 运维笔记

    K8S自身带有优雅终止Pod容器的机制,发送SIGTERM终止信号,在规定的terminationGracePeriodSeconds优雅时间内完成Pod优雅终...

    洗尽了浮华

扫码关注云+社区

领取腾讯云代金券