es6类和对象

来源：互联网发布：起点数据库编辑：程序博客网时间：2024/06/04 22:47

一、类的定义

class Parent{
       constructor(name="zhang"){
           this.name=name;
       }
   }
 
   let shi=new Parent("v");//类的实例
   console.log("constructor",shi);

二，类的继承

//继承
class Parent{
       constructor(name="zhang"){
           this.name=name;
       }
   }
 
    class Child extends Parent{  // extends 用于继承父类Child继承 Parent
 
    }
 
    console.log("extend", new Child());
 
//继承传递参数，child向parent传递参数，改变parent的默认参数

class Parent{
       constructor(name="zhang"){
           this.name=name;
       }
   }
 
    class Child extends Parent{
         constructor(name="child"){
             super(name);             //super必须放在设置改变参数的前面
             this.type="child"
         }
    }
 
    console.log("extend", new Child("hello"));
}


//extend Child {name: "hello", type: "child"}

class Female extends Person {    constructor(name){        super(name); //调用父类的，调用之后，子类才有this        this.gender = 'female';    }    sayHello(){        return super.sayHello() + ', I am ' + this.gender;     }}

子类必须在父类的构造函数中调用super()，这样才有this对象，因为this对象是从父类继承下来的。而要在子类中调用父类的方法，用super关键词可指代父类。

ES5中类继承的关系是相反的，先有子类的this，然后用父类的方法应用在this上。

ES6类继承子类的this是从父类继承下来的这个特性，使得在ES6中可以构造原生数据结构的子类，这是ES5无法做到的。

三、getter 、setter 方法

class Parent{
       constructor(name="zhang"){
           this.name=name;
       }
   
    get long(){
        return "mk"+this.name     //属性在读取时前面加上‘mk’
    }
    set long(value){
        this.name=value;//给long这个属性赋值时会将值付给当前的name
    }
}
 
let v=new Parent();
console.log("getter",v.long);
v.long="hello"
console.log("setter",v.long);

四、静态方法

//静态方法
   
class Parent{
       constructor(name="zhang"){
           this.name=name;
       } 
        static tell(){
            console.log("tell");
        }
    }
    Parent.tell();//静态方法通过类去调用，而不是类的实例调用。
 
//静态属性
   
class Parent{
       constructor(name="zhang"){
           this.name=name;
       } 
    }
 
    Parent.type="test";//静态属性没有关键词，在类定义后直接定义，类名.属性=“”
    console.log("静态属性",Parent.type);
}

ES6也可以定义类的静态方法和静态属性，静态的意思是这些不会被实例继承，不需要实例化类，就可以直接拿来用。ES6中class内部只能定义方法，不能定义属性。在方法名前加上static就表示这个方式是静态方法，而属性还是按照ES5的方式来实现。
// ES5写法 Person.total = 0; //静态属性Person.counter = function(){  //静态方法    return this.total ++ ;}// ES6写法class Person {    ...    static counter(){        return this.total ++ ;    }}Person.total = 0;

es6与es5中类的比较。

举个例子，在ES5中定义一个类：

function Person(name) {    this.name = name; }Person.prototype.sayHello = function(){    return 'Hi, I am ' + this.name;}1
2
3
4
5
6
7
8

而用ES6的写法重写一下，检测类型发现Person本质上仍然是函数：

class Person {    constructor(name){        this.name = name;    }    sayHello(){        return 'Hi, I am ' + this.name;    } }typeof Person; //'function'1
2
3
4
5
6
7
8
9
10
11

调用的方式都是一致的：

var me = new Person('Yecao');

阅读全文

0 0