js-5 Es6-类

最新推荐文章于 2022-04-01 21:32:08 发布
最新推荐文章于 2022-04-01 21:32:08 发布
阅读量473 收藏
点赞数
分类专栏： js web前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a12336487213/article/details/104445607
版权
web前端 同时被 2 个专栏收录
70 篇文章 1 订阅
订阅专栏
js
47 篇文章 0 订阅
订阅专栏

1类

1.类的使用：

在类中定义的函数自动放到原型中，不在构造函数中，很理想
class User{
constructor(name){
this.name = name;
}
show(){
console.log(this.name);
}
get(){
return “skajf”;
}

}

let xj = new User("刘兴加");
xj.show();
console.log(User == User.prototype.constructor);		//true

2.hasownproperty来遍历对象属性好

用类来设置方法，其属性是不可遍历

3.class下默认严格模式

4.静态属性static host = “jskdjakss”,所有对象共用。或者 class xj{}；xj.name=“vvv”;在外部用 类名.静态属性名。

5.静态方法：构造函数对象上定义函数，this是构造函数，只能用构造函数调用。不能通过对象调用：

function User(){
}
User.show = function (){
…
}
或
User.proto.show=function (){
…
}
或者更简单的在class中函数前加static

class Member{
        constructor(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
    }

    let xj = Member.create("兴佳", 22, "男");
    console.log(xj);

6.访问器和原来一样

7.属性保护，四种实现方法。

1.命名保护，_name这个属性大家默认只能通过访问器不能直接设置。

2.Symbol定义属性名或者对象属性，把受保护的属性全部压入这个对象 protecteds，只能内部访问，本身和子类访问this[protecteds].name。外部没有修改的权限。外部仅仅能通过访问器访问get name(){

        return this[protecteds].name;
    }。

const protecteds = Symbol();
    class Common{
        constructor(){
        this[protecteds] = {};
        this[protecteds].host = "http://www.baidu.com"; //可以把受保护的属性全部压入这个对象
        }
        set host(url){
            if(!/^https?:/i.test(url)){
                throw new Error("非常网址");
            }
            this[protecteds].host = url;
        }
        get host(){
            return this[protecteds].host;
        }
    }
    class Member extends Common{

        constructor(name, age, sex){
            super();
            this[protecteds].name = name;
            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
        /*set name(name){
            this[protecteds].name = name;
        }*/
        get name(){
            return this[protecteds].name;
        }
    }

    let xj = Member.create("兴佳", 22, "男");
    xj.host="http://www.baidu.com";
    console.log(xj);

    console.log(xj.name);

3.WeakMap保护类中属性：

weakMap的对象不能被遍历到，只能用set设置属性，get得到属性（protecteds.set(this,{…protecteds.get(this),url}); protecteds.get(this)[“host”]）

const protecteds = new WeakMap();
    class Common{
        constructor(){
            protecteds.set(this,{host:'"http://www.baidu.com"'});
            // this[protecteds].host = "http://www.baidu.com"; //可以把受保护的属性全部压入这个对象
        }
        set host(url){
            if(!/^https?:/i.test(url)){
                throw new Error("非常网址");
            }
            protecteds.set(this,{...protecteds.get(this),host:url});
        }
        get host(){
            return protecteds.get(this)["host"];
        }
    }
    class Member extends Common{

        constructor( age, sex){
            super();

            this.age = age;
            this.sex = sex;
        }

        static create(...arg){
            return new this(...arg);
        }
        set name(name){
            protecteds.set(this,{...protecteds.get(this),name:name});
        }
        get name(){
            return protecteds.get(this)["name"];
        }
    }

    let xj = Member.create( 22, "男");
    xj.name="xingjia";
    xj.host="http://www.liuxingjia.com";
    console.log(xj);
    console.log(xj.host);

    console.log(xj.name);

4.私有属性：在属性或函数前加#则此属性变私有，只能在本类中使用，不可被继承。firfox不支持，chrom支持.所以还是少用？？？

class Member {

       constructor( age, sex){
           // super();

           this.age = age;
           this.sex = sex;
           this.#check();
       }
       #name = "";
       create(...arg){
           return new this(...arg);
       }
       set name(name){
           this.#name = name;
       }
       get name(){
           return this.#name;
       }
       #check=()=>{
           console.log("jfjah");
       }

   }

