es6之class（4）

àì夳堔傛蜴生んèń 2022-04-23 05:02 132阅读 0赞

传统的javascript中只有对象，没有类的概念，所以来看看es6呗

**1.传统构造函数示例**

//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.say = function () {
            return 'my name is ' + this.name +', and my age is '+this.age;
        }
        //通过构造函数创建对象，必须使用new运算符
        var obj = new Person('panzina',18);
        console.log(obj.say());
    
        //结果：my name is panzina, and my age is 18

**2.如果将之前的代码改为ES6的写法就会是这个样子：**

class Person{
           //constructor是一个构造方法，用来接收参数
           constructor(name,age){
               //this代表的是实例对象
               this.name = name;
               this.age = age;
           }
           //这是一个类的方法，注意不要加上function
           say() {
               return 'my name is ' + this.name + ', and my age is ' + this.age;
           }
       }
       var obj = new Person('panzina',18);
       console.log(obj.say());
    
        //结果：my name is panzina, and my age is 18

**3.由下面代码可以看出类实质上就是一个函数**。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法！

console.log(typeof Person);//function
    console.log(Person===Person.prototype.constructor);//true

**4.静态方法**

class Person{
           constructor(name,age){
               this.name = name;
               this.age = age;
           }
           
           //这个就是静态方法
           static isHuman(obj){
               return obj instanceof Person
           }
       }
       var p1 = new Person('panzina',18);
       console.log(Person.isHuman(p1))
    
       //结果：true

**5.静态属性**

class Person{
           constructor(name,age){
               this.name = name;
               this.age = age;
           }
    
           static isHuman(obj){
               return obj instanceof Person
           }
       }
    
       Person.staticProps = 'panzina';
       //不用创建实例，直接打印这个属性
        console.log(Person.staticProps);
    
        //结果：panzina

**6.继承**

class Person{
           constructor(name,age){
               this.name = name;
               this.age = age;
           }
    
           say(){
               console.log('hello '+this.name)
           }
    
           static isHuman(obj){
               return obj instanceof Person
           }
       }
    
       class Coder extends Person{
           constructor(name,age,money){
               //父类用的东西往这里面写
               super(name,age);
               //加的什么属性
               this.money = money
           }
           //改写父类的方法
           say(){
               console.log('hello '+this.name+',红包是：'+this.money)
           }
       }
       var c1 = new Coder('panzina',10,11111);
       console.log(c1)
        //调父类的方法
        c1.say();
       //结果：Coder {name: "panzina", age: 10, money: 11111}
       //      hello panzina,红包是：11111
    
       //验证父类的方法是否会因为子类修改了而修改
        var p1 = new Person('panpan',20);
        console.log(p1);
        p1.say();
       //结果：Person {name: "panpan", age: 20}
       //      hello panpan

es6之class（4）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读