(function(){
    //块级作用域
})();

<script>
       //普通创建方式,使用构造函数
       let colors = new Array(20)
       console.log(colors)
       //使用数组字面量
       let color = ['red','green','blue']
       console.log(color)

       /* 
       创建数组的静态方法（两种）from(),of()，其中from()用于将类数组结构转换为数组，类数组是指有length属性和可索引元素的结构(字符串，集合，映射等)。of()用于将一组参数转换为数组
       */
       const strArr = Array.from('kitholt')
       console.log(strArr)

       const m = new Map().set(1,2).set(3,4)
       console.log(Array.from(m))

       const s = new Set().add(1).add(2).add(3)
       console.log(Array.from(s))

       //from()方法还能对数组进行       浅复制
       const a1 = [1,[6,66],3,4]
       const a2 = Array.from(a1)
       a1[1][0] = 99
       console.log(a2 === a1);//false
       console.log(a2[1][0])
   </script>

<script>
    /* copyWithin()用于批量复制数组。fill()用于向一个数组插入全部或者部分的值，通常需要指定范围，包含开始索引，不包含结束索引 */
    const zeros = [0,0,0,0,0]
    zeros.fill(1,1,4)//用1，填充索引大于等于1且小于4的元素，预期结果[0, 1, 1, 1, 0]
    console.log(zeros)
    //值得一提的是，对于超出数组边界或者0长度再或者是索引方向相反的情况，fill()都不会报错，而是忽略

    const ints = [0,1,2,3,4,5,6,7,8,9]
    ints.copyWithin(4,0,3)//结果为[0,1,2,3,0,1,2,7,8,9]
    console.log(ints)
</script>

<script>
    /* 这里有两种方法，分别是reverse()和 sort()，其中reverse()能够接受一个比较函数，我们能够自定义这个 比较函数来决定是升序还是降序 */
    const val = [1,4,2,5,41,32,7,6]
    val.sort((a, b) => a > b ? 1 : a < b ? -1 : 0)//升序排列
    console.log(val)
    console.log(val.reverse())
    //需要注意的是，这两种方法都返回调用它们数组的引用（会改变原数组）
</script>

<script>
    /* 
    关于数组操作的方法，有concat()，它能创建一个数组的副本，然后将参数添加到这个副本的末尾。
    slice()用于切割数组，需要注意的是这个方法不会影响原来的数组。
    强大的splice()，说它强大是因为这一个方法，能够实现删除，插入，替换的操作。
    */
   const arr = ['fran','伟鸿','陈部','志坚']
   const arrConcat = arr.concat('胖子','仕豪',['浩彬','陈尹'])
   console.log(arrConcat)//['fran', '伟鸿', '陈部', '志坚', '胖子', '仕豪', '浩彬', '陈尹']

   const arrSlice =  arrConcat.slice(2)//从第二个位置开始拆分数组,还有一种方式dddd
   console.log(arrSlice)

   arr.splice(0,2)
   console.log('***',arr)//['陈部', '志坚']

   arr.splice(1,0,'胖子','仕豪')
   console.log(arr)//['陈部', '胖子', '仕豪', '志坚']
</script>

<script>
    /* 对于一个数组，它有对应的索引，值，以及索引/值对。我们可以用下面三种方法来分别获取... */
    const colors = ['red','green','blue']
    const colorsIndex = Array.from(colors.keys())
    console.log(colorsIndex)
    for(let i of colors.values()){
        console.log(i)
    }

    const colorVal = Array.from(colors.values())
    console.log(colorVal)

    const colorEntries = Array.from(colors.entries())
    console.log(colorEntries)
</script>

<script>
    /* 
    对于数组的length属性，它不仅只读还可修改，通过修改length的属性，可以从数组末尾删除或者添加元素
    */
   const colors = ['red','green','blue']
   console.log('原数组',colors)
   //添加一个black
   colors[colors.length] = 'black'
   console.log('插入black',colors)
   //将数组长度变为2
   colors.length = 2
   console.log('将数组长度变为2',colors)
</script>

<script>
    //创建一个map
    const myMap = new Map()
    myMap.set('k1','v1')
    .set('k2','v2')
    .set('k3','v3')
    /* get(),has(),delete()以及keys(),values(),entries()三个返回迭代器的方法 */
    console.log(myMap)
    console.log(myMap.get('k1'))//根据键获取对应的值
    console.log(myMap.has('k2'))
    myMap.delete('k2')
    console.log(myMap)
</script>

<script>
    /* 键和值在迭代器中是可以修改的，但是映射内部的引用无法修改 */
    const m1 = new Map([['k1','v1']])
    for(let key of m1.keys()){
        key = 'newKey'
        console.log(key)//newKey
        console.log(m1.get('k1'))//结果为v1
    }
    /* 选择map还是obj？
        插入操作看map
        查询操作用obj
    */
</script>

<script>
    //set的方法包括add(),delete(),has(),size()
    const mySet = new Set();
    mySet.add('v1').add('v2').add('v3').add('v3')
    console.log(mySet)//{'v1', 'v2', 'v3'}
    const result = mySet.has('v1')
    console.log(result) 
</script>

<script>
    /* 
    合并对象，顾名思义就是将两个对象进行合并。有时候也叫作“混入”，对象A（源对象）混入对象B（目标对象），注意该操作执行的【浅复制】9
    */
   let src, dest, result
   //定义目标对象
   dest = {}
   //定义源对象
   src = {id: 'src'}
   //增强后的对象,与此同时dest对象也会被修改
   result = Object.assign(dest, src)
   console.log("目标对象dest和增强后的对象result是否相等(同一个指针指向)？",result === dest)
   result.id = "null"
   console.log(result.id)
   console.log(dest.id)
</script>