   let xj = new  Member( 22, "男");
   xj.host="http://www.baidu.com";
   console.log(xj);
    xj.name="kjsadkf";
    // xj.#create();
   console.log(xj.name);

firfox：

在这里插入图片描述
chrom:
在这里插入图片描述

8.super的实现原理。

super.show(name) = this.proto.show.call(this,name)但又不仅仅限于此。
使用后者时多层继承会出现死循环，而super不会。这就是super出现啊的原因。

9练习，动画处理类，容器管理类，批量执行动画，动画队列控制。

1callback && callback();的意义就是：if(callback) { callback() }

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: content-box;
    }
    body {
        padding: 30px;
    }
    .slide {
        width: 300px;
        display: flex;
        flex-direction: column;
        /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
    }
    .slide dt {
        height: 30px;
        background: #34495e;
        color: white;
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
    }
    .slide dt:first-of-type {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .slide dd {
        height: 100px;
        background: #f1c40f;
        overflow: hidden;
    }
    .slide dd div {
        padding: 10px;
    }
    .slide dd:last-of-type {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
</style>

</head>
<body>
<div class="slide s1">
    <dt>后盾人</dt>
    <dd>
        <div>houdunren.com</div>
    </dd>
    <dt>后盾人</dt>
    <dd>
        <div>hdcms.com</div>
    </dd>
    <dt>刘兴加</dt>
    <dd>
        <div>lxj.com</div>
    </dd>
</div>
</body>
<script>
    class Animation{
        constructor(el){
            this.el = el;           //元素的传递
            this.timeout = 5;       //定时器的变化时间
            this.isShow = true;     //元素是否展开
            this.defaultHeight = this.height;   //元素的原本高度
            console.log(this.defaultHeight);

        }
        hide(callback){
            this.isShow = false;        //表示元素是否已经展开
            let a1 = setInterval(()=>{
                // console.log(1);
                if(this.height<=0){     //当高度为0
                    clearInterval(a1);
                    callback&&callback();   //清除定时器
                    return;
                }
                this.height = this.height - 1;//减少高度

            },this.timeout)
        }
        show(callback){         //将元素的dd展开，增加height至原本高度
            this.isShow = true;
            let a1 = setInterval(()=>{
                // console.log(1);
                if(this.height>=this.defaultHeight){
                    clearInterval(a1);
                    callback&&callback();
                    return;
                }
                this.height = this.height + 1;


            },this.timeout)
        }
        set height(height){     //设置元素的height
            this.el.style.height = height+"px";
        }
        get height(){       //得到实时的元素的height
            return window.getComputedStyle(this.el).
            height.slice(0,-2)*1;
        }
    }
    class Slide{
        constructor(el){
            this.el = document.querySelector(el);
            this.links = this.el.querySelectorAll("dt");
            this.panels = [...this.el.querySelectorAll("dd")].map
            (item=>new Panel(item));        //将dd新建为panels对象数组

            console.log(this.links);
            console.log(this.panels);
            this.bind();                    //调用bind函数。

        }

        bind(){                               //给对象添加监听器，被点击就做动作，一组动作
            this.links.forEach((item,i)=>{
                item.addEventListener("click",()=>{
                    this.action(i);
                })
            })
        }

        action(i){          //做的动作，批处理。
            // Panel.hideAll(this.panels);
            Panel.hideAll(Panel.filter(this.panels,i),
                ()=>{this.panels[i].show();});
                //将除了i之外的对象都hide。i对象show
        }
    }
    class Panel extends Animation{
        /*constructor(el){
            super(el);
        }*/
        // static num=0;
       static hideAll(items, callback){
           if(Panel.num>0) return;
           items.forEach(item=> {
               Panel.num++;
               item.hide(()=>{
                   Panel.num--;
               });
           });

           callback && callback();

       }
       static filter(items,i){      //i是被点击的对象的下标
           return items.filter
           ((item,index) =>index!=i);   //将除了被点击的dt都hide，关闭
       }

    }
    Panel.num = 0;      //定义静态变量
    let hd = new Slide(".s1");







    // let el = document.querySelector(".s1");
    // let hd = new Animation(el);
    // hd.hide(()=>{
    //     console.log("okhide");
    //     hd.show(()=> {
    //         console.log("okshow");
    //     })
    // });

</script>
</html>
十年4646454sdg5sagsa
关注
专栏目录
js5
LYRZCSDN的博客
09-27 224
说出以下代码的执行结果 var a = 123; function fun(){ alert(a); } fun(); // 局部有就用局部的 没有返回上一级去寻找 var a = 123; function fun(){ alert(a); var a = 456; } fun(); alert(a); //函数提前声明 var提前声明 var a = 123; fun...
cesium-navigation-es6 Cesium指南针，import的方式
08-25
5. **注意事项**：由于描述中提到“版本兼容1.60-1.70”，这意味着cesium-navigation-es6可能不适用于Cesium的较新版本。在升级Cesium时，请确保插件的版本与Cesium兼容，否则可能遇到运行错误。 虽然没有提供具体...
JS5参考手册
06-19
JS 5.5 的详细参考手册..............................
babel6.26.0.js----es6语法转化为es5语法--2积分
04-23
- **es6** 和 **es5**：分别代表ECMAScript 2015（也称为ES6）和ECMAScript 5，是JavaScript语言的不同版本。ES6引入了许多新特性，如箭头函数、模板字符串、类等，而ES5是大部分老浏览器所支持的版本。 **压缩包子...
JavaScript-ES6-JSONParsing-Example-:JavaScript-ES6-JSONParsing-Example
04-29
在"JavaScript-ES6-JSONParsing-Example--master"目录下的文件可能包括HTML、CSS和JavaScript文件，它们可能共同创建了一个简单的Web应用程序，演示了如何从远程API获取JSON数据并进行显示。通过对这些文件的深入...
javascript-practice-es6:练习ES5至ES6代码
05-12
JavaScript是Web开发中不可或缺的一部分，尤其在ES6（ECMAScript 2015）发布之后，它引入了许多新特性，极大地提升了JavaScript的表达能力和可读性。本实践项目主要聚焦于从ES5到ES6的过渡，通过一系列小代码片段...
learning-js-es6:开始使用JS-ES6
05-08
学习和练习JavaScript。
JS（5）
weixin_46340162的博客
03-14 183
BOM初级
JavaScript 5
fagdg的博客
04-01 1230
一、for循环 1、for循环的语法和执行顺序 for(参数初始化 ; 条件判断; 更新循环变量){ 循环体被执行; } 参数：可以声明多个同一 类型的值并赋值，用“，”隔开 循环变量：可以是用“，”隔开的多 个表达式，运算顺序从左到右 2、使用for循...
JavaScript5
baidu_19552787的博客
01-09 294
第 7 章“函数表达式” 一、 1.函数声明 function functionName(arg0, arg1, arg2){ //函数体 } 关于函数声明，它的一个重要特征就是函数声明提升（function declaration hoisting），意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。 sayHi(); function sayHi(){ ...
JS随笔（JS5）
SuperxApple的博客
11-06 308
每隔1分钟请求一次接口aaa aaa(){ let test = setInterval(function(){ if(data.data==1){ clearInterval(test) } },60000); },
js5（内置对象）
lzyPM的博客
02-18 651
定义 math对象 date对象 array对象 string对象
JS（5）——函数
Hedwig的博客
07-08 200
1. Function 类型每个函数都是Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。由于函数名仅仅是指向函数的指针，因此函数名与包含对象指针的其他变量没有什么不同。换句话说，一个函数可能会有多个名字，如下面的例子所示：function sum(num1, num2){     return ...
【71】JS(5)——数组
倏存的博客
04-22 744
⚪数组概念⚪获取数组元素⚪数组长度⚪数组遍历
Js类的写法
热门推荐
wangweiscsdn的博客
08-03 3万+
1、构造函数法 构造函数的优点是：我们可以根据参数来构造不同的对象实例 ，缺点是每次构造实例对象时都会生成getName方法，造成了内存的浪费。 用一个外部函数来代替类方法，达到了每个对象共享同一个方法   2、原型方式 原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ，优点是所有对象实例都共享getName方法（相对于构造函数方式），没有造成内存...
学习js
白白的博客
02-10 380
数组中的循环 1.for 2.for（const value of array） 3.for(const key in array) 4.lis.forEach(function (item) 通过4来实现点击变灰 let lis = document.querySelectorAll("ul li"); lis.forEach(function (item) { console.log(...
cesium-popup-es6 文档
最新发布
07-18
cesium-popup-es6是一个基于ES6语法编写的Cesium.js的弹窗组件，用于在Cesium地图上显示自定义的弹窗内容。 这个组件主要包含了以下几个部分： 1. Popup类：这是弹窗的主要类，负责创建和管理弹窗的各种属性和方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值