JS高级第四天

ES5原型链继承

1.this的指向问题：回调函数里面的this没有指向，值为undefined，找不到window的
class Test{
showArr(){
let arr = [1,2,3,4,5,]
arr.forEach(function(item){
console.log(this)
})
}
}
new Test().showArr()
回调函数：是直接执行fn（），前面没有对象，fn（） 再外部：自动找到window对象：回调函数里面的this就指向window
在类中：自动找到外面的this，在类Test中出不去：Test类是没有this，Test.this === undefined
回调函数里面的this（函数用function）
在类外：一定是window对象
在类里面：一定是undefined
如果回调用的箭头函数：那就是找上级

ES6继承

// ES6继承
//这是一个类，类里面可以放对象
class Person {}
//这是子类继承extends父类
class Student extends Person {}
//输出的话需要new一个字类的，然后父类的东西就会继承在子类中
// console.log(new Student())

    // ES5的原型继承

    function Animal() {}

    Animal.prototype.say = function() {
        console.log('喔')
    }

    function Dog() {}

    console.log(new Dog())
        // let d1 = new Dog()
        // d1.say()
        // Dog的__proto__自动指向Object.prorotype

    // 实现：Dog.prototype.__proto__ = Animal.prototype
    // Dog.prototype.__proto__ = Animal.prototype

    // let d2 = new Dog()
    // console.log(d2)
    // d2.say()

    // 如果要用ES5实现继承：具体步骤如下
    // 1. 先定义构造函数
    // 2. 挂载原型方法
    // 3. 实现构造函数的原型继承
    // 4. 最后才实例化对象：调用原型方法

es5的继承太麻烦了，一般用ES6的继承方法多

创建元素案例

// 实现创建元素的继承

    // 1. 增加一个构造函数：能够创建元素
    function CreateElement(tag, className, text) {
        //在这个函数里面添加一个DIV对照下面的，
        this.ele = document.createElement(tag)
            //在上面创建的div添加一个样式style
        this.ele.classList.add(className)
            //添加一个文本到这个div里面去
        this.ele.innerText = text
    }
    // 2. 增加原型方法：实现appendTo
    CreateElement.prototype.appendTo = function(selector) {
        //在添加原型的基础上的最后一个添加div
        document.querySelector(selector).appendChild(this.ele)
    }

    // 测试：看看得到的东西有没有得到或者显示出来，需要new一下上面构造函数：构造函数都是需要new一下的
    const div = new CreateElement('div', 'current', '做人开心就好')
        //然后添加在body里面
    div.appendTo('body')

    // 3. 创建一个构造函数：创建图片元素
    function CreateImg(src, className) {
        // this.ele = document.createElement('img')
        // this.ele.classList.add(className)
        // 3.1 借调父构造函数：在原来实现创建元素的基础上，增加一个src属性即可
        CreateElement.call(this, 'img', className, '')
            //创建一个src属性的变量在DIV里面

        this.ele.src = src
    }


    // 4. 实现继承效果

    CreateImg.prototype.__proto__ = CreateElement.prototype

    const img = new CreateImg('images/b1.jpg', 'current')
    img.appendTo('body')


    // 原型的继承中：必用借调
    <h1>函数形参默认值</h1>
       // 形参默认值作用：方便调用者，不传参数也有效果，传参就是具体参数的效果

    // 形参默认值：在定义函数的时候，给形参直接复制：形参 = 值，这个值就是默认值
    function show(msg = '来啊，互相伤害啊') {
        console.log(msg)
    }

    show('滚')  // 如果有实参：默认值不生效
    show()      // 如果没有实参：默认值生效

    // 什么时候使用默认值？
    // 1. 如果当某个参数被传入实参的某个值的概率很高的情况下：就可以给定默认值
    function chengFa99(level = 9) { }
    chengFa99()

    // 2. 如果参数的值是布尔类型：一般都会给默认值（布尔类型就true和false）
    // box.addEventListener('click',function(){},true || false) // 第三个参数可以不给，有默认值

    // 默认值注意事项
    // 1. 如果有多个参数，那么有默认值的一定要放到最后
    function test(a = 1, b, c) { }

    // 传入实参：顺序，如果要给b和c传参：一定会覆盖掉a的默认值

    // 2. 没有规定形参默认值的数量：可以每个形参都有默认值（jq就是这样）