<script>
    /* 
    什么是语法糖，就是能让程序猴写代码写起来更舒服的语法结构
    1.属性值简写（属性名和变量名一样时，即可触发对象属性的简写形式）
    2.简写方法名
    3.可计算属性 （可以在对象字面量中动态完成属性赋值，中括号包围的对象属性键表示这个属性会随着中括号里面的变量值的改变而改变
    具体操作如下）
    */

    const name = 'fran_name'
    const age = 'fran_age'
    const major = 'fran_major'
    const say = 'fran_say'
    let person = {
        [name]: 'fran',
        [age]: 21,
        [major]: 'Software engineer',
        [say](){
            console.log(`my name is ${this.fran_name}`)
        }
    }
    console.log(person)//{fran_name: 'fran', fran_age: 21, fran_major: 'Software engineer'}
    /* 
    这种操作有点像，先挖一个萝卜坑（中括号），给每个坑一个编号（变量名）然后再种萝卜（变量的值）
    */

    /* 
    另外可计算属性和简写方法名能够“联动”产生一些“节目”效果,方法名也是对象的一个属性，它也是可以计算的,在方法名外面也可以加[]
    */
    person.fran_say()//my name is fran
</script>

<script>
    /* 属性分为：
        数据属性(就是我们平时定义的属性，包含一个保存数据值的位置。值会从这个位置读取，同时修改后也会写入到这个位置)
        另外需要注意的是：我们可以对数据属性进行进一步地“约束”，这种“约束”叫作属性的特性。有四个特性configurable【属性是否能够删除】，enumerable【属性是否可以循环】，writable【属性的值是否能够修改】，value
        利用Object.defineProperty()时，这四个特性默认都是false，当然可以人为设置

        访问器属性(不含数据值，包含一个setter和getter函数)----------------->响应式数据的底层实现!!!!!!!
        get函数(当访问访问器属性时，会被调用，用于返回一个有效值)
        set函数(当写入 访问器属性时，会被调用，接收传入的新值，对数据进行修改)
     */
     let person = {}
     person.name = 'jack'
     console.log(person.name)
     Object.defineProperty(person,'age',{
         writable: false,
         configurable: false,
         value: 18
     })
     console.log(person.age)
     person.age = 21
     console.log(person.age)//结果仍为18，因为writable设置了false，也就是说属性的值无法修改
     delete person.age//删除属性无效

     //下面演示一下“响应式数据”---摘（改）（抄）自js高级程序设计
     let book = {
         year_: 2021,
         edition: 1,
     }
     Object.defineProperty(book,'year',{
         get(){
            return this.year_
         },
         set(newVal){
            if(newVal > 2021){
                this.year_ = newVal
                this.edition = newVal - 2021
            }
         }
     })
     book.year = 2025
     console.log(book.edition)// 4
     //现在想想，vue里的data配置项中的数据（每一个vc的属性）都会为每个数据匹配一个专有的访问器属性，当数据被修改的时候，会调用其对应的setter方法
</script>

<script>
    /* 
    对象解构？官方说法就是 使用与 对象匹配的结构 来实现 对象属性赋值
    大白话就是，如果你像得到某个对象的一些属性的值并用一些变量保存起来，最常规的做法就是 变量 = 对象.属性
    */
    let person = {
        name: 'fran',
        age: 21,
        shoes:{
            nike: 'nike',
            anta: 'anta',
        }
    }
    //常规赋值
    let name = person.name
    let age = person.age
    console.log('常规赋值')
    console.log(name,age)
    //使用解构赋值
    let {name: myName, age: myAge} = person
    console.log('解构赋值')
    console.log(myName, myAge)
    //值得注意的是，如果有对象以参数传入某个函数，我们也能对这个对象参数进行解构赋值，比如下面这个例子
    let showShoes = function({shoes:{nike, anta}}){
        console.log(nike, anta)
    }
    //传入的是一个person对象，但是会将该对象的shoes属性结构出来
    showShoes(person)
</script>

<script>
    /* 
    在js里，函数和构造函数也是属于Object这个祖先类，引入构造函数是为了更进一步确定对象类型
    比如obj1 = {}，这是Object的实例，而person = new Person()，它既是Object的实例，也是Person的实例

    如何区分普通函数和构造函数？
    使用new操作符调用的函数就是构造函数

    一般构造函数的函数名第一个字母是大写，普通函数的则是小写
    */
   //开始定义构造函数，   ？？应该能理解为创建一个类？？
    function Person(name, age) {
        this.name = name
        this.age = age
        this.sayName = function(){
            console.log(`halo, my name is ${this.name}. I am ${this.age}.`)
        }
    }
    let fran = new Person('fran',21)//halo, my name is fran. I am 21.
    fran.sayName()
</script>

<script>
    /* 
    原型是构造函数的一个属性，这个属性是一个对象，上面有特定引用类型对象的共享方法和属性，从而实现所有属性和方法在所有实例之间是共享的
     */
    function Person(name, age) {
    this.name = name
    this.age = age
    //定义一个原型上的方法.
    Person.prototype.sayName = function(){
        console.log(`halo, my name is ${this.name}. I am ${this.age}.`)
        }
    }
    let jack = new Person('jack',19)
    let fran = new Person('fran',21)
    jack.sayName()
    fran.sayName()
</script>

<script>
    /* 
    组合继承，综合了原型链和盗用构造函数，将两者的优点结合了。在原型链的原型上继承属性和方法，而子类实例的属性则通过盗用构造函数（调用父类的构造方法）来进行赋值
    */
   function Person(name){
       this.name = name
       this.nationality = []
   }
   Person.prototype.sayName = function(){
       console.log(`my name is ${this.name}`)
   }

   function YellowGuy(name, age){
       Person.call(this,name)
       this.age = age
   }
   YellowGuy.prototype = new Person()

   YellowGuy.prototype.sayAge = function(){
       console.log(`i am ${this.age}`)
   }

   let fran = new YellowGuy('fran',21)
   fran.sayName()
   fran.sayAge()
   fran.nationality.push('China')
   console.log(fran.nationality[0])
