当前位置: 首页 > Web前端 > HTML

【JS基础系列】es6继承的具体使用

时间:2023-04-02 12:25:52 HTML

今天是系列的第五篇,主要说说上篇文章遗留下来的es6继承的具体使用。因为es6继承中使用了一些语法糖,写法与es5继承的写法有很大区别,所以特意提一下。言归正传,下面我将解释一些对应关键字的用法,并结合一些例子进行说明。构造函数定义:它是类的构造函数。用法:使用new实例化对象时自动调用该方法。注意:一个类必须有一个构造方法,如果没有显式定义,默认会添加一个构造方法。所以即使不加构造函数,也会有默认的构造函数。一般构造方法返回当前实例对象this,但也可以指定构造方法返回一个全新的对象,这样返回的实例对象就不是该类的实例。例如:classDemo{say(){console.log('Iamcreatinganexample')}}constdemo=newDemo()console.log(demo)//demo{__proto__:{constructor:###,say:function(){###}}}demo.say()//我正在创建一个例子在上面的例子中,我创建了一个Demo类,并没有创建构造方法。打印实例化对象demo,可以看到对象的__proto__方法下有constructor属性和say方法,所以可以证明上面的结论:当constructor方法没有显式定义的时候,默认会加上一个returnthis(指向实例构造函数的指针)。super定义:它是一个关键字,用于访问父类对象上的函数。用法:它可以用作函数或对象。也就是说,有两种使用super(...)或super.xxx(...)的方法。单独调用super作为函数使用会报错(看例子):如果想让实例对象使用构造函数中的属性,必须在构造函数中调用super方法,因为子类没有自己的thisobject,而是继承自父类this对象,super代表父类的构造函数。super虽然代表的是父类的构造函数,但是返回的是子类的实例,也就是super里面的this引用了子类。如果只想调用本类的原型方法,则不需要调用构造函数中的super方法。只需要在构造方法中手动返回一个值//无需调用超类Demo{constructor(){return1}say(){console.log('Icreatedademo')}}constdemo=newDemo()demo.say()//我创建了一个demo-用作对象:-在普通方法中,它指向父类的原型对象;所以在子类super.print()的方法中;指向父类原型上的方法。-在静态方法中,指向父类。但是因为super的两种用法,es6规定在使用的时候必须明确使用方法,比如单独一个console.log(super)就会报错。```//demo1,公共方法classA{constructor(){this.x=1}say(){console.log('speak')}}classBextendsA{constructor(){super();超级.x=3;//super指向父类的原型对象,原型对象中没有父类真正构造函数的属性console.log(super.x);//undefined//say是原型链方法上父类的原型,可以得到console.log(super.say===this.say);//真console.log(this.x);//3}}让b=newB();//demo2,static方法指向父类classA{staticsay(){console.log('speak')}}classBextendsA{constructor(){super();}staticaction(){super.say()}}B.action()//说```注意:super只能用两种方式:super()和super.###()。这很特别。如果直接使用super,比如console.log(super),会报错。static关键字创建静态方法。一个类相当于一个实例的原型,类中定义的所有方法都会被实例继承。如果在方法前加上static关键字,则表示该方法不会被实例继承,而是直接通过类调用。静态方法调用直接在类上进行,不能在类的实例上调用。静态方法通常用于创建实用程序/实用程序函数。new.target定义:检查函数或构造函数是否通过new操作符被调用。使用new.target的场景在通过new运算符初始化的函数或构造函数中,new.target返回对构造函数或函数的引用。在正常的函数调用中,new.target的值是未定义的。看个栗子:classA{constructor(name,age){this.name=namethis.age=ageconsole.log(new.target===A)//true}say(){//new.target===undefinedconsole.log(`我叫${this.name},今年${this.age}岁,看new.target的值:${new.target}`)}}consta=newA('小李',20)a.say()总结一下构造函数就是类的构造函数。当使用new实例化对象时,将自动调用此方法。super是用于访问父类对象上的函数的关键字。它可以用作函数或对象。即有super(…)或super.xxx(…)两种使用方式,单独调用super会报错。但是这两个super方法的指针不同,需要特别注意。当子类构造函数调用super()时,其内部的this指向子类作为对象:在普通方法中,它指向父类的原型对象;在静态方法中,指向关键字new.target检测父类static创建静态方法时是否通过new操作符调用了函数或构造函数。在构造函数中调用,指向构造函数或函数的应用;作为一个普通的函数,返回undefend://blog.csdn.net/xuxinwe...