ES6中class结构封装构造函数

最新推荐文章于 2022-11-06 21:35:04 发布
VIP文章 最新推荐文章于 2022-11-06 21:35:04 发布
阅读量623 收藏 3
点赞数
分类专栏： js ES6 文章标签： ES6 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34500944/article/details/102949562
版权

ES6中用class结构封装构造函数和原型对象方法为一个整体

class 是专门创建一种自定义类型的关键字
什么是类型：包含构造函数和原型对象方法的整体

封装分为三步：
1、用class{}包裹原来的构造函数和原型对象方法
2、将原来的构造函数名提升为类型名，构造函数更名为constructor关键字
3、所有原型对象方法不需要”类型名.prototype”前缀，直接写成普通方法的简写

最后使用这个构造函数和方法还是和正常使用构造函数和方法一样

示例代码如下：

<script>
    class Student{
   
        constructor(sname,sage){
   
            this.sname
最低0.47元/天 解锁文章
WuQideveloper
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【class】接口使用类封装
Yomuki的博客
08-25 283
/* * @Desc: 接口使用类 * @Author: Yomuki * @Date: 2021-08-25 11:14:00 * @LastEditors: 曾茹菁 * @LastEditTime: 2021-08-25 11:43:24 */ // 接口类生成对象 const apiClassObj = { post: function () {}, get: function () {}, }; // 用户信息(vuex) const user = {}; export .
尝试用es6封装方法
yuntian1995的博客
10-19 3328
es6的一些实践
es6 里class类的封装
ice-bear
10-25 1130
传统方式 { /*传统模式*/ function person(){ this.name=null; this.sex=null; } person.prototype.eat= function () { return this.name+"吃饭"; ...
使用es6的class类进行模块化封装、请求
weixin_43090018的博客
04-12 1098
es6中的class类出来以后，es5的构造函数我都用得比较少了，虽然以前项目用到的class类也有但是很少，这次用的很普遍，记录一下一些小问题 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象 ES6 的继承实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用su
es6之class封装
hbts_901111zb的博客
02-02 7518
传统的面向对象语言（比如 C++ 和 Java）是通过class类来生成实例对象，javascript则是通过构造函数+prototype来封装，所以，js在es6引入了class类的概念用class定义一个类//定义类 class Point { constructor(x, y) { // this关键字则代表实例对象 this.x = x; this.y = y;
JS构造函数与class类中的封装、继承和多态
wytccc的博客
11-06 884
当访问对象的某个属性时，会先在这个对象的本身属性上查找，如果找不到，则会去__proto__指向的构造函数的prototype原型对象上查找，如果找不到，则再去构造函数的prototype原型对象的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，称为原型链，最终会指向null。构造对象上面的__proto__都指向当前构造函数的prototype，它们指向的地址是一样的，所以声明在prototype上的函数能被所有构造对象访问到！从父级继承过来的属性和方法或。
JS-ES6语法中构造函数的封装class类
DcTbnk的博客
04-14 1253
一.ES5构造函数中的一些问题 ES5的构造函数有一些问题 最大的问题,就是定义 prototype 是在函数之外定义的 调用构造函数,生成实例化对象,一定要在定义 prototype 之后 否则生成的实例化对象,只有属性没有函数方法 ES6中,新增语法形式 class 类 是一种新的定义构造函数的语法 作用和原理与ES5语法完全相同 只是语法格式和书写方式,不同 // 如果先调用构造函数...
解读ES6中class关键字
08-28
主要介绍了ES6中class关键字,class是es6引入的最重要特性之一。本文通过实例代码给大家详解，需要的朋友可以参考下
ES6中class类用法实例浅析
08-30
主要介绍了ES6中class类用法,结合实例形式分析了ES6中类的实现方法与相关语法使用技巧,需要的朋友可以参考下
JavaScript ES6中CLASS的使用详解
11-28
js里面有许多语法的缺点：繁琐杂乱的.prototype 引用、试图调用原型链上层同名函数时的显式伪多态以及不可靠、不美观而且容易被误解成“构造函数”的.constructor。 除此之外，类设计其实还存在更进一步的问题。传统...
Class封装
weixin_44570988的博客
04-28 1439
在类class里面说到的就是有构造器，通过构造器传参，在类里面，即使你不定义构造器，类里面也会默认一个构造器。 类里面有构造器、成员变量、方法。 构造器 ： 可以建一个构造器，或者建多个构造器的是时候，必须个数、形参列表不同。不写构造器，类里面也会默认一个构造器 例子 ： public ClassDemo() { System.out.println("无参构造器"); } public...
学会封装自己的class类：
nevercurtain的博客
12-22 1781
突然想起来自己曾经看的一本书：《Javascript_Dom编程艺术》 该书在前边的章节就提出了一些操作Dom 的方法类似: document.getElementById： .getElementsByTagName .getElementsByClassName 其中有一段，说了有些浏览器不支持.getElementsByClassName 然后有些聪明的程序员就自己封装类。当时没看懂
JS封装class类名的函数
g_hold的博客
07-28 1210
  function getClass(classname){ // 浏览器支持的情况下 if(document.getElementsByClassName) { return document.getElementsByClassName(classname); } // 不支持的情况下 var arr = [];//用来存放符合类名条件的元素 var de...
如何通过封装函数，然后利用className获取元素
weixin_43947715的博客
07-29 370
利用className获取元素 通过className改变子元素的样式，老规矩，这里通过ul li 给大家举例 JavaScript部分 <script type="javascript"> window,onload=function(){ var oUl=document.getElementById('ul1'); //获取ul的元素 var oLi=oUl....
ajax代码封装
HAI6545的博客
01-12 317
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> function ajax(obj){ // 判断url // 判断是否传入 if(obj.url ===..
类的封装以及构造方法
qq_38779698的博客
11-18 323
//为什么要有封装？ class Person { String name; // 声明姓名属性 int age; // 声明姓名属性 public void showInfo() { //获取信息的方法 System.out.println("姓名：" + name + "，年龄：" + age); } } public cl
C++中的封装——类class
WJ_SHI的博客
08-17 8970
在C语言中可以使用struct（结构体）将相应的数据封装起来，统一使用，同样地在C++中也可以使用struct将相应的属性及方法封装起来，例如下面的程序： #include &lt;iostream&gt; using namespace std; struct S{ int e1, e2; }; void f(const S&amp; s){ //以引用的方式传递地址 ...
class类的封装
kumayato的博客
05-11 782
目的 ： 解决了浏览器对document.getElementsByClassName()的兼容问题。思维导图：代码：<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ fun
es6封装类
csdnfig的博客
09-29 789
class animate{ constructor(element){ this.element=element } getmessage(){ if((this.element.indexOf(".",0)!=-1&&this.element.indexOf(".",0)==0)){ var ele=window.document.querySelector(this.ele...
es6中class类封装
最新发布
10-11
在ES6中，我们可以使用class关键字来定义类并实现封装。类封装允许我们将相关的属性和方法组织在一起，从而提高代码的可读性和可维护性。 下面是一个使用class关键字封装的例子： ```javascript class Animal { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值