</script>

<script>
    /* 
    使用背景： 你有一个对象，想在它的基础上再创建一个新的对象。你可以采取前面讲到的组合继承，但是组合继承有的时候是需要事先“约定”好的，不能很好的做到随时使用。我们可以封装一个函数Object(),传入要在此基础上修改的对象，返回一个新的对象，这个新的对象的原型指向传入的这个对象
    但是需要注意的是：属性中包含引用值始终会在相关对象之间共享
    该方式最大的有点就是减少了构造函数的创建。想在那个对象基础上创建一个新的对象，只需要将这个对象传入Object函数
    */
    function object(o){
        function NewObj() {}
        NewObj.prototype = o
        return new NewObj()
    }
    let person =  {
        name: ''
    }
    let fran = object(person)
    fran.name = 'fran'
    console.log(fran.name)

    /* 
    寄生式继承和它类似，只不过多了个增强对象环节（增加新的方法），然后再将这个新对象返回...
    */
</script>

<script>
    /* 
    听名字就是组合继承的改进版，它是为了解决组合继承的效率问题，最主要的效率问题是父类构造函数会被调用两次，一次是在子类原型创建时调用，另外一次是在子类的构造函数中调用。

    其实子类原型只要包含父类对象的实例属性即可，子类构造函数只要再执行的时候重写自己的原型即可

    具体实现步骤就是：①利用寄生式继承来继承父类原型②执行完①会得到一个新对象，再将这个对象赋值给子类原型

    仔细想想，组合继承的子类原型是父类构造函数的一个实例，而寄生式组合继承的则是一个“过渡对象”（这个对象的原型就是父类原型）
    */
    function object(o){
        function NewObj() {}
        NewObj.prototype = o
        return new NewObj()
    }

    let Person = function(name){
        this.name = name
    }

    let ChinesePerson = function(name, age){
        Person.call(this, name)//重点！！！！！！！！！！！！！！这里调用父类的构造方法
        this.age = age
    }

    //核心方法，这一步代替了 ChinesePerson.prototype = new Person()，减少一次调用父类构造方法的次数
    function inheritPrototype(subType, superType){
        //利用寄生式继承里面的object方法来得到“过渡对象”
        let prototype = object(superType.prototype)
        //执行完①会得到一个新对象，再将这个对象赋值给子类原型
        subType.prototype = prototype
    }
    inheritPrototype(ChinesePerson, Person)
    let fran = new ChinesePerson('fran',21)
    console.log(fran)
</script>

<script>
    /* 
    什么是类构造函数？简单说就是在 类创建实例的时候 要调用的函数，此外要调用类构造函数一定要用new操作符！！!
     */
    class Person{
        //下面这就是Person的类构造函数- -，构造函数用于对实例进行相关属性方法的赋值操作
        constructor(name){
            this.name = name
            this.sayName = function(){
                console.log(`my name is ${this.name}`)
            }
        }
    }
    let p1 = new Person('fran')
    p1.sayName()
    
    //let p2 = Person()
    //报错 Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

    let p3 = new Person.constructor()
    console.log(p3 instanceof Person.constructor)
</script>

<script>
    /* 
    抽象基类？？？不就是抽象类嘛，在java中定义抽象类一个abstract关键字就好了，但是在js中要在需要定义成抽象类的constructor中使用new.target来检测，new.target会保存 通过new关键字调用的类或函数，通过比较可以阻止对抽象基类的实例化
    想想，因为js里没有abstract这个关键字，所以默认 所有的类都是可以实例化的。现在又引入了抽象基类这个概念，只好将识别 抽象基类的环节 推迟到constructor中执行，new.target作为一个检查点，如果new的是一个 抽象基类 就会抛出错误
    */
   class Vehicle{
       constructor(price){
           this.price = price
           //设置“检查点，如果发现new的是Vehicle就抛出错误”
           if(new.target === Vehicle){
               throw new Error('不好意思，Vehicle是一个抽象基类，无法被实例化- -，请实例化它的子类，不用谢')
           }
           /* if(!this.foo){
                throw new Error('这个子类必须实现foo方法')
           }
           console.log('创建Vehicle的子类实例成功') */
       }
       showPrice(){
           console.log(`这辆车的价格是${this.price}w`)
       }
       /* foo(){
           console.log('foo')
       } */
   }
   Vehicle.prototype.foo = function(){
        console.log('foo')
   }

   class Car extends Vehicle{
       constructor(brand,price){
           //注意子类的类构造函数内一定要先执行父类的类构造方法！！！不然会报错
           super(price)
           this.brand = brand
           this.showBrand = function(){
               console.log(`这辆车是${this.brand}`)
           }
       }
       /* foo(){
           console.log('foo')
       } */
   }

   //下面尝试new一下这个抽象基类（必抛错）
   //let car = new Vehicle()//Uncaught Error: 不好意思，Vehicle是一个抽象基类，无法被实例化- -，请实例化它的子类，不用谢 at new Vehicle (抽象基类.html:19)
   let toyota = new Car('丰田',20)
   let auto = new Car('大众',10)
   toyota.showBrand()
   toyota.foo()
   console.log(toyota.brand === auto.brand)
</script>

