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>

  

posted @ 2022-09-20 17:58  JASON_yul  阅读(64)  评论(0)    收藏  举报