小白教程
所有教程
关于
Search
172.69.59.105
172.69.59.105
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Jsref class super”的源代码
本页内容
上一节:
Jsref_class_static
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:super}}[[Category:js class intro|4]] = JavaScript 类(class) super 关键字 = [[js class intro|JavaScript 类(class)]] 以下实例创建的类 "xiaoBai",并使用 super 调用父类 "Site" 的构造方法 : <sample title="" desc="" lang="html" hererun="1"> class Site { constructor(name) { this.sitename = name; } present() { return '我喜欢' + this.sitename; } } class xiaoBai extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', 它创建了 ' + this.age + ' 年。'; } } let noob = new xiaoBai("小白教程", 5); document.getElementById("demo").innerHTML = noob.show(); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 类继承</h2> <p>JavaScript 类继承使用 extends 关键字。</p> <p>"super" 方法用于调用父类的构造函数。</p> <p id="demo"></p> <script> class Site { constructor(name) { this.sitename = name; } present() { return '我喜欢' + this.sitename; } } class xiaoBai extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', 它创建了 ' + this.age + ' 年。'; } } let noob = new xiaoBai("小白教程", 5); document.getElementById("demo").innerHTML = noob.show(); </script> </body> </html> </run> == 定义和用法 == super 关键字用于访问和调用一个对象的父对象上的函数。。 在构造函数中使用时,super关键字将单独出现,并且必须在使用 this 关键字之前使用。super 关键字也可以用来调用父对象上的函数。 == 语法 == <pre>super(arguments); // 调用父构造函数 super.parentMethod(arguments); // 调用父方法 </pre> == 技术细节 == {| class="table table-striped table-hover" | JavaScript 版本: | ECMAScript 2015 (ES6) |} == 浏览器支持 == super 是 ECMAScript6 (ES6) 特性。 ES6 (JavaScript 2015) 支持目前所有主流的浏览器。 {| class="table table-striped table-hover" ! Chrome ! Edge ! Firefox ! Safari ! Opera |- | Chrome | Edge | Firefox | Safari | Opera |- | Yes | Yes | Yes | Yes | Yes |} Internet Explorer 11 或更旧版本的 IE 不支持 super 关键字。 == 更多实例 == 在类中使用 super: <sample title="" desc="" lang="html" hererun="1"> class Polygon { constructor(height, width) { this.name = 'Rectangle'; this.height = height; this.width = width; } sayName() { return 'Hi, I am a ', this.name + '.'; } get area() { return this.height * this.width; } set area(value) { this._area = value; } } class Square extends Polygon { constructor(length) { // 这里,它调用父类的构造函数的, // 作为 Polygon 的 height, width super(length, length); this.height; // 需要放在 super 后面,不然引发 ReferenceErro // 注意:在派生的类中,在你可以使用'this'之前,必须先调用 super()。 // 忽略这,这将导致引用错误。 this.name = 'Square'; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 类继承</h2> <p>JavaScript 类继承使用 extends 关键字。</p> <p>"super" 方法用于调用父类的构造函数。</p> <p id="demo"></p> <p id="demo2"></p> <script> class Polygon { constructor(height, width) { this.name = 'Rectangle'; this.height = height; this.width = width; } sayName() { return 'Hi, I am a ', this.name + '.'; } get area() { return this.height * this.width; } set area(value) { this._area = value; } } class Square extends Polygon { constructor(length) { // 这里,它调用父类的构造函数的, // 作为 Polygon 的 height, width super(length, length); this.height; // 需要放在 super 后面,不然引发 ReferenceErro // 注意:在派生的类中,在你可以使用'this'之前,必须先调用 super()。 // 忽略这,这将导致引用错误。 this.name = 'Square'; } } let s = new Square( 5 ); document.getElementById("demo").innerHTML = s.sayName(); document.getElementById("demo2").innerHTML = s.area; </script> </body> </html> </run> 用 super 调用父类的静态方法: <sample title="" desc="" lang="html" hererun="1"> class Rectangle { constructor() {} static logNbSides() { return 'I have 4 sides'; } } class Square extends Rectangle { constructor() {} static logDescription() { return super.logNbSides() + ' which are all equal'; } } Square.logDescription(); // 'I have 4 sides which are all equal' </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> </head> <body> <h2>JavaScript 类继承</h2> <p>JavaScript 类继承使用 extends 关键字。</p> <p>"super" 方法用于调用父类的静态方法。</p> <p id="demo"></p> <p id="demo2"></p> <script> class Rectangle { constructor() {} static logNbSides() { return 'I have 4 sides'; } } class Square extends Rectangle { constructor() {} static logDescription() { return super.logNbSides() + ' which are all equal'; } } document.getElementById("demo").innerHTML = Square.logDescription(); // 'I have 4 sides which are all equal' </script> </body> </html> </run> [[js class intro|JavaScript 类(class)]]
返回至“
Jsref class super
”。
上一节:
Jsref_class_static