Class类

2022-08-14 22:01:47 阅读：179 来源： 互联网

标签：console log age Person constructor new 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

标签：console,log,age,Person,constructor,new,Class
来源： https://www.cnblogs.com/sdcffsdc233/p/16586473.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9