html JS.Objects.Classes.JavaScript OOP:一个简单的ES6类

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html JS.Objects.Classes.JavaScript OOP:一个简单的ES6类相关的知识,希望对你有一定的参考价值。

class Hero {
  constructor(name, side) {
    this.name = name;
    this.side = side;   
  }
  
  speak() {
    return "<p>My name is " + this.name +
      ", I'm with the " + this.side + ".</p>";
  }
}

var darkVador = new Hero("Dark Vador", "empire");
var luke = new Hero("Luke Skywalker", "rebels");
var ianSolo = new Hero("Ian Solo", "rebels");

function makeHeroesSpeak() {
  document.body.innerHTML += darkVador.speak();
   document.body.innerHTML += luke.speak();
   document.body.innerHTML += ianSolo.speak();
}

JS.Objects.Classes.JavaScript OOP:  a simple ES6 class
------------------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/ZMgLOy) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/ZMgLOy/license).
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript OOP: create objects with an ES6 class</title>
  </head>
  <body>
    <p>Look at the JS code. This time we created multiple objects using an ES6 class named Hero.</p>
 <p>   
   <button onclick='makeHeroesSpeak();'>Make Star Wars heroes speak!</button>
    </p>
  
    </body>
</html>

以上是关于html JS.Objects.Classes.JavaScript OOP:一个简单的ES6类的主要内容,如果未能解决你的问题,请参考以下文章

html Html模板/ Html Boilerplate |标签HTML

html里怎么引用一个html的头部

html5与传统html区别

html4和html5的区别

HTML元素

head标签怎么给多个html引用