首页 > 博客列表 > javascript中的闭包,访问器属性与类的创建与解构

博主信息

博文 30

粉丝 1

访问量 23663

专题推荐

更多>

javascript中的闭包经典用法

满足下面2个条件的函数称之为闭包函数:1.父子函数2.子函数使用父函数中的变量,例如下列函数

fn=function(a,b)
{
return function(c){
    return a+b+c;
}
}

使用闭包函数可以将服务器数据分块传入,例如下列函数

fn = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
};

上述函数还可简化成 fn=a=>b=>c=>a+b+c

访问器的属性

将一个方法伪装成属性进行访问称之位访问器属性,例如下列代码

player={
    isnewplayer:1,
    data: {accont:"376220510",password:"6350187",level:100,job:"战士"},
    get job(){
        return this.data.job;
    },
    set job(newjob){
        this.data.job=newjob;
    },
}
console.log(player.job);
player.job="法师";
console.log(player.job);

上述代码中,使用player.job访问了player对象中的get job方法。这种将方法伪装成属性的方式称之为访问器属性

类的构造与成员引用

javascript中class来创建一个类例如下列代码

class player{
    account="admin";
    password="123456";
    sex="man";
    level="100";
    job="战士";
    hp="20000";
    mp="2000";
    constructor(account,password,sex,level,job){
        this.account=account;
        this.password=password;
        this.sex=sex;
        this.level=level;
        this.job=job;
    }
    setinfo(level){
        this.level=level;
        this.hp=level*200;
        this.mp=level*20;
    }
}
let player1=new player("376220510","123456","女",1,"战士");
console.log(player1.hp);
player1.setinfo(1);
console.log(player1.hp);

上述代码,创建了一个player类,并且使用new创建了player1这个实例

数组与类的解构

1.数组解构:模板 = 数组例如下列代码

let [name, email] = ["朱老师", "498668472@qq.com"];
console.log(name, email);

2.对象解构:对象模板 = 对象字面量，例如下列代码

let { id, lesson, score } = { id: 1, lesson: "js", score: 80 };
console.log(id, lesson, score);
let {...obj} ={ id: 1, lesson: "js", score: 80 };
console.log(obj);

3.应用场景：使用对象解构传参,例如下列代码

function getUser({id,name,email}) {
    console.log(id,name,email);
}
getUser({id:123, name:'张三',email:'zs@php.cn'})

将js引入到浏览器的方法

1.使用script标签引入js脚本, 写到这对标签中, 仅于当前的html文档生效例如下列代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器中的js</title>
  </head>
  <body>
    <button onclick="console.log('hello world');">按钮1</button>
    <button onclick="setBg(this)">按钮2</button>
    <script>
       function setBg(ele) {
          document.body.style.backgroundColor = "wheat";
           ele.style.backgroundColor = "yellow";
           ele.textContent = "保存成功";
        }
    </script>
  </body>
</html>

2.如果这个按钮的功能, 需要在多个页面中使用, 可以将这个js脚本保存为外部脚本,然后再引入到当前的html,例如<script src="outer.js"></script>这样即可

取DOM元素的二个API接口

1.获得一组: querySelectorAll(css选择器),例如下列代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取dom元素</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      console.log(document);
      const items = document.querySelectorAll(".list > .item");
      console.log(items);
      for (let i = 0, length = items.length; i < length; i++) {
        items[i].style.color = "red";
      }
    </script>
  </body>
</html>

上述代码中使用document.querySelectorAll(".list > .item");获得了所有li元素

2.一个(一组中第1个): querySelector(css选择器),例如下列代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取dom元素</title>
  </head>
  <body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      const first = document.querySelector(".list > .item");
      console.log(first === items[0]);
      first.style.backgroundColor = "yellow";
      const three = document.querySelector(".list > .item:nth-of-type(3)");
      three.style.backgroundColor = "wheat";
    </script>
  </body>
</html>

上述代码中使用document.querySelector(".list > .item");获得了第一个li元素
使用document.querySelector(".list > .item:nth-of-type(3)");获得了第三个li元素

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

浅谈HTML开发基础

2021-12-22 17:30:06