Class类

class类

用于对象构建(类只是一个构建对象的容器) 调用这个class要使用关键词new

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法

• class修饰的类，类名首字母大写

• class不允许重复声明

• class里面的this只能出现在constructor( )中

• class里面的this指向当前实例化对象

• 在实例化过程中 即new的过程中，调用的constructor函数 跟其他函数无关（所以当前在constructor都会重新声明一次）

//类名首字母必须大写
class Person{
    constructor(){ //构造器
        //this必须在构造器里面使用
        this.age = 18 //类的属性
        this.sayHello = function(){ //类的方法
            console.log('hello')
        }
    }
}
var person = new Person() //构建对象
console.log(person.age); //18
person.sayHello() //hello
​
​
//类名首字母必须大写 class不能被重复定义
class Person1{
    //constrctor调用 new的过程 每一次new 里面的内容都会重新声明
    constructor(age=18,name='jack'){ //构造器
        //this必须在构造器里面使用 this是指向实例化的对象
        this.age = age //类的属性
        this.name = name
        this.sayHello = function(){ //类的方法
            console.log('hello')
        }
    }
    run(){//在函数里面可以访问对应的this
        console.log(this.name+'跑');
    }
}
//使用new 调用的对应构造器的时候 就是在实例化的过程 而产生的对象被称为实例化对象
var person = new Person1(18,'jack')
console.log(person); // age:18 name:jack sayHello:fn
var person1 = new Person1()
console.log(person1);
person1.run()
console.log( person1.sayHello == person.sayHello);//false constructor里面的东西执行两遍，故地址不同
console.log( person1.run == person.run);//true  constructor外的函数无法调用，故是同一个东西

extends关键词

extends 用于继承，会拥有父类所有的非私有的属性及方法

class Person{  //命名的名字首字母大写
    constructor(){
        this.age=18
    }
    run(){
        console.log('跑跑跑')
    }
}
//extends  关键词声明以后   在对应的constructor里面想要使用this 先写super()
class Son extends Person{
    constructor(){
        super() //指向父类的构造器construtor
        this.name='李四'  //不加super()则会报错
    }
}
var son =new Son()
console.log(son) //获取不到run

注意事项

• 在子类构造里面如果想要使用this，必须先使用super()

• super指向父类的构造器

• 子类无法获取构造器之外的函数

面向对象

概述：面向对象是一种编程思想，是将对应的过程替换为对应的对象，而不做去追求对应的过程实现。

面向过程就是从过程中产生行为，面向对象是从行为中找对象（找合适的对象做合适的事 情）

构建对象

使用new关键词 来实例化对象

利用类里面的构造器来构建对象（es6的） 类组件

class Person{
    constructor(age){  //构造器  实际就是一个构造函数
        this.age=age   
    }
}
//new 关键词构建
var person = new Person(18)   //18表示对上面属性值的一个具体描述，即实参
 class Person{
            constructor(snack){ //括号里可以不写
                this.likefoods =snack
                console.log(this);
            }
        }
        var person =new Person('Coke') //person{likefoods：‘Coke’}

函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。

首先需要声明你的类，然后再访问它，否则将调用函数写在前面代码将抛出 ReferenceError***

使用构造函数来构建（es3的） 函数组件

function Person(age){
    this.age=age
}
//new关键词构建
var person = new Person

构建函数构建的步骤

• 手动构建对象

• 手动添加属性

• 自动返回对象

 

使用工厂模式构建对象

function factory(age){
    //声明一个对象
    var obj=new Object()
    obj.age=age
    return obj
}
var person = factory(18)

工厂模式构建对象的步骤

• 手动初始化对象

• 手动给对象添加属性

• 手动将对象返回

不足：不能将细节补充 可以构建任何对象 instanceof 返回的值只能是Object

instanceof 表示当前这个对象是通过哪个实例构建的

//当前这个类的类型是否是Person类型
console.log(person instanceof Person); //false
console.log(person instanceof Object); //true

抽取对象

不会动的 抽为属性

会动的 抽成方法

class Tab{
constructor(element){
    //属性
    this.lis = element.querySelectorAll('ul>li')//里面的li
    this.content = element.querySelectorAll('div>div') //显示的内容
    //调用函数
    this.handlerCick()
}
toggle(li){ //切换效果
    //排他思想 先将所有的全部设置一个值 然后再给自己设置一个值
    Array.from(this.lis).forEach((li)=>{
        li.className = ""
    })
    li.className = "selected"
    //排他
    Array.from(this.content).forEach(div=>{
    div.style.display = "none"
    })
    let index = Array.from(this.lis).findIndex(v=>{
        return v == li
    })
    this.content[index].style.display = 'block'
}
handlerCick(){ //处理点击事件
    var self = this
    Array.from(this.lis).forEach((li)=>{
        li.onclick = function(){
          self.toggle(this)
        }
    })
   }
}

static静态修饰

static 修饰的函数 使用类名.方法名

static 修饰的函数 只会初始化一次 （每次调用的是同一个函数）

class Person{
    constructor(){
    
    }
    run(){
        console.log('run');
    }
    static sayHello(){
        console.log('hello');
    }
}
new Person().run()
//静态函数 调用 使用类名.方法名 （static修饰的函数 声明一次）
Person.sayHello()
Person.sayHello()
Person.sayHello()
Person.sayHello()
console.log(Person.sayHello == Person.sayHello);//true