JavaScript学习笔记(二十八)——class类


class 类

1、理解:

es6中为了更好的把js设计出面向对象的语言的语法特征,把es5中new 函数名() 又是类又是构造函数分离出来,创造了class。

js是什么语言?

js是一个基于面向对象设计单线程静态脚本语言

  1. 面向对象:(类 实例对象 继承 封装 多态 等特点)

  2. 基于面向对象设计:本质没有继承 类 等语法,但是按照他自己的语法特征(比如:原型)

  3. 单线程:代码只能一个业务一个业务的执行。

  4. 静态:例如: var a={ }; var re=a*20;这一行报错,但是前一行不会提前知道,还是执行了。

  5. 脚本语言:嵌入式语言,特点:灵活

概述
  • 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类

  • class 的本质是 function。

  • 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

  • 类不可重复声明。

  • 类名约定首字母大写。

  • 类定义不会被提升,这意味着必须在访问前对类进行定义,否则就会报错。

2、类定义

  1. 申明类

 var fn=class{ }
 console.log(fn)
  1. 匿名类

var fn=class{}
var f1=new fn()
console.log(f1)

js没有类,是原型思想,但是不能用函数的语法来写。

3、类主体

属性:es6中的类中不能直接定义变量,必须定义在constructor中。

class People{
    constructor(){
        this.a=100;
    }
}
let p = new People();
console.log(p.a);

方法:

2、默认方法:constructor,创建类的对象时被调用。一个类中有且仅有一个构造方法。

class People {
    constructor() {
        console.log("构造方法");
    }
} 
new People(); //将执行constructor方法

2、原型方法:不使用function关键字,通过“对象.原型方法”调用。

class People {
    say(world) {
        console.log(`say ${world}`);
    }
    add(a, b) {
        console.log(a + b);
    }
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3

3、静态方法:使用static修饰,调用时不需要创建对象,直接通过“类名.静态方法”调用

class People {
    static sum(a, b) {
        console.log(a + b);
    }
}
People.sum(1, 2);

4、类的继承

先来看个例子:

class parent {
    constructor() {
        this.a = 100;
        console.log("hello");
    }
    run(m) {
        console.log(`跑了${m}分钟`);
    }
    static eat(food) {
        console.log(`吃了${food}`);
    }
}
​
​
​
class Son extends parent {
    constructor() {
        super();//调用父类构造器,必须存在,且位于子类构造器第一行的位置
        this.b = 200;
    }
    set() {
        console.log('set.......');
    }
}
​
let son1 = new Son();
console.log(son1.a, son1.b);
son1.run('5');
parent.eat('饺子');
​

在上述例子中:子类Son及有自己的方法,也继承到了父类parent的方法属性。

总结:

  • 类的继承解决了代码的复用问题;

  • 使用extends关键字实现继承;

  • 子类可以继承父类中所有(包括静态)的方法和属性;

  • 子类只能继承一个父类(单继承),一个父类可以有多个子类;

  • 子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行

  • 子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖);

5、内部类

属于外部类的成员,必须通过 “外部类.内部类”访问。

// 外部类
class Outer {
    constructor() {
         console.log("外部类");
    }
}
// 内部类
Outer.Inner = class {
    constructor() {
         console.log("内部类");
    }
}     
new Outer();   //外部类
new Outer.Inner();  //内部类

 

原创文章,作者:,如若转载,请注明出处:https://blog.ytso.com/273904.html

(0)
上一篇 2022年7月12日
下一篇 2022年7月13日

相关推荐

发表回复

登录后才能评论