面对对象的三大基本特性，闭包

lz010123

于 2022-04-22 20:20:21 发布

阅读量86

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lz010123/article/details/124331497

版权

面对对象的三大基本特性，闭包

封装将对应的属性的行为（方法）抽取并构成一个对象

继承 class类的继承 extend继承关键词

class Person{
    constructor(){ //构造函数
        this.name = '张三'
        this.eat = function(){
            console.log('干饭');
        }
    }
}

使用Student来继承Person 获取父类一切非私有的方法和属性

class Student extends 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的属性 张三
student.eat() //eat继承于父类  指向Person的eat方法

继承最大的好处减少了代码冗余提高了书写代码的效率及复用性

多态：重写子类重写父类，重载

重写是多态的特性（一个物质的多种形态子类是父类形态的体现龙生九子）

闭包

函数里面嵌套函数可以多层嵌套返回值函数

内部函数可以调用外部函数的内容作用域链

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

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

function fn1(){
    let i = 0 
    return function(){
        i++
        return i
    }
}
console.log(fn1()());//1 每次从0开始 结果就是1
console.log(fn1()());//1
console.log(fn1()());//1
let a = fn1() //调用一次 i = 0
console.log(a());//i = i++ ==>1
console.log(a())//i = i++ ==>2
console.log(a())//i = i++ ==>3

好处

可以让一个变量长期驻扎在内存当中不被释放(缓存的建立访问速度快) //坏处：内存占用

避免全局变量的污染, 和全局变量不同, 闭包中的变量无法被外部使用

私有成员的存在, 无法被外部调用, 只可以自己内部使用

闭包可以完成的功能

<head>
    <style>
        div{
            width:100px;
            height:100px
			background:red;
        }
    </style>
</head>
<body>
    <div> </div>
</body>

防抖避免函数重复调用只执行一次

应用场景表单输入验证等我有段时间没输入内容他就会验证

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的参数
    let args = Array.prototype.slice.call(arguments,1)
    return function(){
        let newArg = args.concat(Array.from(arguments)) //将内部函数的参数和外部的参数合并
        return fn.apply(this,newArg) //将内部函数自动指向 传入所有的参数
    }
}
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));//6
console.log( fn3(1)(2,3))//6
console.log( fn3()()(1,2));//少一个参数 返回funtion 效率更高  可读性高
console.log( fn3())//少一个参数 返回funtion 效率更高  可读性高

bind call及apply

bind 里面传递的是对应指向的对象

call 里面传递的是指向的对象和参数

apply 里面传递时指向的对象及参数数组

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,['赵六']) //传递一个参数数组 自动调用方法