<script>
    /* 
    为了能在实例之间能够共享方法，类定义语法把在 类块定义的方法作为 原型方法
    另外，类定义也支持设置访问器
    */
   class Person{
       //添加到this的所有内容都会存在于不同的实例上
       constructor(name,age){
           this.name = name

           /* 这是我之前犯的错误
           this.age = age 
           */

           this.age_ = age
           this.locate = () => {
               console.log('instance')
           }
           /* this.sayAge = function(){
               console.log(this.age)
           } */
       }
       set age(age){
            console.log('修改age')

            /* 同上
            this.age = age 
            */

            this.age_ = age
       }
       get age(){
            console.log('读取age')
            return this.age_
       }
       //这个就是定义在类的原型的方法，从这里可以看出，该方法位于类块里，constructor之外
       locate(){
           console.log('prototype')
       }
   }

   let p1 = new Person('fran',21)
   console.log(p1.name)
   p1.locate()//instance
   Person.prototype.locate()//prototype

   p1.age
   p1.age = 22

   /* 
   在设置访问器的时候遇到了栈溢出的问题：产生这个问题的原因很简单但是我一开始并没有发现：我把访问器的属性和实例属性写成一样的了。访问器属性的工作原理是：当访问到该属性，该属性本身是不会存放数据的，而是会调用set或者get函数，里面才是要处理的数据
   就拿上面的age来说，实例属性和访问器属性都是age，乍一看合情合理：我访问age属性，自然就会调用相关函数改变age的值。大错特错，来看看set的内部有条this.age语句，这条语句相当于又访问了age这个访问属性，然后由调用set，然后.........就死循环最后就栈溢出了
   解决方法很简单：属性命名不一样即可，一般真正用来存放数据的属性我们都会把它们“隐藏起来”（这样命名xxx_)，而访问器属性则直接命名xxx，有点代理的味道了
   */
</script>

<script>
        /* 
        什么是节点，简单讲就是html标签（有点不严谨，确实不严谨），每个文档（document）是一个网页的根节点，这个根节点有一个唯一的子节点---<html>，也叫文档元素，所有的文档元素都在这个元素之内
        节点之间两种关系：父子关系、同胞关系
        每个节点都有一个childNodes和parentNodes属性，其中childNodes属性的值是一个NodeList类数组对象，存放的是一个有序节点（按照html标签的出现顺序），因为是一个类数组，我们可以用中括号或者item()的方法访问里面的元素
        另外在childNodes里，每个childNode还有一个nextSibling和previousSibling属性，分别指向自己的后一个、前一个同胞元素
        还有一点需要补充的是，父节点还有firstchild和lastChild两个属性，专门来访问第一个节点和最后一个节点
        下面是简单的调试环节
         */

         //获取文档元素html
        let html = document.documentElement
        let htmlChildren = html.childNodes
        console.log(htmlChildren)//NodeList(3) [head, text, body]

        let head = html.firstChild
        console.log(head)

        let body = html.lastChild
        console.log(body)

        let headChildren = htmlChildren[0].childNodes
        console.log(headChildren)
    </script>

/* 
        操纵节点的一些方法
        appendChild(), insertBefore(), replaceChild(), removeChild()，其中appendChild()是将元素插入到末尾，insertBefore()可以指定插入节点的位置, 剩下俩个不用过多解释- -
        此外还有cloneNode()方法，通过传一个布尔参数来决定是否开启深复制，若为true则复制该节点以及其整个子DOM树，反之只复制该节点

        normalize()方法，后续会进行补充...
        */

        let ul = document.documentElement.lastChild.childNodes[1]
        console.log(ul)

        let li = document.createElement('li')
        li.innerHTML = 5
        ul.appendChild(li)

        ul.removeChild(li)

        //偷懒，就不演示了
    </script>

/* 
        getElementById(), getElementByTagName()等返回的都是一个HTMLCollection对象，它和前面的NodeList很像，唯一的区别就是前者有一个额外的方法namedItem(),通过标签的name属性取得某一项的引用

        通过查阅相关资料，NodeList包含的是一个节点的所有节点（包括了元素节点），而HTMLCollection只包含其元素节点，通过下面的一个小例子就能看出它们之间的差别
        */
       let htmlNodeList = document.documentElement.childNodes
       console.log(htmlNodeList)//NodeList(3) [head, text, body]

       let htmlHTMLCollection = document.documentElement.children
       console.log(htmlHTMLCollection)//HTMLCollection(2) [head, body]

       /* 
       我们能看到多出了个TEXT_NODE
       */
    </script>

<script>
        /* 
        这个强大的接口能够在DOM被修改时异步执行回调，使用这个接口能够观察文档，DOM树的一部分或者某个元素，或者元素属性、子节点、文本的变化

        基本用法：
        1.创建实例，并传入一个回调处理函数
        2.使用observe()为该实例绑定观察对象，传两个参数，一个参数是指定要观察的DOM节点，第二个参数是一个配置对象，用于指定观察哪些方面的变化

        每个回调都会收到一个MutationRecord实例的数组，这个数组记录了发生变化的相关信息
        
        想想，貌似vue的$nextTick函数的实现原理好像就是这个...
        */

        let observer = new MutationObserver(() => console.log('<body> 标签的属性被改变了！！！'))
        observer.observe(document.body, {attributes: true})

        document.body.className = 'foo'
        console.log('改变body的css类名')

        /* 我们来观察一下回调执行的时机
        结果：
        改变body的css类名
        <body> 标签的属性被改变了！！！ */
    </script>

<script>
        /* 
        可以替代之前的getElementById()和getElementByTagName()
        querySelector()：接收CSS选择符参数，返回匹配的节点
        querySelectorAll()：接收CSS选择符参数，返回所有匹配的节点，所有实例包装在NodeList中
        matches(): 接收CSS选择符参数，如果元素匹配则该选择符返回true，反之返回false
         */

        console.log(document.body.querySelectorAll('p'))//NodeList(6) [p, p, p, p, p, p], 需要注意的是，这个返回的NodeList是一个“静态”的，并非“实时”的

        console.log(document.body.matches('body.p'))
    </script>

