ES之Class

最新推荐文章于 2024-04-12 07:23:50 发布
最新推荐文章于 2024-04-12 07:23:50 发布
阅读量345 收藏
点赞数
分类专栏： ES 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/128617748
版权

类和构造函数区别

class Person{
      constructor(name,age) {
        this.name=name;
        this.age=age;
        // 这样子的speak方法就不是共享的
        //this.speak=()=>{};
      }
      speak(){
        console.log('speak');
      }
      //run(){}
    }
    console.log(typeof Person);//function
    // 本质上是下面的内容，但是我们平时上面写比较方便且直观
    console.log(Person.prototype.speak);
    Person.prototype.run=function (){};

    // function Person(name,age){
    //   this.name=name;
    //   this.age=age;
    //   // 这样子的speak方法就不是共享的
    //   //this.speak=()=>{};
    // }
    //
    // // 需要在其原型上添加方法才是共享的
    // Person.prototype.speak=function (){};

Class的两种定义形式

  • 声明形式
  • 表达式形式
// 1.声明形式
    // class Person{
    //   constructor() {}
    //   speak(){}
    // }

    // 2.表达式形式
    // 构造函数
    // function Person(){}
    // 我们可以把匿名函数赋值给一个变量/常量
    // const Person=function (){}

    // 类的表达式形式
    // 我们可以把匿名类赋值给一个变量/常量
    // const Person=class {
    //   constructor() {
    //     console.log('constructor');
    //   }
    //   speak(){}
    // };
    // new Person();
    // 定义即被调用立即执行
    (function (){
      console.log('func');
    })();
    new (class{
      constructor() {
        console.log('constructor');
      }
    })();

 

实例属性、静态方法和静态属性

// 实例方法和实例属性
    class Person{
      age=0;
      sex='male';
      getSex=function (){
        return this.sex;
      }
      // 实例对象的方法
      speak(){
        console.log('speak');
      }
      constructor(name,sex) {
        this.name=name;
        this.sex=sex;
      }
      // 静态方法
      static speak(){
        console.log('人类可以说话');
        console.log(this);
      }
      // 不要这么写，有兼容性问题
      // 静态属性
      // static version='1.0';

      // 通常这样写
      static getVersion(){
        return '1.0';
      }
    }
    // 静态方法
    // Person.speak=function (){
    //   console.log('人类可以说话');
    //   console.log(this);
    // }
    // 静态属性
    // Person.version='1.0';
    const p=new Person('Alex','female');
    console.log(p);
    p.speak();
    // 静态方法
    Person.speak();
    console.log(Person.getVersion());

私有属性和方法

// class Person{
    //   constructor(name) {
    //     this._name=name;
    //   }
    //   speak(){
    //     console.log('speak');
    //   }
    //   getName(){
    //     return this._name;
    //   }
    // }
    // const p=new Person('jessica');
    // console.log(p.getName());
    // p.speak();
    // // 模拟私有属性和方法
    // // 1._开头表示私有（约定）
    // console.log(p.getName());

    // 2.将私有属性和方法移出类
    (function () {
        let name = '';

        class Person {
            constructor(username) {
                name = username;
            }

            speak() {
                console.log('speak');
            }

            getName() {
                return name;
            }
        }

        window.Person = Person;
    })();
    (function () {
        const p = new Person('Alex');
        console.log(p.name);//undefined
        console.log(p.getName());//Alex
    })();

继承extends

class Person{
        constructor(name,sex) {
            this.name=name;
            this.sex=sex;
            this.say=function (){
                console.log('say');
            };
        }
        speak(){
            console.log('speak');
        }

        static speak(){
            console.log('static speak');
        }
    }
    Person.version='1.0';
    class Programmer extends Person{
        constructor(name,sex,feature) {
            super(name,sex);
            this.feature=feature;
        }
        // 同名覆盖
        speak() {
            console.log('Programmer speak');
        }

        static speak(){
            console.log('Programmer static speak');
        }
    }
    Programmer.version='2.0';
    const zs = new Programmer('zs', '男','秃头');
    console.log(zs.name);
    console.log(zs.sex);
    console.log(zs.feature);
    zs.say();
    zs.speak();
    Programmer.speak();
    console.log(Programmer.version);

