ES6 类(Class)基本用法

最新推荐文章于 2024-05-05 04:40:07 发布
最新推荐文章于 2024-05-05 04:40:07 发布
阅读量3.4k 收藏 9
点赞数 3
分类专栏： ES6 文章标签： es6中class用法 class类的用法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36718999/article/details/97937689
版权

查看更多资源

1. 简介：

ES6引入了Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。基本上ES6的class可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法。

本案例通过实现一个自由落体运动的小球，来阐述ES6 类(Class)基本用法。鼠标点击画布，点击处生成随机颜色大小的小球，并做自由落体运动。

2. 图示：

3. 代码： 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas {
      box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>

<body>
  <!-- canvas 画布 -->
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const w = canvas.width = 600;
    const h = canvas.height = 400;

    class Ball { // 申明 Ball类
      constructor(x, y, r) { // 构造器 this指向 Ball类的实例对象
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = `rgb(${~~Ball.rpFn([55, 255])},${~~Ball.rpFn([55, 255])},${~~Ball.rpFn([55, 255])})`;
        return this;

      }
      render(ctx) { // Ball类原型撒上的方法，实例对象能继承 
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore();
        return this;
      }

      static rpFn(arr) { // Ball类的静态方法，实例对象不能继承 
        let max = Math.max(...arr);
        let min = Math.min(...arr);
        return Math.random() * (max - min) + min;

      }
    }

    // const ball1 = new Ball(100, 100, 30).render(ctx); // Ball的实例化对象继承render()来绘制小球 

    class ChildBall extends Ball { // 申明一个子类ChildBall 继承 父类Ball  
      constructor(x, y, r) {
        super(x, y, r); // 必须调用 super()，this指向ChildBall类的实例对象
        this.vy = ChildBall.rpFn([2, 4]);
        this.g = ChildBall.rpFn([0.2, 0.4]); // 子类ChildBall 继承 父类Ball的静态方法
        this.a = 0;
        return this;

      }
      move(ctx) { // ChildBall类原型上的方法，实例对象能继承
        this.y += this.vy;
        this.vy += this.g;
        let current = this.vy * -0.75;

        if (this.y + this.r >= ctx.canvas.height) {
          this.y = ctx.canvas.height - this.r;

          if (Math.abs(current - this.a) < 0.01) return false;

          this.a = this.vy *= -0.75;
        }

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        super.render(ctx);  // 子类ChildBall 调用父类Ball原型上的方法

        return true;

      }

    }
    // const ball1 = new ChildBall(100, 100, 30).render(ctx);  // ChildBall的实例化对象继承render()来绘制小球 

    let ball, timer;

    canvas.onclick = function (e) { // 鼠标点击 画布 绘制小球
      let x = e.offsetX, y = e.offsetY;
      let r = ~~Ball.rpFn([24, 55]);
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ball = new ChildBall(x, y, r).render(ctx);
      ballMove(); // 小球 自由落体运动
    }

    function ballMove() {
      timer = window.requestAnimationFrame(ballMove);
      if (!ball.move(ctx)) {
        window.cancelAnimationFrame(timer);
      }
    }

  </script>

</body>

</html>

 

 ES6---Class的基本语法:

https://www.imooc.com/article/20596?block_id=tuijian_wz 

ES6---Class的继承

http://www.imooc.com/article/20618

 

 

Mr.XiaoYang
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中class类用法实例浅析
08-30
下面我们将深入探讨`class`类的用法、特点以及相关实例。 首先，`class`关键字用于定义一个类。例如，创建一个名为`Person`的类： ```javascript class Person { constructor(name, age, job) { this.name = ...
es6新特性之 class 基本用法解析
08-27
"ES6 新特性之 Class 基本用法解析" ES6 中引入的 Class 语法是 JavaScript 中的一种新的编程方式，提供了更接近传统语言的写法，引入了类（Class）这个概念，作为对象的模板。下面是 ES6 中 Class 的基本用法解析...
ES之Class
bubbleJessica的博客
01-09 348
ES之Class
Php—— 1.apache2.4.x+php7.x
blueicex2017的博客
02-26 2044
一、httpd安装 1.准备安装 1.1 安装开发包 [root@master soft]# yum install -y gcc gcc-c++ expat-devel zlib-devel openssl-devel 1.2 install apr [root@master soft]# wget http://mirror.bit.edu.cn/apache//apr/apr-1.7.0....
ES6入门—ES6 对象与类的定义
最新发布
2401_84091321的博客
05-05 358
ES6 引入了 class 类的概念，每一个 class 类只有一个 constructor() 方法，用于创建和初始化对象。ES6 新增了模板字符串，可以将表达式嵌入字符串中进行拼接，也可以实现多行字符串或者字符串一行行拼接。super 可以用在类的继承中，在子类的构造方法中需要使用 super 关键字调用父类的 constructor()。我们可以使用 assign（）将多个对象进行合并，也可以使用扩展的方式将对象合并。ES6 中的 Class 表达式使得可以使用表达式来声明一个类或者一个对象。
（10）es6——面向对象Class
浪头的博客
04-21 1303
什么是面向过程编程? 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步的实现，作为前端人员来说对于这种方式应该已经不陌生了。 使用的时候再一个个的依次调用就可以了。 比如：打开冰箱门-->大象装进去-->关上冰箱门。 总结：面向过程就是按照我们分析好了的步骤，按照步骤解决问题。 // 声明3个回调函数，三个回调函数分别对应程序的三个过程 const open_the_door = function() { console.log("开门"); }; const
es6入门5--class类的基本用法
weixin_30337251的博客
05-14 185
在ES6之前，准确来说JavaScript语言并无类的概念，却有模拟类的做法。相比在类似java这类传统面向对象语言中通过类来生成实例，js则通过构造函数模拟类来生成实例。 这是因为在JS设计初期，作者Brendan Eich选择使用原型来描述对象而非类，但被管理层要求模仿java，因此引入了new this等语言特性，也就是我们所使用的构造函数做法。 那么自ES6起，JavaScript...
Class 的基本语法
Geordies的博客
02-09 693
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
原生JavaScript之es6中Class的用法分析
10-15
对比这两段代码，我们可以发现，ES6的Class语法更加简洁，构造函数和方法的定义更加直观。但是，实际上，ES6的Class并没有引入新的运行机制，它只是ES5构造函数和原型链的一种语法糖。这意味着，无论使用哪种方式，...
ES6中Class类的静态方法实例小结
08-29
ES6中Class类的静态方法是指在类定义中使用static关键字修饰的方法，这些方法不会被实例继承，而是直接通过类来调用。静态方法的使用可以使得代码更加简洁和易于维护。 在ES6中，类相当于实例的原型，所有在类中...
ES6新特性 类（class）详解
明天也要努力的博客
02-10 1046
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！ 1. class类与构造函数对比 1.1 构造函数实现 如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。 // 函数名和实例化构造名相同且大写（非强制，但这么写有助...
es6中class类的全方面理解(一)
weixin_43936341的博客
10-19 376
https://www.jianshu.com/p/86267fab4878`
React.js中常用的ES6写法总结
浩时代的博客
08-18 2万+
一 模块1 引入模块以便使用用import实现：import '模块文件地址' import 组件 from '模块文件地址'2 导出模块用export default实现：export default class MyComponent extends Component{ ... }引用：import MyComponent from './MyComponent';二 组件1 定义组件
vue render中使用 class
风一样的少年
04-13 5024
故事开始：初代代码如下： // template { title: "操作", align: "center", render: (h:any, params:any) => { return h('div',[ h( 'span',{ class:{
ES6中的类的使用
小白在线学前端的博客
09-29 558
ES6中的类和对象 对象：在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等 对象是由属性和方法组成的： 属性：事物的特征，在对象中用属性来表示(手机的颜色，存储) 方法：事物的行为，在对象中用方法来表示(手机可以干什么，比如打游戏) 类 class 在ES6中新增了类的概念，可以使用**class**关键字声明一个类，之后以这个类来实例化对象 类抽象了对象中的公共部分，它泛指某一大类(class) 对象特指的是某一个，通过类实例.
es6对象class内的自我调用
热门推荐
slongzhang的博客
12-07 9万+
class对象里的自我调用 class A1{ constructor(num){ this.num = num; this.execSettimes(); } execSettimes(param){ let num = this.num--; console.log({num,param}); if(this.num>0){ setTimeout(this.execSe
es6规范的class使用方法
不想内卷的博客
08-12 335
对于科班出身的程序员来说，class是啥玩意就不必哆嗦了，直接讲吧 在之前规范的写法是这样子的 //es5的常规用法 //手机 function phone(brand,price){ this.brand=brand; this.price=price; } //添加方法 //prototype是函数对象上面预设的对象属性 phone.prototype.call=function(){ console.lo
ES6中class的使用+继承
汉堡请不要欺负面条
04-27 6419
一.Class 介绍+基本语法(1).介绍通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。(2).Class 的基本语法//definedClasses.js //定义类 class Person{ // 构造 constru...
javascript es6定义类和类的使用方法
hsg77的专栏
04-01 2959
es6定义类和类的使用方法 javascript类的使用 注意：//export {cwgisMapPanCmd}; 这个导出方法在同一个工程中使用就不能导出操作 //------------------------------------- cmToolBar = new cwgisToolBarClass(); // //import {cwgisMapFullE...
es6 class类使用
04-10
ES6引入了class关键字，使得JavaScript可以更方便地使用面向对象编程。下面是ES6 class类的使用介绍： 1. 定义类： 使用class关键字定义一个类，类名通常首字母大写。类可以包含构造函数、方法和属性。 ```javascript class MyClass { constructor() { // 构造函数 } method() { // 方法 } property = value; // 属性 } ``` 2. 创建对象： 使用`new`关键字创建类的实例对象。 ```javascript const myObject = new MyClass(); ``` 3. 构造函数： 构造函数是一个特殊的方法，用于初始化对象的属性。在创建对象时自动调用。 ```javascript class MyClass { constructor(name) { this.name = name; } } const myObject = new MyClass("Alice"); console.log(myObject.name); // 输出 "Alice" ``` 4. 方法： 类中的方法定义在类的原型上，可以通过实例对象调用。 ```javascript class MyClass { method() { console.log("Hello"); } } const myObject = new MyClass(); myObject.method(); // 输出 "Hello" ``` 5. 继承： 使用`extends`关键字实现类的继承。子类可以继承父类的属性和方法，并可以添加自己的属性和方法。 ```javascript class ChildClass extends ParentClass { constructor() { super(); // 调用父类的构造函数 } childMethod() { // 子类的方法 } } ``` 6. 静态方法： 使用`static`关键字定义静态方法，静态方法属于类本身而不是实例对象。 ```javascript class MyClass { static staticMethod() { console.log("Static method"); } } MyClass.staticMethod(); // 输出 "Static method" ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值