1. 对象的扩展
{
// js5 写法
var obj = {
'name': '123',
'age': '18',
'say': function () {
console.log(234);
}
}
}
{
// es6 写法:
let name = '123';
let age = 12;
let obj = {
name,
age,
say(){
console.log(12345);
return 123;
},
}
console.log(obj.name); // 123
console.log(obj.age); // 12
console.log(obj.say()); // 12345
}
2. 面向对象
- 在JS5中, 没有一个类的概念,只有构造方法。
- 而 ES6中, JS 模拟了其他语言,实现类的概念,让对象可以由类来产生。
- ES6 中虽然有了类 但底层实现上 还是以原型对象的拷贝来实例化对象。
总结
- class : 定义类的关键字
- extends : 子类继承父类 (定义子类时使用)
- constructor : 构造函数
- static : 定义类属性 调用时类使用它
- super : 代表父类
1. 使用class 关键字封装类。
- 从底层上来讲,在类里面定义的属性和方法 都是之前的原型属性和方法。
class Person {
name = '张三';
age = '12';
say() {
console.log('hello');
}
eat(){
console.log('这是父类的方法');
}
// 需要传参的属性 写在 构造函数里面。
constructor(sex, job, money) {
this.sex = sex;
this.job = job;
this.money = money;
}
}
// 实例化对象
// 类中构造函数里写了多少个形参, 实例化的时候就要按顺序,传入多少个实参。
// 如果形参实参数量不一致,没传参的属性,值是 undefined
let p1 = new Person('男', '程序员');
console.log(p1.name, p1.age);
console.log(p1.job);
p1.say();
2. es6 继承
- 在类中,使用自身用 this 来使用
this.属性
this.方法()
- 在类中,使用自身用 this 来使用
-
- 在子类中,要使用父类的属性或方法 只能用 super
- super.方法()
- 只有一种情况,super 如果在子类的constructor中代表着父类的 constructor
class Man extends Person{
sex = '男';
// static 修饰类属性 / 类方法
// 只有类才能使用的属性和方法, 只能通过类名调用
static a = '123';
static says(){
console.log(super.name);
}
fn1(){
this.eat();
console.log(this.sex);
}
eat(){
// 将父类的方法 在子类调用
super.eat();
console.log('这是子类的方法');
}
constructor(...arg){
console.log(Man.a);
Man.says();
// super 如果放在 子类的构造函数中 直接代表父类的构造函数。
// super(arg[0],arg[1],arg[2]);
super(...arg);
}
}
let m1 = new Man('女', '程序员','1234');
console.log(m1.job,m1.sex,m1.money);
console.log(m1.name,m1.sex);
// console.log(m1.says()); // 报错 m1.says is not a function
console.log(Man.a);
Man.says();
m1.eat();
m1.fn1();
3. 私有属性和方法 set、get
class Person{
constructor(){
this.money = 2345; // 公有
let money1 = 2345; // 私有
}
_money = 2345; // 私有属性:
// set get 方法
set m1(m){
this._money = m + 10000;
}
get m1(){
return this._money;
}
}
let p1 = new Person();
console.log( p1.money1);
console.log( p1._money);
console.log(p1.m1); // 2345 给私有属性一开始设置的那个值
p1.m1 = 5000;
console.log(p1.m1);