super

  • 作为函数调用
  • 作为对象调用
  • 注意事项（必须显式注明是函数调用还是对象调用）
// super作为对象使用
    // 在构造方法或一般方法中使用
    // super代表父类的原型对象 Person.prototype
    // 所以定义在父类实例上的方法或属性，是无法通过super调用的
    // 通过super调用父类的方法时，方法内部的this指向当前的子类实例
    class Person{
        constructor(name) {
            this.name=name;
            console.log(this);
        }
        speak(){
            console.log('speak');
            console.log(this);
        }

    }
    class Programmer extends Person{
        constructor(name,feature) {
            super(name);
            this.feature=feature;
            console.log(super.name);
            super.speak();
        }
        speak(){
            super.speak();
            console.log('Programmer speak');
        }
    }

    new Person();
    new Programmer();

 

class Person{
        constructor(name) {
            this.name=name;
            //console.log(this);
        }
        speak(){
            console.log('speak');
            //console.log(this);
        }
        static speak(){
            console.log('Person speak');
            console.log(this);
        }
    }
    class Programmer extends Person{
        constructor(name,feature) {
            super(name);
            this.feature=feature;
            console.log(super.name);
            super.speak();
        }
        speak(){
            super.speak();
            console.log('Programmer speak');
        }

        // 静态方法中使用
        // 指向父类，而不是父类的原型对象
        // 通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例
        static speak(){
            super.speak();
            console.log('Programmer speak');
        }
    }

    Programmer.speak();

Class的应用

幻灯片的切换


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Class 的应用</title>
    <link rel="stylesheet" href="./slider.css" />
  </head>
  <body>
    <div class="slider-layout">
      <div class="slider">
        <div class="slider-content">
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/1.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/2.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/3.jpg" alt="1" class="slider-img"
            /></a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"
              ><img src="./imgs/4.jpg" alt="1" class="slider-img"
            /></a>
          </div>
        </div>
      </div>
    </div>

    <script src="./base.js"></script>
    <script>
      // console.log(BaseSlider);

      class Slider extends BaseSlider {
        constructor(el, options) {
          super(el, options);

          this._bindEvent();
        }

        _bindEvent() {
          document.addEventListener('keyup', ev => {
            // console.log(ev.keyCode);
            if (ev.keyCode === 37) {
              // ←
              this.prev();
            } else if (ev.keyCode === 39) {
              // →
              this.next();
            }
          });
        }
      }
      new Slider(document.querySelector('.slider'), {
        initialIndex: 1,
        animation: true,
        speed: 1000
      });
    </script>
  </body>
</html>

/* css reset */
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  vertical-align: top;
}

/* layout */
.slider-layout {
  width: 80%;
  height: 420px;
  margin: 0 auto;
}

/* slider */
.slider,
.slider-content,
.slider-item,
.slider-img {
  width: 100%;
  height: 100%;
}
.slider {
  overflow: hidden;
}
.slider-item {
  float: left;
}
.slider-animation {
  transition-property: transform;
  transition-duration: 0ms;
}
// 默认参数
const DEFAULTS = {
    // 初始索引
    initialIndex: 0,
    // 切换时是否有动画
    animation: true,
    // 切换速度，单位 ms
    speed: 300
};
// base
const ELEMENT_NODE = 1;
const SLIDER_ANIMATION_CLASSNAME = 'slider-animation';