<script>
        /* 
        classList属性，要操作类名，可通过此属性实现，HTML5提供了一下方法：
        add(),contains(),remove(),toggle()
        */
        let div = document.querySelector('.red')
        div.classList.remove('red')

        div.classList.add('green')
        console.log(div.style)
    </script>

<script>
        /*
        两个属性： 
        innerHTML:dddd
        outerHTML:调用它的元素会被传入的HTML字符串解析生成的HTML DOM子树给取代
        两个方法，都接收两个参数（插入标记的位置，要插入的HTML或者文本）：
        插入标记位置的可选参数：
            1. beforebegin：元素之前，相当于在前面插入一个同胞节点
            2. afterbegin：元素开头内部，相当于插入一个子节点
            3. beforeend： 元素末尾内部，相当于插入一个子节点（末尾）
            4. afterend： 元素之后，相当于在后面插入一个同胞节点
        insertAdjacentHTML()，insertAdjacentText()
        */
       
    </script>

<script>
        /* 
        所谓遍历就是遍历DOM结构，有两种类型来遍历
            1. NodeIterator
                使用document.createNodeIterator()创建，该方法需要接收四个参数（[要遍历根节点的节点]，[要访问哪些节点]，[过滤对象 || 过滤函数]，[扩展实体引用]）
                （whatToShow）要访问哪些节点，这个参数对应的常量是在NodeFilter中定义的
                关于过滤对象的使用：
                    过滤对象NodeFilter只有一个acceptNode()方法，具体实现下面会有
                节点迭代器有两个主要的方法：nextNode()，previousNode()
            2. TreeWalker,这可以说是前者的升级版，额外添加了不同方向遍历的方法：
                parentNode()
                firstChild()
                lastChild()
                nextSibling()
                previousSibling()
        */

        //定义一个过滤对象NodeFilter，该过滤对象表示只接收<p>元素的节点
        let filter = {
            acceptNode(node){
                return node.tagName.toLowerCase() == 'p' ? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT
            }
        }

        let div = document.querySelector('.div1')
        let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
        let node = iterator.nextNode()
        while(node != null){
            console.log(node.tagName)
            node = iterator.nextNode()
        }
    </script>

<script>
    /* 
    js函数并不能像传统编程那样重载，因为没有签名（接收参数的类型和数量），因此如果定义了两个同名方法，则后面定义的会覆盖掉先定义的
    
    在es6之后，能够支持显式定义默认参数，只要在函数定义中的参数后面用=就可以为参数赋值
    值得一提的是，默认参数值不限于原始值和对象类型，也可以使用调用函数返回的值
     */

     function addNum(num){
         return num + 100
     }
     function addNum(num){
         return num + 200
     }
     let result = addNum(30)
     console.log(result)//230

     function giveName(name = 'foo'){
        return `halo, my name is ${name}`
     }
     let sentence = giveName()
     let sentence2 = giveName('kitholt')
     console.log(sentence)//halo, my name is foo
     console.log(sentence2)//halo, my name is kitholt

     //参数也存在于自己的作用域，它们不能引用函数体的作用域，下面这种操作如果不传第二个参数的话会报错
     function makeKing(name = 'jack', numerals = defaultNumeral){
         let defaultNumeral = '2'
         return `King ${name} ${numerals}`
     }
     console.log(makeKing(undefined,2))//King jack 2
     console.log(makeKing())//报错
</script>

<script>
    /* 
    在前面我们知道，函数声明和函数表达式都可以定义一个函数，但是他们有个很重要的区别。
    这个区别就是js引擎在执行任何代码之前，会先读取函数声明，然后再生成函数定义，而对于以函数表达式定义的函数只能等到代码执行到它那一行才会生成函数定义
    */
   
    //使用函数声明定义函数
    console.log(sayName())
    function sayName(){
        return 'my name is kitholt'
    }
    //使用函数表达式声明函数
    console.log(sayAge())//Uncaught ReferenceError: Cannot access 'sayAge' before initialization at 函数声明与函数表达式.html:22
    let sayAge = function(){
        return '21'
    }
</script>

<script>
    /* 
    扩展运算符
        1. 扩展参数：对可迭代对象应用扩展运算符，并将其作为一个参数传入，可以将可迭代对象拆分，并将迭代返回的每个值单独传入
        2. 收集参数（我愿称之为“捡漏”）,【...】收集参数的结果是一个Array实例，它只能作为最后一个参数传入，因为收集参数的结果是可变的，假如作为第一个参数传入，
        那么所有的传入的参数都会被“打包”成Array实例，反之如果放在最后一个，它会“打包”剩余的参数

    */
   function getSum(){
       let num = 0;
       for(let i = 0; i < arguments.length; i++){
            num += arguments[i]
       }
       return num
   }
   let values = [1, 2, 3, 4]
   console.log(getSum(...values))//对参数进行扩展运算

   function ignoreFirst(firstValue, ...values){
        console.log(values)
   }
   ignoreFirst()//[]
   ignoreFirst(233)//[]
   ignoreFirst(1,2,3)//[2, 3]
</script>

<script>
    /* 
    在标准函数中，this引用的是把函数当成方法调用的上下文对象
    关于this的指向问题，简单说就是谁是调用者，这个this就指向它

    getId这个方法返回的是一个匿名函数，在匿名函数中的this是不会绑定到某个对象的，也就是说this会指向window
    */
   window.id = 'Window'
   let obj = {
       id: 'obj',
       getId(){
           return function(){
               return this.id
           }
       }
   }
   console.log(obj.getId()())//Window

   /* 
   那如果得到obj的id呢？在内部函数的外面 将指向obj的this保存起来再在内部函数里引用就好了
   */
   let obj1 = {
       id: 'obj1',
       getId(){
           let that = this
           return function(){
               return that.id
           }
       }
   }
   console.log(obj1.getId()())//obj1
