首页 > 编程语言> 文章详细

JavaScript学习笔记（二十八）——class类

2022-07-12 23:32:25 阅读：187 来源： 互联网

标签：console log 二十八子类 JavaScript constructor new class

class 类

1、理解：

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

js是什么语言？

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

面向对象：（类实例对象继承封装多态等特点）
基于面向对象设计：本质没有继承类等语法，但是按照他自己的语法特征（比如：原型）
单线程：代码只能一个业务一个业务的执行。
静态：例如： var a={ }; var re=a*20；这一行报错，但是前一行不会提前知道，还是执行了。
脚本语言：嵌入式语言，特点：灵活

概述

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
类不可重复声明。
类名约定首字母大写。
类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错。

2、类定义

申明类

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

匿名类

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();  //内部类

标签：console,log,二十八,子类,JavaScript,constructor,new,class
来源： https://www.cnblogs.com/xiaohuliya/p/16472206.html

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

ICode9