javascript ES6 class类 使用示例

最新推荐文章于 2022-10-14 19:40:22 发布
最新推荐文章于 2022-10-14 19:40:22 发布
阅读量239 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuckall/article/details/109322805
版权

javascript ES6 class类 使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .boxs {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 400px;
            color: white;
        }

        .box {
            width: 20%;
            height: 50px;
            background: gray;
        }

        .active {
            color: #00b7ee;
        }
    </style>
</head>
<body>
<div class="boxs">
    <div class="box">高</div>
    <div class="box">富</div>
    <div class="box">帅</div>
</div>

</body>
</html>
<script>
    class Client {
        constructor (nodes) {
            this.nodes = [...nodes];
            this.initEvent();
        }

        initEvent () {
            this.nodes.forEach(item => {
                item.addEventListener('click', (e) => {
                    this.handleClick(e.target);
                });
            });
        }

        handleClick (ele) {
        	// 过滤把包含有active类名的元素取到存到 数组items 中
            const items = this.nodes.filter(item => {
                return item.classList.contains('active'); // 判断class - node.classList.contains()
            });
            if (items.length === 2 && !items.includes(ele)) {
                return;
            }
            ele.classList.toggle('active'); // 切换class - node.classList.toggle()
        }
    }
    const client = new Client(document.querySelectorAll('.box'));
</script>
wang_bin__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 进阶 34 -- ES6 class类 详解
宁静致远
01-14 276
什么是类 在JavaScript中，类是函数的一种，类的本质其实就是一个函数。es6新增了一种定义对象实例的方法，使用class关键字定义类。 静态的属性方法。原型的属性方法。实例的属性方法
JavaScript ES6 Class类实现原理详解
10-15
主要介绍了JavaScript ES6 Class类实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript ES6 class实例
weixin_30517001的博客
11-14 115
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript ES6 class实例</title> </head> <body> <sc...
前端研习录（43）——ES6 Class讲解及示例分析
清风不渡
10-14 553
重拾前端记忆，记录学习笔记，现在进入Class部分
ES6面向对象（class）案例
hq.zheng的博客
07-09 799
案例代码:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;class的基本运用&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="
JavaScript ES6 类
volit的博客
10-11 119
（3）在自定义类型汇总，需要通过Object.defineProperty()方法手工指定某个方法为不可枚举；而在类中，所有方法都是不可枚举的。（1）函数声明可以被提升，而类声明和let类似，不能被提升。真正执行声明语句之前，它们会一直存在临时死区中。（2）类声明中的所有代码将自动运行在严格模式下，且无法强行让代码脱离严格模式执行。
原生JavaScript之es6中Class的用法分析
10-15
在JavaScript的ES6标准中，引入了一种新的语法特性——Class，这使得JavaScript的面向对象编程变得更加简洁和直观。Class的出现是对ES5中基于原型的面向对象编程方式的一个补充，提供了一种更加接近传统面向类的语言...
ES6中class类用法实例浅析
08-30
在ES6中，`class`关键字引入了一种新的面向对象编程的语法，使得JavaScript更加接近传统的面向类的语言。这个特性让开发者能够更直观地定义和使用类，而不再需要依赖于构造函数和原型链。下面我们将深入探讨`class`...
详解ES6 CLASS在微信小程序中的应用实例
10-15
在ES6中，`CLASS`关键字的引入是为了提供一种更面向对象的语法糖，使得JavaScript的类更加符合传统的面向对象编程。在微信小程序中，我们可以利用`CLASS`来创建更结构化的组件，提高代码的可读性和可维护性。本文将...
JavaScript ES6专用字段和方法
04-07
此外，除了私有字段和方法，ES6还引入了其他增强面向对象编程的特性，比如类（class）、静态方法、继承（inheritance）、super关键字等。类是基于原型的JavaScript对象表示的更直观的方式，静态方法则属于类本身而...
JS-ES6类
【chase
03-28 309
使用js的class需注意以下几点： (1)通过class关键字创建类，类名我们还是习惯性定义首字母大写 (2)类里面有个constructor函数,可以接受传递过来的参数，同时返回实例对象 (3) constructor 函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数,类也会自动生成这个函数 (4) 生成实例new不能省略 (5) 最后注意语法规范，创建类类名后面不要加小括号，生成实例类名后面加小括号，构造函数不需要加function (6)类里面所有的函数不需要写fun
ES6:JavaScript中的类Class
面向对象的夜猫子
09-18 484
ES5中的近类结构 ES5以及之前的版本，没有类的概念，但是聪明的JavaScript开发者，为了实现面向对象，创建了特殊的近类结构。 ES5中创建类的方法：新建一个构造函数，定义一个方法并且赋值给构造函数的原型。 ES6 class类 ES6实现类非常简单，只需要类声明。推荐 babel在线测试ES6 测试下面的代码。 类声明 如果你学过java，那么一定会非
es6 class类小demo
想搞全栈的前端
03-30 165
使用如下 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> </style> <body> </body> </html> <script src="jquery.min.js"></script&gt
javaScript ES6中的类与对象
Ulrica_Amaris的博客
03-24 142
类 class 在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。 类抽象了对象的公共部分，它泛指某一大类（class） 对象特指某一个，通过类实例化一个具体的对象 创建类 语法： class name { // class body } 创建实例： var xx = new name(); 注意： 类必须使用 new 实例化对象 类 constructor 构造函数 constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实
全面感知ES6（8）Class类
mysunniess的博客
07-24 408
Class（类） ES6引入了Class，这个概念，作为对象的模板，通过Class定义类， 新的Class写法只是让对象原型的写法更加清晰，更向对象编程的语法而已。 ES6中类的基本用法就如下面这样。 class name{ constructor(name,age){ this.name = name; this.a...
ES6中class学习笔记 (一)
前端切图仔的日常
07-17 200
1.类的数据类型就是函数，类本身就指向构造函数，这与 ES5 的行为是一致的。 class Point { // ... } typeof Point // "function" Point === Point.prototype.constructor // true 2.类的所有方法都定义在类的prototype属性上面，在类的实例上面调用方法，其实就是调用原型上的方法。 3.Ob...
Class 的基本语法
Geordies的博客
02-09 692
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
JS的ES6中的类使用
weixin_47342624的博客
09-17 317
构造方法在new操作符，创建实例时调用，实例方法绑定到原型prototype上，静态方法绑定到类本身上this._address = "广州市"}// 普通的实例方法// 创建出来的对象进行访问}}}
es6 Class 的静态属性和实例属性
歪脖先生的博客
02-02 3028
Class 的静态属性和实例属性 静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。 class Foo {}Foo.prop = 1;Foo.prop // 1 上面的写法为Foo类定义了一个静态属性prop。 目前，只有这种写法可行，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。 /
es6的class类
最新发布
05-25
ES6中引入了class关键字，使得JavaScript也有了类的概念。使用class定义一个类，类名的首字母通常应该大写。 类中可以定义构造函数、属性、方法等。其中构造函数用于初始化类的实例，属性用于存储类的状态，方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值