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