继承和闭包

继承和闭包

继承

子类继承父类 可以拥有父类的方法及属性 这个称为继承

继承的使用

1.使用extends来实现继承（es6的class）

// 继承 class类 的继承 extends继承关键词
class Person{
    constructor(){ //构造函数
        this.name = '张三'
        this.eat = function(){
            console.log('干饭');
        }
    }
}
class Student extends Person{ //使用student来继承Person 获取父类一切的非私有的方法和属性
    constructor(){
        super() //在子类的构造器中如果要使用this关键词 必须先写super()
        this.age = 18
        // 重写 this.eat  本身继承于父类的方法 现在在这里面我重写了这个方法
        this.eat = function(){
            console.log('喝西北风')
        }
    }
}
let student = new Student()
console.log(student.age); //访问自己的age属性 18
console.log(student.name); //父类的name属性 这个name属性现在属于student对象 他继承于Person的属性 张三

2.使用原型继承

function Person(){ //构造函数
	this.name = '王五'
}
function Teacher(){//构造函数
	this.age = 80
}
Teacher.prototype = new Person()
let teacher = new Teacher()
console.log(teach.name)//王五

继承的层次

class a{
	 constructor(){ //构造函数
        this.name = '张三'
       	this.age = 18
       	this.sex = '男'
    }
}
class b extends a{
    constructor(){ //构造函数
            this.name = '张三'
            this.addr = '湖南长沙'
      }
}
class c extends b{
    constructor(){ //构造函数
            this.name = '李四'
      }
}
console.log(new c().name) //李四
console.log(new c().age) //18 b里面的18
console.log(new c().sex) //男 b里面的男
console.log(new c().addr) //湖南长沙 b里面的地址

b 继承 a c 继承 b c是否继承a （c是a的子类 c没有直接继承a）

闭包

主要依赖的点是里面的变量和参数不会被垃圾回收机制回收

函数的定义过程与执行过程

1.开辟一个存储空间来装代码块

2.预编译

3.将存储空间和预编译的空结合变成一个执行空间

4.找到这个执行空间进行执行

5.销毁这个执行空间 存储空间也会被销毁

如果里面返回的数据类型 为引用数据类型就存储空间不会被销毁（对象的存储空间和函数存储空间不在一个地方 保持引用关系）

闭包主要使用的以返回函数作为保持引号关系而不让回收机制回收的特点

闭包的满足条件

1.内部函数必须调用外部函数的变量或者参数

2.必须以返回函数作为对应的一种返回形式

闭包的特点

function fn(a){
    //参数a 这个参数a是不会被销毁的（坏处:内存占用）
    return function(){
        //访问到这个a
        console.log(a);
    }
}
console.log( fn('hello'));//调用外部函数 (好处:内部的变量不会被外部污染)

1.内部的函数可以访问外部的内容

2.外部不能访问内部函数的变量

2.1 优点 保证内部函数变量的私有性（不会被外部内容污染）

2.2 缺点 一直要保持对这个变量的引用（效率低）

3.里面的变量和参数不会被垃圾回收机制回收

3.1 优点 可以作为缓存

3.2 缺点 占用内存

闭包的应用案例

防抖

在一定时间范围内进入执行的函数 会被忽略掉只剩一个（避免函数重复调用）

// 防抖  避免函数的重复调用  只执行一次
// 电梯  隔10秒一个人 再隔10秒一个人  .... 电梯关门为20秒 乘坐的都是一个电梯 
// 应用场景 表单输入验证 等我有段时间没输入内容他就会验证
// setTimeout

function antishake(func,wait){//传入参数 为执行的方法 间隔的时间
    let timer = null //声明延时器对象为空
    return function(){
        clearTimeout(timer) //清除延时器
        timer = setTimeout(()=>{//延时器调用
            func()
        },wait)//区间内进来的只有一次执行
    }
}
let antishake1 = antishake(function(){
    console.log('hello');
},1000)
document.querySelector('div').onmouseenter = function(){
    antishake1()
}

节流