class BaseSlider {
    constructor(el, options) {
        console.log(options)
        if (el.nodeType !== ELEMENT_NODE)
            throw new Error('实例化的时候，请传入 DOM 元素！');

        // 实际参数
        this.options = {
            ...DEFAULTS,
            ...options
        };

        const slider = el;
        const sliderContent = slider.querySelector('.slider-content');
        const sliderItems = sliderContent.querySelectorAll('.slider-item');

        // 添加到 this 上，为了在方法中使用
        this.slider = slider;
        this.sliderContent = sliderContent;
        this.sliderItems = sliderItems;

        this.minIndex = 0;
        this.maxIndex = sliderItems.length - 1;
        this.currIndex = this.getCorrectedIndex(this.options.initialIndex);

        // 每个 slider-item 的宽度（每次移动的距离）
        this.itemWidth = sliderItems[0].offsetWidth;

        this.init();
    }

    // 获取修正后的索引值
    // 随心所欲，不逾矩
    getCorrectedIndex(index) {
        if (index < this.minIndex) return this.maxIndex;
        if (index > this.maxIndex) return this.minIndex;
        return index;
    }

    // 初始化
    init() {
        // 为每个 slider-item 设置宽度
        this.setItemsWidth();

        // 为 slider-content 设置宽度
        this.setContentWidth();

        // 切换到初始索引 initialIndex
        this.move(this.getDistance());

        // 开启动画
        if (this.options.animation) {
            this.openAnimation();
        }
    }

    // 为每个 slider-item 设置宽度
    setItemsWidth() {
        for (const item of this.sliderItems) {
            item.style.width = `${this.itemWidth}px`;
        }
    }

    // 为 slider-content 设置宽度
    setContentWidth() {
        this.sliderContent.style.width = `${
      this.itemWidth * this.sliderItems.length
    }px`;
    }

    // 不带动画的移动
    move(distance) {
        this.sliderContent.style.transform = `translate3d(${distance}px, 0px, 0px)`;
    }

    // 带动画的移动
    moveWithAnimation(distance) {
        this.setAnimationSpeed(this.options.speed);
        this.move(distance);
    }

    // 设置切换动画速度
    setAnimationSpeed(speed) {
        this.sliderContent.style.transitionDuration = `${speed}ms`;
    }

    // 获取要移动的距离
    getDistance(index = this.currIndex) {
        return -this.itemWidth * index;
    }

    // 开启动画
    openAnimation() {
        this.sliderContent.classList.add(SLIDER_ANIMATION_CLASSNAME);
    }

    // 关闭动画
    closeAnimation() {
        this.setAnimationSpeed(0);
    }

    // 切换到 index 索引对应的幻灯片
    to(index) {
        index = this.getCorrectedIndex(index);
        if (this.currIndex === index) return;

        this.currIndex = index;
        const distance = this.getDistance();

        if (this.options.animation) {
            return this.moveWithAnimation(distance);
        } else {
            return this.move(distance);
        }
    }

    // 切换上一张
    prev() {
        this.to(this.currIndex - 1);
    }

    // 切换下一张
    next() {
        this.to(this.currIndex + 1);
    }

    // 获取当前索引
    getCurrIndex() {
        return this.currIndex;
    }
}

素材：1 2 3 4.jpg 

 

