js(class)
1.构造函数
<script>
class Runoob{
constructor(name,url){
this.name = name;
this.url = url;
}
}
let site = new Runoob("names","hello"); //使用new关键字来创建对象,创建对象时会自动调用构造函数方法constructor():构造方法用于初始化对象属性
document.getElementById("demo").innerHTML =
site.name + ": " + site.url;
</script>
// 未命名/匿名类
<script>
let Runoobs = class {
constructor(name, url) {
this.name = name;
this.url = url;
}
};
var y = new Runoobs("jim","www")
document.write(y.url)
</script>
// 命名类
<script>
let Runoobd = class Runoob2{
constructor(name,url){
this.name = name;
this.url = url;
}
}
var z = new Runoobd("hi","alibaba")
document.write(z.name)
</script>
2.类的方法传参
<h1>完美世界</h1>
<p id="demo">name</p>
<script>
class Runoob{
constructor(name,year){
this.name = name;
this.year = year;
}
age(x){
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear(); //定义参数
let runoob = new Runoob("name",2020); //定义对象,this传参
document.getElementById("demo").innerHTML = runoob.age(year); //传参
</script>
3.类的继承
JavaScript 类继承使用 extends 关键字。
<p id="demo">name</p>
<script>
class site{
constructor(name){
this.sitename = name;
}
present(){
return "L love " + this.sitename;
}
}
class Runoob extends site{
constructor(name,age){
super(name); //"super" 方法用于调用父类的构造函数,这样就可以访问父类的属性和方法。
this.age = age;
}
show(){
return this.present() + ", it created in " + this.age + " year";
}
}
let noob = new Runoob("jim",2032);
document.getElementById("demo").innerHTML = noob.show();
</script>
4. get 和 set使用
<p id="demo"></p>
<script>
class Runoob {
constructor(name) {
this._sitename = name;
}
set sitename(x) {
this._sitename = x;
}
get sitename() {
return this._sitename;
}
}
let noob = new Runoob("jim");
noob.sitename = "RUNOOB"; //如果set设置,此定义无效,输出仍为“jim”
document.getElementById("demo").innerHTML = noob.sitename; //调用函数
</script>
5.静态方法
<p id="demo">name</p>
<p>"noob" 对象可以作为参数传递给静态方法。</p> <script> class Runoob{ constructor(name){ this.name = name; } static hello(x){ return "hello " + x.name; } } let noob = new Runoob("tieto"); document.getElementById("demo").innerHTML = Runoob.hello(noob);//不能通过实例化的对象调用静态方法即noob.hello(),实例化对象可用于参数传递
</script>
浙公网安备 33010602011771号