首页 > 博客列表 > 构造函数、原型、dom基础

博主信息

博文 45

粉丝 0

访问量 46983

专题推荐

更多>

迭代器

实现一个迭代器

// 手写一个迭代器
    function myIterator(data) {
        // 迭代器中必须要有一个next()
        let i = 0;
        return {
            next() {
                // done表示遍历是否完成
                // value表示当前遍历的数据
                // let done=i>=data.length?false:true;
                let done = i >= data.length;
                let value = !done ? data[i++] : undefined;
                return {
                    done,
                    value
                };
            }
        }
    }
    let interator = myIterator(['a', 'b', 'c']);
    console.log(interator.next());
    console.log(interator.next());
    console.log(interator.next());
    console.log(interator.next());

构造函数与原型

任何一个函数都有一个原型属性：prototype
对于普通函数没用，对构造函数来说才有用；
构造函数是对象工厂，是用来创建对象的；
对象也叫实例，实例：实际案例；
js中没有’类‘的概念，它是基于原型的语言，所以可简单的将构造函数当成类；
构造函数必须使用new来调用，普通函数不用
new的过程就是类的实例化过程，就是创建一个对象的过程；
创建对象的过程，就叫类的实例化；
实例的原型永远指向它的构造函数的原型，实例的原型从构造函数的原型继承成员(属性/方法)；
需要被所有类实例共享的成员，应该写到构造函数的原型上；
如果当前实例类中存在和原型链上同名的属性，当前类的属性优先级最大；

属性通常不应该共享，它是却分不同对象的标志，方法更适合共享

类与继承

类

  class User1 {
      //构造方法
      constructor(name, email) {
              this.name = name;
              this.email = email;
          }
          // 原型方法
      show() {
              return {
                  name: this.name,
                  email: this.email,
              }
          }
          //静态方法
      static fetch() {
          //静态方法中的this指向类
          return this.hello(this.userName)
      }
      static userName = 'usernames';
      static hello(name) {
          return 'Hello' + name;
      }
  }
  let user1 = new User1('admin', 'admin@qq.com');
  console.log(user1.show());
  console.log(User1.fetch());

继承

surper()调用父类构造方法,确定this指向

子类扩展父类的功能，可以拥有自己的属性或方法；

子类中可以访问父类的构造方法，原型方法，静态方法，不能访问私有成员

class Child extends User1 {
      constructor(name, email, gender) {
          //surper()调用父类构造方法,确定this指向
          super(name, email)
          this.gender = gender;
      }
      show() {
          return {
              name: this.name,
              email: this.email,
              gender: this.gender,
          }
      }
  }
  const child = new Child('孩子', 'admin@haizi.com', '男')
  console.log(child.show());

函数知识

函数：函数是代码复用的手段
变量：变量是数据复用的手段
声明：

function 函数名(){
  函数体
}

调用:
函数名();
…rest剩余参数

function fun(...arr){
  console.log(arr)
  //累加器
  let res=0;
  for(let i of arr){
  res +=i;
  }
  console.log(res);
}
fun(1,2,3,4,5);

… 什么时候是归并，什么时候是展开？

在函数的参数中是…rest归并；
在函数的调用的参数中是展开
函数默认是单值返回
如果要返回多个值，可以使用引用类型，对象，数组；
```
function fun(){
return {status:1,message:'成功'}
}
console.log(fun());
```

箭头函数

匿名函数：let fun=function(){};
箭头函数是用来简化匿名函数的语法糖；
()=>{};
1、如果只有一条语句可以不写return和{};

let fun = function() {
            return [1, 2, 3, 4];
        }
        console.log(fun());
        // 简写
        let fun1 = () => [1, 2, 3, 4];
        console.log(fun1());

2、只有一个参数时()可以省略，没有参数不能省略，多个参数时必须要写

let fun=name=>[name];

3、当有多条语句时，函数体的{}不能省

DOM

用css选择器获取dom元素

html是一个树形结构化文档，
文档的结构叫dom；

document.querySelector()，返回匹配的元素集合中的第一个元素（返回一个）；

document.querySelectorAll()，返回匹配的元素集合所有成员；

const lis = document.querySelectorAll('.item');
  lis.forEach(item => {
       console.log(item);
      // style设置元素的内联样式
      item.style.color = 'red'
  })

模拟jquery 选择器

const $ = selector => document.querySelectorAll(selector);
  console.log($('.item'));

支持伪类例获取第一个元素

let first = document.querySelectorAll('.item:first-of-type');
  console.log(first);

常用快捷方式

html document.documentElement;
head document.head;
body document.body;
titlle document.title;

dom元素的增删改查

1、创建元素 createElement();

const ul = document.querySelector('ul');
  // 创建元素
  const li = document.createElement('li');
  li.innerText = 'item6';
  ul.appendChild(li);
  let html = "<li style='color:red'>item7</li>";
  //将html字符串之间解析为dom元素
  ul.insertAdjacentHTML('beforeEnd', html);
  // 如果大量添加元素应该使用文档片段完成
  //文档片段
  const frag = new DocumentFragment();
  for (let i = 0; i < 5; i++) {
      const li = document.createElement('li');
      li.textContent = 'hello' + (i + 1);
      //将生成的节点先临时挂载倒文档片段中;
      frag.appendChild(li);
  }
  ul.appendChild(frag);
  html = `<li style='color:blue'>demo1</li><li style='color:blue'>demo2</li><li style='color:blue'>demo3</li><li style='color:blue'>demo4</li>`;
  ul.insertAdjacentHTML('afterBegin', html);

2、更新

let h3 = document.createElement('h3');
  h3.innerText = '晚上好';
  document.querySelector('li:nth-of-type(3)').replaceWith(h3);
  let h2 = document.createElement('h3');
  h2.innerText = '晚上好';
  ul.replaceChild(h2, document.querySelector('li:last-of-type'));

3、删除

ul.removeChild(document.querySelector('li:first-of-type'));

4、查询

// 遍历查询
  console.log(ul.children);
  // 子元素的数量
  console.log(ul.children.length);
  console.log(ul.childElementCount);
  // 第一个子元素
  console.log(ul.firstElementChild);
  // 最后一个子元素
  console.log(ul.lastElementChild);
  // 父节点
  console.log(ul.lastElementChild.parentElement);
  //前一个兄弟
  const jiu = document.querySelector('li:nth-of-type(9)');
  jiu.style.background = 'yellow';
  console.log(jiu.previousElementSibling.innerHTML);
  // 后一个兄弟
  console.log(jiu.nextElementSibling.innerHTML);

classList对象

获取元素的类名

let p = document.querySelector('p');
  console.log(p.className);
  console.log(p.id);

classList就是专门来操作类的

添加类 x.classList.add(xx);
```
p.classList.add('green');
```
移除类
x.classList.remove(xx);
替换类
x.classList.replace(要替换的，替换成)；

动态切换类，如果有则删除，没有则添加 x.classList.toggle()

dataset对象

专用于访问自定义的标签属性

<input type="text" class="username" value="个人简介" data-email="admin@admin.com">;
let v = document.querySelector('.username');
  console.log(v.value);
  console.log(v.dataset.email);

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

1209列表元素

2021-02-25 12:34:22