减少对应的函数执行次数 （连续多次的执行）

// 节流
//减少重复调用
//高铁站出租车只有一俩 如果有人在亮红灯 不能坐（让他走） 没有人绿灯（自己上去做）
//节流阀来控制节流 
function throttle(fn,wait){//执行的函数 等待的时间
    let timer = null //节流阀
    return function(){
        if(timer) return //null false 不是null结果就是true 如果上车了没有直接跳过 没有人我就上去
        timer = setTimeout(()=>{ //上车了
            fn()
            timer = null//做完以后节流阀设置null 人下车了
        },wait)
    }
}
let throttle1 = throttle(function(){
    console.log("我上车了");
},2000)
document.querySelector('div').onclick = function(){
    throttle1()
}

区别

// 节流和防抖的区别
防抖避免重复执行  只执行一次
节流 减少执行次数 执行多次

函数柯里化（拆）

将传入的函数拆分为多个偏函数 避免重复的传参 以及 节省参数传递的过程 提高了效率

//函数柯里化 其实就是函数颗粒化 将一个函数变成一个个颗粒可以组装
// 就是这个里面的多个参数 将他变成一个个的函数来传递这个参数
function fnSum(a,b,c){//求和函数
    return a+b+c
}
//简单柯里化 他就是使用了一个函数来改造原本的函数
function curry(fn){
    return function(a){
        return function(b){
            return function(c){
                return fn(a,b,c)
            }
        }
    }
}
//调用 避免了多余的无用参数传递
let fnCurry = curry(fnSum) //函数
console.log(fnCurry(1)(2)(3));//6
//改进柯里化函数
function curry1(fn){
    //接收一个后面的参数 除了fn的参数 arguments第一个函数传递
    let args = Array.prototype.slice.call(arguments,1) //arguments调用slice(1)
    return function(){ //arguments 第二个函数传递
        let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
        return fn.apply(this,newArg) // 传入所有的参数 将fn自动执行
    }
}
let fn2 = curry1(fnSum,1) //函数
console.log(fn2(2,3)); //6
// console.log(fn2(2)(3)); //错误 我们现在只套了俩层

//改进柯里化函数
function curry2(fn){
    //接收一个后面的参数 除了fn的参数
    let args = Array.prototype.slice.call(arguments,1)
    return function(){
        let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
        if(newArg.length < fn.length){ //参数没有到三个 fn.length获取传递的函数的参数个数
            return curry2.call(this,fn,...newArg) //又套了一个function
        }else{
            return fn.apply(this,newArg) //将内部函数自动指向 传入所有的参数
        } 
    }
}
let fn3 = curry2(fnSum) //函数
console.log( fn3(1,2,3));
console.log( fn3()()(1,2));//少一个参数 返回funtion 效率更高  可读性高
console.log( fn3());//少一个参数 返回funtion 效率更高  可读性高
console.log( fn3()()(1));//少一个参数 返回funtion 效率更高  可读性高

let fn4 = fn3(1)(2)
console.log(fn4(10)); // 1 + 2 + 10
console.log(fn4(15)); // 1 + 2 + 15

this

1.普通函数里面的this指向当前的调用者

2.箭头函数没有this 指向外面的对象

3.构造函数的this指向 当前的对象实例

利用关键词来更改this指向（更改function里面的this）

function fn(name){ //函数
    this.name = name
    console.log(this);
}
fn('李四') //this指向window
function Student(){
    this.name = 'hello'
    this.age = 18
}
let student = new Student()
//bind 里面传递的是对应指向的对象
fn.bind(student)('李四')
//call 里面传递的是指向的对象和参数
fn.call(student,'王五') //name参数王五 自动调用方法
//apply 里面传递时指向的对象及参数数组
fn.apply(student,['赵六']) //传递一个参数数组 自动调用方法

bind 绑定this指向的对象（参数为绑定的对象）

call 自动调用方法 参数1为绑定的对象 参数2为传递参数 …

apply 自动调用方法 参数1为绑定的对象 参数2为参数数组