</script>

<script>
    /* 
    任何定义在函数或者块中的变量，都可以认为是私有的
    可以利用闭包实现私有变量的定义
    */
   function MyObj(){
       let privateVal = 10
        function privateFun(){
            return false
        }

        this.publicMethod = function(){
            privateVal++
            return privateFun()
        }
   }

   let myObj = new MyObj()
   console.log(myObj.privateVal)//undefined
   myObj.privateFun()//私有变量.html:28 Uncaught TypeError: myObj.privateFun is not a function

   /* 
   静态的私有变量，需要用匿名函数表达式 创建一个包含 构造函数 及其方法 的私有作用域
   公有方法需要定义在原型上
   */

</script>

<script>
    /* 
    模块模式使用一个匿名函数返回一个对象，在匿名函数内部，先定义私有变量和私有函数，之后，创建一个匿名函数要返回的对象字面量，这个对象只包含公开访问的属性和方法

    比如在web开发中，经常要使用单例对象管理应用程序级的消息
    */

    function Component(id){
        this.id = id
    }
    //单例模式创建app
   let app = function(){
       let components = new Array()
       
       //返回一个对象字面量
       return {
        getComponentCount(){
            return components.length
        },
        registerComponent(component){
            if(typeof component == 'object'){
                components.push(component)
            }
        }
       }
   }()
   console.log(app)
   let c1 = new Component('1')
   let c2 = new Component('2')
   let c3 = new Component('3')
   app.registerComponent(c1)
   app.registerComponent(c2)
   app.registerComponent(c3)
   console.log(app)
   console.log(app.getComponentCount())
</script>

<script>
    /* 
    js函数并不能像传统编程那样重载，因为没有签名（接收参数的类型和数量），因此如果定义了两个同名方法，则后面定义的会覆盖掉先定义的
    
    在es6之后，能够支持显式定义默认参数，只要在函数定义中的参数后面用=就可以为参数赋值
    值得一提的是，默认参数值不限于原始值和对象类型，也可以使用调用函数返回的值
     */

     function addNum(num){
         return num + 100
     }
     function addNum(num){
         return num + 200
     }
     let result = addNum(30)
     console.log(result)//230

     function giveName(name = 'foo'){
        return `halo, my name is ${name}`
     }
     let sentence = giveName()
     let sentence2 = giveName('kitholt')
     console.log(sentence)//halo, my name is foo
     console.log(sentence2)//halo, my name is kitholt

     //参数也存在于自己的作用域，它们不能引用函数体的作用域，下面这种操作如果不传第二个参数的话会报错
     function makeKing(name = 'jack', numerals = defaultNumeral){
         let defaultNumeral = '2'
         return `King ${name} ${numerals}`
     }
     console.log(makeKing(undefined,2))//King jack 2
     console.log(makeKing())//报错
</script>

<script>
       /* 
       在前面我们知道，函数声明和函数表达式都可以定义一个函数，但是他们有个很重要的区别。
       这个区别就是js引擎在执行任何代码之前，会先读取函数声明，然后再生成函数定义，而对于以函数表达式定义的函数只能等到代码执行到它那一行才会生成函数定义
       */
      
       //使用函数声明定义函数
       console.log(sayName())
       function sayName(){
           return 'my name is kitholt'
       }
       //使用函数表达式声明函数
       console.log(sayAge())//Uncaught ReferenceError: Cannot access 'sayAge' before initialization at 函数声明与函数表达式.html:22
       let sayAge = function(){
           return '21'
       }
   </script>

<script>
    /* 
    requestAnimationFrame，瞎翻译：请求动画帧函数
    该方法接收一个参数：是要在重绘屏幕前调用的函数
    值得注意的是这个参数函数还能接收一个参数，该参数表示下次重绘的时间（待补充...）
		
    额外注意：dom元素的style对象和dom元素的css样式表两者是独立的,没有任何关系，JS只能操作或修改行内样式！！！
    */

    var a = 0;
    function step(){
        a++;
        console.log(a)
        var g =  requestAnimationFrame(step)
        if(a>=100){
            cancelAnimationFrame(g)
        }
    }
    step()
</script>

<canvas class="drawing" width="800" height="300" style="background-color: honeydew;"></canvas>
<script>
    /* 
    创建画布：<canvas></canvas>
    获取画布的上下文：getContext()，根据接收的参数来决定获取的是什么类型的画布上下文对象，比如传入'2d'---一定要传参，不然会报错

    两个基本属性：填充（fillStyle）和描边（strokeStyle）

    矩形是唯一一个可以直接在2D画布中直接绘制的形状
    相关方法（都接受四个参数：x坐标，y坐标，矩形宽度，矩形高度）：
        1. fillRect()
        2. strokeRect()
        3. clearRect() 清除画布某个区域，可以用于“打孔”

    注意：
        1. lineWidth：描边宽度
        2. lineCap控制线条端点['butt', 'round', 'square']
        3. lineJoin控制线条交点的形状['round', 'bevel(取平？)', 'miter(出尖)']

    */

    let drawing = document.querySelector('.drawing')
    let context = drawing.getContext('2d')

    //画一个红色矩形
    context.fillStyle = 'red'
    context.fillRect(10, 10, 50, 50)
    //给这个红色的矩形描一下边
    context.strokeStyle = 'black'
    //设置描边宽度
    context.lineWidth = 10

    context.strokeRect(10, 10, 50, 50)
    //再画一个透明的蓝色矩形
    context.fillStyle = 'rgba(0, 0, 255, 0.5)'
    context.fillRect(30, 30, 50, 50)
    
    //在这两个矩形重叠的地方打个“孔”
    context.clearRect(40, 40, 10, 10)
