JavaScript-面向对象简单讲解（重点）

面向对象是一种编程思想

对象的创建

1.字面量赋值

let obj = {}

2.使用new关键词创建

1.字面量赋值

let obj = {}

2.使用new关键词(使用new关键词创建的都是对象)

let newObj = new Object()
let date = new Date()  //创建一个日期对象
let array = new Array()  //创建一个数组对象

3.使用class 类 创建对象的模板

class Person{
    constructor(name,age){  //构造函数
        this.name = name
        this.age = age
    }
}
let person1 = new Person('Jack',18)  //创建一个对象，他的名字是jack,年龄18

凡是使用new关键词，后面的东西都是构造函数 内置构造函数

对象分为：内置对象，全局对象，自定义对象

对象里面包含两个内容：属性，方法

构造器模式

构造函数 this指向对象实例的

function PersonCopy(name,age){  //构造函数 this指向对象实例的
    this.name = name
    this.age = age
    this.eat = function(){
        console.log('吃饭')
    }
}
let person2 = new PersonCopy('tom',19)  //通过构造方法生成一个对象，this指向person2
let person3 = new PersonCopy('Rose',20) //通过构造方法生成一个对象，this指向person3
//获取里面的name属性
console.log(person2.age);
person2.eat()  //执行的person2的方法
person3.eat()  //执行的person3的方法

工厂模式

Object 是所有的对象的顶层对象

funciton person(name,age){
    let obj = new Object()
    obj.name = name
    obj.age = age
    return obj
}
//调用 不需要new关键词
let person1 = person('Jack',20)
console.log(person1,name)  //读取name属性
person1.eat = function(){
    console.log('吃饭');
}
person1.eat()  //调用eat

构造器模式和工厂模式的区别

1.首字母是否大写，构造函数首字母必须大写

2.工厂模式，不关注对象的细节，它里面没有this关键词

3.构造器模式，更好的体现了面对对象的细节及相关要素

prototype讲解（所有函数里面都有prototype，属于函数的属性）

prototype 这个空间是一个对象，对象就可以存放对应的内容

将方法设置到prototype里面，这个时候对应的方法就只会有一个

对于属性一般通过this直接设置，而对于方法使用prototype来设置

function Person(){  //无参的构造函数
    
}
//往这个对象里面存放一个age属性
Person.prototype.age = '18' 
Person.prototype.eat = function(){
    console.log('吃饭')
}
let person1 = new Person()
let person2 = new Person()
console.log(person1.age === person2.age);  //ture 设置进prototype里面的内容，通过对象来读只会有一个

__proto__讲解（属于对象的属性，对象的__proto__指向对应的构造函数的prototype）

let person1 = new Person()
console.log(Person.prototype == person1.__proto__);  //ture
//对象的__proto__指向对应的构造函数的prototype
​
let person2 = new Person()
console.log(person2.__proto__ == person1.__proto__);  //ture
person2.eat()  //先去找自己的__proto__指向的构造函数prototype（实际调用的是prototype里面的eat）
​
原型链：
// 对应的对象的属性 先去找自己的__proto__里面是否存在 找到了就读取，找不到 就会向上找（找父亲）（继承） 直到找到或者找不到 找不到一直向上到Object就停止（找的过程叫做原型链）
Object.prototype.name = 'lisi'  //给顶层对象Object的prototype里面设置一个name属性
let person3 = new Person()
console.log(person3.name);  ///person3的__proto__里面是没有name属性 他就会往上去找 找到Object里面prototype
console.log(person3.__proto__.constructor); //获取构造函数
let person4 = new person3.__proto__.constructor() //利用这个构造函数 再new一个对象
console.log(person4.name);//lisi
person4.age = 18  //构造函数是没有的 不会被添加到构造函数 age属于对象本身的
console.log(person4.__proto__.age);//undefined
person4.name = 'tom' //给对象的name属性赋值
console.log(person4.__proto__.name);  //lisi
//对象设置属性的时候，不遵从原型链
//找有没有这个属性，有的话进行修改，没有进行添加

面向对象的基本特性

三大基本特性

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

2.继承： class类 的继承，获取父类一切的非私有的方法和属性

好处：减少了代码的冗余，提高了书写代码的效率及复用性

3.多态：一个物质的多种形态，子类是父类形态的体现

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

闭包（重点）

闭包：函数里面嵌套函数，可以多层嵌套，返回值为函数

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

好处

1.可以让一个变量长期驻扎在内存当中不被释放（缓存的建立，访问速度快）

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

3.私有成员的存在，无法被外部调用，只有自己内部使用

function fn(a){
    //参数a,这个a是不会被销毁的
    return function(){
        //访问这个a 
        console.log(a)
    }
}
console.log(fn('hello'));  //调用外部函数，返回内部的函数
fn('hello')() // 调用内部函数  返回值为hello 

闭包可以完成的功能

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

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结果是true
        timer = setTimeout(()=>{
            fn()
            timer = null   //做完以后节流阀设置null
        },wait)
    }   
}
let throttle1 = throttle(function(){
    console.log('已经完成')
}，2000)
docunment.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))  //将内部函数的参数和外部参数合并
        if(newArg.length<fn.length){  //参数没有到三个 fn.length获取需要传递函数的参数个数
            return curry2.call(this,fn,...newArg)
        }else{
            return fn.apply(this.newArg)  //将内部函数自动指向  传入所有的参数
        }
    }
}
let fn3 = curry2(fnSum)
console.log(fn3(1,2,3))
console.log(fn3()()(1,2));   //少一个参数 返回function 效率更高 可读性更高
​
function fn1(){
    let i = 0
    return function(){
        i++
        return i
    }
}
console.log(fn1()())  //1  每次从0开始  结果就是1

call 和bind 及apply 讲解

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

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

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()
fn.bind(student)('李四')  //bind 里面传递的是对应指向的对象
fn.call(student,'王五') //name参数王五 自动调用方法
fn.apply(student,['赵六']) //传递一个参数数组 自动调用方法