欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6中的类

程序员文章站 2022-07-16 21:53:42
...

ES6中的类和继承

ES5中创建类和实例,以及如何禁止用户把类当做普通函数执行new.target

function Person(name,age) {
    //console.log(new.target);// ES6中新增的语法,如果是通过new执行的,返回结果是当前创建的类,如果当做普通函数执行的,返回的是undefined
    if (typeof new.target ==='undefined'){
        throw new SyntaxError(`当前Person不能作为一个普通函数执行,请使用new Person执行`)
    }
    //new 执行的时候,this是当前类的实例,this.xxx =xxx 是给当前实例增加的私有属性.
    this.name = name;
    this.age = age;

}
Person.prototype = {
    constructorL:Person,
    say:function () {
        `my name is ${this.name},i am ${this.age} years old~`;
    }//原型上存放的是共有的属性和方法:给创建的实例使用
};
Person.study = function () {
    console.log(`good good study, day day up~`);
};//把person当做一个普通的对象,给对象设置的私有属性

var p1 = new Person('xx',9);
//Person();//Uncaught SyntaxError: 当前Person不能作为一个普通函数执行,请使用new Person执行

ES6中创建类

//console.log(Person);Person is not defined 不存在变量提升

class Person {
    constructor (name = 'xx',age = 9){
        //给实例设置的私有属性
        this.name = name;
        this.age = age;
    }
    //直接在大括号中写的方法都设置在累的原型上了:ES6默认把constructor的问题解决了,此时原型上的constructor指向的就是person
    say(){
        console.log(`my name is  ${this.name} ,i am ${this.age} years old~`);
    }
    //把person当做普通对象设置属性和方法,只需要在设置的方法前面加static
   static study(){
        console.log(`good good study,day day up`);
    }
}
let p1 = new Person('xxxx');
//Person();//Uncaught TypeError: Class constructor Person cannot be invoked without 'new' ES6中使用class创建的类,天生自带new.target验证,不允许把创建的类当做普通函数执行
//console.log(Person.prototype.constructor === Person);// true
class Person{
    constructor(...arg){
        let[x = 0, y = 0] = arg;
        this.x = x;
        this.y = y;
    }
    sum () {
        return this.x + this.y;
    }
}

class Child extends Person {//创建child,并且让child继承Person类:把Person中的私有属性继承过来设置给了子类实例的私有属性,让子类实例的__proto__上能够找到Person父类的原型(这样子类的实例就可以调用父类原型上的方法)
    constructor(...arg){//剩余运算符
        //Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        //我们可以不写constructor 浏览器会默认创建它,而且默认就把父类私有的属性继承过来了(而且会把传给子类的参数值也传递给父类了)
       super(...arg);//展开运算符// super must be first
      let [,,z] = arg;
      this.z = z;
    }
    fn(){//Child公有的方法

    }

}

let c = new Child(10,20,30);
相关标签: es6 前端