</script>

<script>
        /* 
        Path路径，通过路径可以创建复杂的形状和线条。绘制路径的一般流程是
        1. 创建路径beginPath()
        2. 开始操作arc(), arc(), lineTo(), moveTo()...
        3. 结束路径closePath()
        4. 描画路径

        绘制文本(接收参数：要绘制的字符串，x坐标，y坐标，可选的最大像素宽度)：
            1. fillText()
            2. strokeText()
         */

        let drawing = document.querySelector('.drawing')
        let context = drawing.getContext('2d')
        //现在来尝试画一个不带数字的表盘
        //先将“画笔”移到画布中央,此时原点（0,0）被移动此处
        context.beginPath()
        context.translate(400, 400)
        //半径为400px，画一个圆
        context.arc(0, 0, 400, 0, 2 * Math.PI, false)
        //半径为390px，画一个内圆
        context.arc(0, 0, 390, 0, 2 * Math.PI, false)

        context.rotate(1)

        //画一个时针
        context.moveTo(0, 0)
        context.lineTo(0, -360)
        //画一个分针
        context.moveTo(0, 0)
        context.lineTo(-330, 0)
        //结束路径
        context.closePath()
        //描画路径
        context.stroke()

        //给表盘顶部添加数字12
        context.font = 'bold 14px Arial'
        context.textAlign = 'center'
        context.textBaseline = 'middle'
        context.fillText('12', 0, -375)

    </script>

<script>
        /* 
        context这个笔可以根据以下属性自动为已有形状或路径生成阴影
            shadowColor，shadowOffsetX，shadowOffsetY，shadowBlur
        如何使用：只要在绘制图形或者路径前设置好适当的值即可
        */

        let drawing = document.querySelector('.drawing')
        let context = drawing.getContext('2d')

        context.shadowOffsetX = 5
        context.shadowOffsetY = 5
        context.shadowColor = 'green'

        //画一个红色矩形
        context.fillStyle = 'red'
        context.fillRect(10, 10, 50, 50)
    </script>

<script>
        /* 
        标准画布的兄弟---线性渐变画布
        let gradient = context.createLinearGradient(x1, y1, x2, y2)
        四个参数：起始xy坐标和终点xy坐标

        调用addColorStop()为渐变指定颜色，接收两个参数，第一个表示色标位置，范围是0-1，第二个是css颜色字符串

        之后将这个对象赋值给fillStyle或者strokeStyle

        忘了说了，有线性渐变就自然有径向渐变createRadialGradient()，接收六个参数，前三个指定起点圆形的xy坐标和半径，后三个指定终点圆形的...
        */
        let drawing = document.querySelector('.drawing')
        let context = drawing.getContext('2d')

        //创建渐变画布
        let gradient = context.createLinearGradient(0, 0, 800, 300)
        gradient.addColorStop(0,'red')
        gradient.addColorStop(0.5,'yellow')
        gradient.addColorStop(0.6,'pink')
        gradient.addColorStop(1,'blue')
        //线性渐变填充，这里会占画布的1/2
        context.fillStyle = gradient
        context.fillRect(0, 0, 400, 300)


        //创建径向渐变
        let radialGradient = context.createRadialGradient(600, 150, 90, 490, 150, 200)
        radialGradient.addColorStop(0,'white')
        radialGradient.addColorStop(0.5,'purple')
        radialGradient.addColorStop(1,'black')
        //径向渐变填充
        context.fillStyle = radialGradient
        context.fillRect(400, 0, 400, 300)
    </script>

<script>
      /*
      如何使用： 
          1. createPattern(),接收两个参数：一个HTML<img>元素和如何重复图像的字符串
          2. 将填充样式设置为图案，context.fillStyle = pattern
          3. 调用fillRect方法
      */
  </script>

<canvas class="drawing" width="2000" height="2000"></canvas>
<img src="img/img1.jpg" alt="" width="500" height="300" id="img1">
<script>

    /* 
    使用getImageData()获取画布上原始图像数据，该方法返回一个ImageData实例，有三个属性：width，height和data，data是一个包含图像所有的原始像素信息的数组
    每个像素在数组中都有4个值表示分别表示红绿蓝透明，比如说第一个像素的信息是在数组第0到第3个值中，后面的以此类推

    一个小应用：灰阶过滤器
    */

    let drawing = document.querySelector('.drawing')
    let ctx = drawing.getContext('2d')
    let image, imageData, red, green, blue, len, average
    //console.log(ctx)
    image = document.getElementById('img1')



    
    //在画布上绘制图像
    window.onload = function(){
        ctx.drawImage(image, 0, 0, 500, 300)
         //取得图像数据
        imageData = ctx.getImageData(0, 0, image.width, image.height)
        data = imageData.data
        len = data.length
        for(let i = 0; i < len; i += 4){
            red = data[i]
            green = data[i+1]
            blue = data[i+2]
            //三颜色求平均值
            average =  Math.floor((red + green + blue) / 3)

            //相当于过滤掉了颜色信息，只留下灰度信息（我不太知道这是啥原理...）
            data[i] = average
            data[i+1] = average
            data[i+2] = average
        }
        //将修改的数据写回，并在画布上重新显示
        imageData.data = data
        ctx.putImageData(imageData, 0, 0)
    }




    /* 
    在完成这个应用的过程中遇到一些小坑
        一般图片的获取都是需要一定时间的，而drawImage()这个方法是同步执行的，如果图片还没加载完毕，画布就显示不出来图片
    解决方法：
        1. 对图片的操作全都放在window.onload里面
        2. 使用promise异步完成，当图片加载完毕时在调用drawImage()--------------------------------------出错了，暂时找不到- -
    下面使用promise来尝试解决
    */

    /* let promise = new Promise((resolve, reject) =>{
        if(image){
            resolve()
        }else{
            console.log('图片还未加载完成...')
        }
    })
    promise.then(() => {
        //绘制图像
        ctx.drawImage(image, 0, 0, 500, 300)
        console.log(image.width)
         //取得图像数据
        imageData = ctx.getImageData(0, 0, image.width, image.height)
        data = imageData.data
        console.log("23333",data)
        len = data.length
        for(let i = 0; i < len; i += 4){
            red = data[i]
            green = data[i+1]
            blue = data[i+2]
            //三颜色求平均值
            average =  Math.floor((red + green + blue) / 3)

            //相当于过滤掉了颜色信息，只留下灰度信息（我不太知道这是啥原理...）
            data[i] = average
            data[i+1] = average
            data[i+2] = average
        }
        //将修改的数据写回，并在画布上重新显示
        imageData.data = data
        ctx.putImageData(imageData, 0, 0)
    }) */
