在《JavaScript(13):创建对象的8种方法》中,我总结了8种创建对象的方法,现在几乎都忘记得差不多了,如果不翻看以前的资料,还真想不起来有那些创建方法,Javascript的语言元素看似不多,但要灵活掌握与运用的确比其他语言要费功夫的多,也因为要熟悉各种的语法糖。
今天在学习ECMAScript6的关键字的时候,想起了以前的创建方法,因为要对比着学,所以就尝试着使用ECMAScript5的方法来创建对象。
输出结果:
注意点:
⑴ 使用ECMAScript5语法在创建对象的时候,需要注意的是静态属性和静态方法的创建,因为它们都只属于类而不属于对象,在具体对象中调用静态属性和静态方法程序会报错。
p1.BaseSubject();//Uncaught TypeError: p1.BaseSubject is not a function console.log(p1.counter);//undefined
⑵ 在写对象的属性和方法的时候,将这些属性和方法写到person的函数体中,因为这些都是new动作要执行的。
(3) 在写类的静态属性和静态方法的时候,最好将这些方法和属性写到person的函数体外,因为这些属性和方法属于类独有的。
(4) 在原型链上挂载属性和方法,所有继承都可以使用。
使用EAMCScript6的class来创建类就很方便了,与其他的语言差不多了。
class Student{ static Type='理科生'; static counter=0; constructor(name,age){ this.name=name; this.age=age; Student.counter=Student.counter+1; } static BaseSubject(){ console.log("基础科目:语文。"); } static Register(){ Student.counter=Student.counter+1; } Subject(){ console.log("特长科目:数理化。"); } SelfIntroduction(){ console.log(`我是${Student.Type}的第${Student.counter}号学生,我叫${this.name},今年${this.age}岁。`); } } let p1=new Student("小明",12); p1.Subject(); Student.BaseSubject(); p1.SelfIntroduction(); console.log('------------------------------') let p2=new Student("小宋",9); p2.Subject(); Student.BaseSubject(); p2.SelfIntroduction();
输出结果:
注意点:
(1) 使用class来声明类
(2) 使用constructor来定义初始化函数(只能有一个)
(3) 使用static定义静态属性和静态方法
(4) 使用extends继承父类,父类的方法可以重写,使用super调用父类的构造方法
class Phone{ constructor(brand,model){ this.brand=brand; this.model=model; } communication(){ console.log(`我是${this.brand}的${this.model}手机,可以拨打语音电话和发短信。`); } } class SmartPhone extends Phone{ constructor(brand,model,price){ super(brand,model); this.price=price; } playgame(){ console.log(`我是${this.brand}的${this.model}手机,可以玩游戏。`); } } const RongYao=new SmartPhone('华为','Mate10',2999); RongYao.communication(); RongYao.playgame(); //输出结果: 我是华为的Mate10手机,可以拨打语音电话、视频电话、发短信、上网。 ES6_Class1.html:112 我是华为的Mate10手机,可以玩游戏。
(5) 私有属性,get和set方法
class Phone{ #Type; get Type(){ return this.#Type; } set Type(value){ this.#Type=value; } constructor(brand,model){ this.brand=brand; this.model=model; } communication(){ console.log(`我是${this.brand}的${this.model}手机,是${this.#Type},可以拨打语音电话和发短信。`); } } const CECT=new Phone('CECT','800'); CECT.Type="智能手机"; CECT.communication(); //输出结果 我是CECT的800手机,是智能手机,可以拨打语音电话和发短信。