js实例教程-JavaScript中class类的静态方法、普通方法与构造方法详解

发布时间:2018-12-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-JavaScript中class类的静态方法、普通方法与构造方法详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

在js的类中,可分为三种方法,constructor构造方法、静态方法与普通方法

一、constructor构造方法

1.概念

类的作用在于构建对象,而constructor构造方法就是用于构建对象实例。

2.使用方法

在使用new关键字生成对象时,constructor方法会被执行,最终return的结果就是生成的对象实例。 当一个类没有constructor方法时会自动生成一个空的constructor方法,返回结果为空。 用new关键字实例化对象时传入的参数会做为constructor构造函数的参数传入。

 class Point {     constructor(name) {         console.LOG('Instantiate objects:'+ name);     } }  new Point('testObj'); //Instantiate objects:testObj

二、普通方法

1.概念

class类的普通方法可以看作是构造函数的另一种写法,相当于在类的PRototyPE属性上上边定义方法。

 class Point {     toString() {         // ...     } }  //等同于 class Point { }  Point.prototype={     toString() {         // ...     } }

2.使用方法

(1).该类实例化的对象上使用此方法
 class Point {     toString() {         // ...     } }  let obj = new Point(); obj.toString();
(2).直接通过该类的prototype调用此方法
 class Point {     toString() {         // ...     } }  Point.prototype.toString();
(3).通过子类的__proto__调用
 class Foo {   commonMethod() {     return 'hello';   } }  class Bar extends Foo { }  Bar.__proto__.prototype.COMmonMethod();

想要弄懂这个原理请先弄懂ES5中原型链、隐式原型链相关知识点。

三、静态方法

1.概念

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用(通过类调用指在该类之外调用),这就称为“静态方法”。

2.使用方法

静态方法只能在当前类上调用,不能被该类的实例对象调用。父类的静态方法可以被子类继承。

因此静态方法被调用的方式一共有三种(三种调用方式都在下面一段代码中使用到了,请耐心阅读):

- 父类直接调用

- 子类继承父类后调用

- 子类通过super对象调用

 class Foo {   static classMethod() {     return 'hello';   } }  Foo.classMethod();  //hello  class Bar extends Foo { }  class Cla extends Foo {     return super.classMethod(); //hello }  Bar.classMethod();  //hello
@H_304_118@
对比 静态方法 普通方法 构造方法
关键字 static constructor
使用场景 声明一个仅供当前类或当前类的子类使用的方法 创建实例化对象可直接调用的方法 在用new关键字通过此类实例化对象时执行的方法
使用对象 当前类或当前类的子类 通过该类或该类的子类实例化生成的对象 该类自身
调用方法 1.父类直接调用
2.子类继承父类后调用
3.子类通过super对象调用
1.通过该类及该类的子类实例生成的对象调用
2.该类通过prototype调用
3.该类的子类通过__proto__隐式原型链调用
1.该类实例化对象时调
2.该类的子类使用super关键字调用

注:在class类中,它的静态属性与普通属性允许重名。但是不建议重名,这里就不给出demo了。

END

在js的类中,可分为三种方法,constructor构造方法、静态方法与普通方法。

一、constructor构造方法

1.概念

类的作用在于构建对象,而constructor构造方法就是用于构建对象实例。

2.使用方法

在使用new关键字生成对象时,constructor方法会被执行,最终return的结果就是生成的对象实例。 当一个类没有constructor方法时会自动生成一个空的constructor方法,返回结果为空。 用new关键字实例化对象时传入的参数会做为constructor构造函数的参数传入。

 class Point {     constructor(name) {         console.log('Instantiate objects:'+ name);     } }  new Point('testObj'); //Instantiate objects:testObj

二、普通方法

1.概念

class类的普通方法可以看作是构造函数的另一种写法,相当于在类的prototype属性上上边定义方法。

 class Point {     toString() {         // ...     } }  //等同于 class Point { }  Point.prototype={     toString() {         // ...     } }

2.使用方法

(1).该类实例化的对象上使用此方法
 class Point {     toString() {         // ...     } }  let obj = new Point(); obj.toString();
(2).直接通过该类的prototype调用此方法
 class Point {     toString() {         // ...     } }  Point.prototype.toString();
(3).通过子类的__proto__调用
 class Foo {   commonMethod() {     return 'hello';   } }  class Bar extends Foo { }  Bar.__proto__.prototype.commonMethod();

想要弄懂这个原理请先弄懂ES5中原型链、隐式原型链相关知识点。

三、静态方法

1.概念

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用(通过类调用指在该类之外调用),这就称为“静态方法”。

2.使用方法

静态方法只能在当前类上调用,不能被该类的实例对象调用。父类的静态方法可以被子类继承。

因此静态方法被调用的方式一共有三种(三种调用方式都在下面一段代码中使用到了,请耐心阅读):

- 父类直接调用

- 子类继承父类后调用

- 子类通过super对象调用

 class Foo {   static classMethod() {     return 'hello';   } }  Foo.classMethod();  //hello  class Bar extends Foo { }  class Cla extends Foo {     return super.classMethod(); //hello }  Bar.classMethod();  //hello
对比 静态方法 普通方法 构造方法
关键字 static constructor
使用场景 声明一个仅供当前类或当前类的子类使用的方法 创建实例化对象可直接调用的方法 在用new关键字通过此类实例化对象时执行的方法
使用对象 当前类或当前类的子类 通过该类或该类的子类实例化生成的对象 该类自身
调用方法 1.父类直接调用
2.子类继承父类后调用
3.子类通过super对象调用
1.通过该类及该类的子类实例生成的对象调用
2.该类通过prototype调用
3.该类的子类通过__proto__隐式原型链调用
1.该类实例化对象时调用
2.该类的子类使用super关键字调用

注:在class类中,它的静态属性与普通属性允许重名。但是不建议重名,这里就不给出demo了。

END

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JavaScript中class类的静态方法、普通方法与构造方法详解全部内容,希望文章能够帮你解决js实例教程-JavaScript中class类的静态方法、普通方法与构造方法详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。