</script>

<script>
        /* 
        globalAlpha：设置所有绘制内容的透明度，取值0-1
        globalCompositeOperation：表示新绘制的形状如何与画布中已有的形状融合
        */

        let drawing = document.querySelector('.drawing')
        let ctx = drawing.getContext('2d')
        //globalAlpha的例子
        ctx.fillStyle = 'red'
        ctx.fillRect(0, 0, 80, 80)

        //改变全局透明度
        ctx.globalAlpha = 0.5

        ctx.fillStyle = 'blue'
        ctx.fillRect(60, 60, 60, 60)

        //恢复全局透明度
        ctx.globalAlpha = 1

        ctx.fillStyle = 'red'
        ctx.fillRect(500, 500, 80, 80)

        //红色矩形会出现在蓝色矩形上面
        ctx.globalCompositeOperation = 'destination-over'

        ctx.fillStyle = 'blue'
        ctx.fillRect(560, 560, 60, 60)

    </script>

<script>
    /* 
    实现动画的三个基本步骤：清除画布---更新状态（位置）---渲染
    目的：实现一个鼠标移动特效，鼠标在移动的过程中周围会有许多彩色小球在鼠标周围
    */
    //获取画布，对画布进行初始化操作,比如将画布的宽高设为和浏览器窗口的一样
    let drawing = document.querySelector('.drawing')
    let ctx = drawing.getContext('2d')
    drawing.width = window.innerWidth
    drawing.height = window.innerHeight
    /* 
    需要用到的全局变量
    1. 用于存放小球的数组ballArr
    2. 圆周率π
    */
    let ballArr = []
    let P = Math.PI
    /* 
    创建小球：
    小球有自己的圆心（xy坐标），以及用于模拟小球随机偏移的偏移量（dxdy），半径（radius），颜色（color），其中颜色属性使用一个随机函数getRandomColor()获取
    更新自身位置的函数updatePosition()，以及一个用于显示小球的渲染显示函数renderBall()
    */
    function Ball(x, y, r){
    this.positionX = x
    this.positionY = y
    this.dx = parseInt(Math.random()*8 -4)
    this.dy = parseInt(Math.random()*8 -4)
    this.radius = r
    this.color = this.getRandomColor()

    //每创建一个小球，都将其加入小球数组，便于管理
    ballArr.push(this)
    }
    //赋予每个小球不同的颜色，颜色字符串的六个数字通过随机数生成然后进行拼串操作得到的
    Ball.prototype.getRandomColor = function(){
    let color = '#'
    for(let i = 0; i < 6; i++){
    let randomColorNum = Math.floor(Math.random() * 9)
    color += randomColorNum
    }
    return color
    }
    /* 
    更新每个小球的位置状态, 每次移动小球都会逐渐变小，直至“消失”，小球消失的依据就是它的半径是否为负数
    如果为负数就将其从小球数组中删除, 需要一个removeBall()函数 
    */
    Ball.prototype.updatePosition = function(){
    this.positionX += this.dx
    this.positionY += this.dy
    this.radius -= 0.3
    if(this.radius < 0){
    this.removeBall()
    }
    }
    Ball.prototype.removeBall = function(){
    for(let i = 0; i < ballArr.length; i++){
    if(ballArr[i] === this){
        ballArr.splice(i,1)
    }
    }
    }
    //渲染显示函数renderBall(), 开始使用ctx对象
    Ball.prototype.renderBall = function(){
    ctx.beginPath()
    ctx.fillStyle = this.color
    ctx.arc(this.positionX, this.positionY, this.radius, 0, 2 * P, false)
    ctx.fillRect(this.positionX + 10, this.positionY + 10, this.radius, this.radius)
    ctx.fill()
    }

    /* 
    给鼠标绑定相关事件，以及执行动画操作
    在这里需要注意的是，在更新每个小球的位置时，小球有可能会因为半径缩减为负数而从数组中被移除，因此在renderBall之前需要判断当前小球是否还在数组中

    我之前就是直接updatePosition()后就调用renderBall()，结果就是动画效果只能执行一次
    */
    drawing.addEventListener('mousemove', function(event){
    new Ball(event.offsetX, event.offsetY, 15)
    })
    drawing.addEventListener('click', function(event){
    for(let i = 0; i < 15; i++){
    new Ball(event.offsetX, event.offsetY, 15)
    }
    })
    function animation(){
    ctx.clearRect(0, 0, drawing.width, drawing.height)
    for(let i = 0; i < ballArr.length; i++){
    ballArr[i].updatePosition()
    if(ballArr[i]){
    ballArr[i].renderBall()
    }
    }
    requestAnimationFrame(animation)
    }
    animation()
</script>