bubbleJessica
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES新特性之class关键字
一碗周
12-15 351
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 类的声明 类是什么 ECMAScript6提供了更接近传统开发语言的手法，引入了类(Class)的概念。类作为对象的模板，在JavaScript中只是一个语法糖。 class关键字只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 示例代码如下： // ES 5 中定义对象的方式 // 定义一个构造函数 const Hero1 = function () { this.name = 'ywanzho.
（10）es6——面向对象Class
浪头的博客
04-21 1280
什么是面向过程编程? 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步的实现，作为前端人员来说对于这种方式应该已经不陌生了。 使用的时候再一个个的依次调用就可以了。 比如：打开冰箱门-->大象装进去-->关上冰箱门。 总结：面向过程就是按照我们分析好了的步骤，按照步骤解决问题。 // 声明3个回调函数，三个回调函数分别对应程序的三个过程 const open_the_door = function() { console.log("开门"); }; const
ES6中的class类详解
最新发布
2301_78145364的博客
04-12 637
静态方法和静态属性，是使用的属性和方法2.1 静态方法静态方法不会被子类继承，子类不能调用静态方法中的this，指向的是类class，不是类的实例。因此，不能通过实例来调用// 报错2.2 静态属性// 静态属性静态属性不能被子类继承，子类不能调用静态属性只能通过类名来调用，不能通过类的实例来调三、class继承extendsclass可以用过extends关键字来继承ES6继承，子类构造函数中必须使用super()。
ES6 类(Class)基本用法
悦度空间
07-31 3390
查看更多资源 1. 简介： ES6引入了Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。基本上ES6的class可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法。 本案例通过实现一个自由落体运动的小球，来阐述ES6 类(Class)基本用法。鼠标点击画布，点击处生成随机颜色大小的小球，并做...
es之class
myself_own的博客
03-10 335
es之class基础使用
ES5-class:ES5 实现 class
05-18
ES5 实现 class mootools-class是从 中剥离出来实现class的部分 prototype-class是从 中剥离出来实现class的部分 class 简化mootools的class，纯实现继承功能
es6新特性之 class 基本用法解析
01-19
javaScript 语言中，生成实例对象的传统方法是通过构造函数,与传统的面向对象语言（比如 C++ 和 Java）差异很大，ES6 提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板。通过class关键字，...
GLView.rar_class A_opengl es
09-19
A helper class to simplify writing an Activity that renders using OpenGL ES.
DBIx-Class-Elasticsearch：ElasticSearch与DBIx角色的集成
02-05
DBIx-Class-Elasticsearch：ElasticSearch与DBIx角色的集成
原生JavaScript之es6中Class的用法分析
10-15
主要介绍了原生JavaScript之es6中Class的用法,结合实例形式对比分析了es6与es5相关class定义、区别及使用技巧,需要的朋友可以参考下
ES：class 的基本使用
amadeus_liu2的博客
07-29 277
ES
es的class和函数的关系
Lpd_Reason的博客
01-16 345
参考：http://es6.ruanyifeng.com/#docs/class es6中新增了类（class）的关键字。 其实，类就是一种函数，只不过用calss关键字封装了而已。 es6以前定义类的时候可能是这样子的（构造函数方法）： function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toStr...
ES6 中的类（class）
TKOP_的博客
04-16 1197
ES6 引入的 class 关键字具有定义类的能力。类是 ECMAScript 中新的基础性语法糖。虽然 ES6 表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的依旧是原型和构造函数的概念。（笔记内容参考《JavaScript 高级程序设计（第4版）》章节8.4 类以前在笔记《js 中原型、原型链和继承概念（详细全面）》中简要提过部分内容，这里系统看一次。类声明和类表达式。两种方式都需要使用 class 关键字加大括号定义。类表达式与函数表达式类似，在它们被求值前都不能被引用。
ES2015 class
路遇惊喜
11-07 271
一、类 class ES2015以前 ECMAScript都是通过定义函数和定义原型对象来实现类 // 比如定义一个Person类 // 先定义一个函数，作为类的构造函数 function Person(name){ this.name = name; } Person.prototype.say = function(){ console.log(`say ${this.name}`) } ES2015以后 新增了class关键词来声明一个类 class Person{ // 如果需要在
Class 的基本语法
Geordies的博客
02-09 688
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
ES6 类(Class)基本用法和静态属性+方法详解
热门推荐
pcaxb的专栏
12-20 11万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例: //Person.js function Person(x,y){ this
ES6之Class详解篇
AK的博客
08-12 4527
1.类简介 ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 类的数据类型就是函数，类本身就指向构造函数。 使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。 2.Class的基本语法 class Point { constructor(x,y){ this.x = x; this.y = y; } toString(){ return `${thi
k8s 部署 elasticsearch 存储使用StorageClass
04-23
好的，关于k8s部署elasticsearch存储使用StorageClass的问题，您需要在Kubernetes集群中定义一个StorageClass，指定一种StorageClass来保存您的Elasticsearch数据。然后，您需要为您的Elasticsearch部署配置一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值