es6中为了更好的把js设计出面向对象的语言的语法特征,把es5中new 函数名() 又是类又是构造函数分离出来,创造了class。
js是什么语言?
js是一个基于面向对象设计的单线程的静态的脚本语言。
面向对象:(类 实例对象 继承 封装 多态 等特点)
基于面向对象设计:本质没有继承 类 等语法,但是按照他自己的语法特征(比如:原型)
单线程:代码只能一个业务一个业务的执行。
静态:例如: var a={ }; var re=a*20;这一行报错,但是前一行不会提前知道,还是执行了。
脚本语言:嵌入式语言,特点:灵活
在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类不可重复声明。
类名约定首字母大写。
类定义不会被提升,这意味着必须在访问前对类进行定义,否则就会报错。
申明类
var fn=class{ } console.log(fn)
匿名类
var fn=class{} var f1=new fn() console.log(f1)
js没有类,是原型思想,但是不能用函数的语法来写。
属性: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);
先来看个例子:
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()来指定调用父类的构造方法,并且位于子类构造方法中的第一行;
子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖);
属于外部类的成员,必须通过 “外部类.内部类”访问。
// 外部类 class Outer { constructor() { console.log("外部类"); } } // 内部类 Outer.Inner = class { constructor() { console.log("内部类"); } } new Outer(); //外部类 new Outer.Inner(); //内部类