构造函数、原型、dom基础

迭代器

实现一个迭代器

// 手写一个迭代器
    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);