ES6面向对象新特性

2021-02-17 20:31:47 阅读：189 来源： 互联网

标签：ES6 console name color price 特性面向对象 constructor class

ES5之前类的继承是靠原型实现的，而这一过程的实现又涉及到一大堆的原型定义，而SE6为了使得javascript的类继承像java之类的语言一样更加简单纯粹，也推出了class这个定义类的关键字，虽然失去了一点灵活性，但是代码变得更加简单了。

像其他语言一样，SE6用关键字class定义一个类，该类有一个名为constructor()的函数，SE6的类必须有这个函数，如果没设就会默认添加一个，类似于java的构造方法，这个函数中的this指向生成的实例。

ES6
书写格式：
class 类名{
    constructor(...接收实例化时传的实参){
        this.XXX = 形参
    }
    方法名(){函数体}
}
class Person {//语法糖
    constructor(name, age, gender, money) {//构造器
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.money = money;
    }
    say(){
        console.log(`我的姓名是${this.name},我有${this.money}元`);
    }
}
let gf = new Person("z3",28,"female",1000000);
gf.say();//我的姓名是z3,我有1000000元

类的typeof是Function(原因是类就是构造函数)
1、class声明的类，具有暂时性死区，必须先声明再使用
2、class声明的类，不能当做普通函数调用(即必须加new)
3、class声明的类，手动更改返回值(引用值有效，其他类无效)

类中的函数，直接挂载到类的原型上
类的原型添加属性：类.prototype.属性名 = 属性值
注：优化性能的考虑，不要放在construcor

给类添加静态方法
书写格式：
static属性名
static price = “40000”;
static方法名
static say() = function(){}
只可以类来使用，实例无法使用

class Elec {
    constructor(name){
        this.name = name;
    }
    static price = "40000";
    static sale() {
        console.log(`原价：${this.price},折后${this.price*0.75}`);
    }
}
Elec.sale();//原价：40000,折后30000
console.log(Elec.price);//40000

原型上不能定义属性，只能定义get（取值器）和set（设值器），取值器和设值器都是在原型上的

class Animal{
	constructor(color){
		this.color = color;
	};
	get _color(){
		return this.color;
	}
	set _color(value){
		return this.color = value;
	}
}
var am = new Animal();
am._color = 'red';
console.log(am._color);//red
console.log(am.color);//red

定义属性在constructor内部，通过继承得到原型的属性和方法
B类 extends A类，代表A类中所有的方法和属性B类可以使用
super与extends配套使用，super是方法，参数是B类的形参或者变量或值
注：super必写放在B类的constructor的第一行

class Vehicle {
    constructor(name,eng,price){
        this.name = name;
        this.eng = eng;
        this.price = price;
    }
    didi(){
        console.log("didiid");
    }
}
class Car extends Vehicle {
    constructor(name,eng,price,diver){
        // super只能放在constructor的第一行
        super(name,eng,price);
        this.diver = diver;
    }
    dive() {
        if(this.diver){
            console.log(`找代驾`);
        }
    }
}
class Bus extends Vehicle {
    constructor(name,eng,price,pass){
        super(name,eng,price);
        this.pass = pass;
    }
}
let car1 = new Car("BMW","123",4000);
let bus1 = new Bus("BYD","公交",40000,40);
console.log(car1.name); //BMW
car1.didi(); //didiid
console.log(bus1.name,bus1.price);//BYD 40000

标签：ES6,console,name,color,price,特性,面向对象,constructor,class
来源： https://blog.csdn.net/qq_37981080/article/details/113837495

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6面向对象新特性