侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 292 篇文章
  • 累计创建 132 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

ES6新特性4:class类

孔子说JAVA
2022-05-09 / 0 评论 / 0 点赞 / 146 阅读 / 12,965 字 / 正在检测是否收录...

传统的javascript(ES6之前)中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。传统JS通过构造函数定义并生成新对象,跟传统的面向对象语言差异很大,容易让人感到困惑。

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字可以定义类,ES6 提供了更接近传统语言的写法,它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法,class 的本质仍是 function。

1、ES5对象传统写法

// ES5 对象写法
//函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",28);//通过构造函数创建对象,必须使用new 运算符
console.log(obj.say());//我的名字叫laotie今年28岁了

ES5构造函数生成实例的执行过程

  1. 当使用了构造函数,并且new 构造函数(),后台会隐式执行new Object()创建对象;
  2. 将构造函数的作用域给新对象,(即new Object()创建出的对象),而函数体内的this就代表new Object()出来的对象。
  3. 执行构造函数的代码。
  4. 返回新对象(后台直接返回);

2、ES6的class和对象

// ES6 对象写法
class Person{//定义了一个名字为Person的类
    constructor(name,age){//constructor是一个构造方法,用来接收参数
        this.name = name;//this代表的是实例对象
        this.age=age;
    }
    say(){//这是一个类的方法,注意千万不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("laotie",28);
console.log(obj.say());//我的名字叫laotie今年28岁了

// 以上类的定义等同于下面写法
Person.prototype = {
  constructor(name,age) {},
  say() {},
};

注意事项:

  1. 在类中声明方法的时候,千万不要给该方法加上function关键字。
  2. 方法之间不要用逗号分隔,否则会报错。
  3. 类不可重复声明。
  4. ES5存在变量提升,可以先使用,然后再定义。ES6类定义不会被提升,必须在访问前对类进行定义,否则就会报错。

3、ES6类的定义与声明

类表达式可以为匿名或命名。

// 使用表达式定义了一个命名类
let PersonClass = class Person {
    constructor(a) {
        this.a = a;
    }
}
// 需要注意的是,这个类的名字是Person,但是Person只在 Class 的内部可用,
// 指代当前类。在 Class 外部,这个类只能用PersonClass引用。
let inst = new PersonClass();
console.log(PersonClass.name); // Person
console.log(Person.name);  // ReferenceError: Person is not defined

// 上面代码表示,Person只在 Class 内部有定义,
// 如果类的内部没用到的话,可以省略Person,定义了一个匿名类
const Person = class {
    constructor(a) {
        this.a = a;
    }
}

// 类声明
class Person {
    constructor(a) {
        this.a = a;
    }
}
// 注意要点:不可重复声明。
class Person{}
class Person{}
// Uncaught SyntaxError: Identifier 'Example' has already been declared

4、类的属性

4.1 prototype属性

类实质上就是一个函数,类自身指向的就是构造函数的prototype属性,prototype在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。

// ES6中的类其实就是构造函数的另外一种写法!
console.log(typeof Person);//function
console.log(Person===Person.prototype.constructor);//true

// 以下代码说明构造函数的prototype属性,在ES6的类中依然存在着。
console.log(Person.prototype);//输出的结果是一个对象

实际上类的所有方法都定义在类的prototype属性上。代码证明下:

// 通过prototype属性覆盖类方法
Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖!
    return "我是来证明的,你叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",28);
console.log(obj.say());//我是来证明的,你叫laotie今年28岁了

// 通过prototype属性对类添加方法
Person.prototype.addFn=function(){
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj=new Person("laotie",28);
console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

// 还可以通过Object.assign方法来为对象动态增加方法
Object.assign(Person.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Person("laotie",28);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88

4.2 静态属性

静态属性是指class 本身的属性,即直接定义在类内部的属性( Class.propname ),不需要实例化。 ES6 中规定,Class 内部只有静态方法,没有静态属性。

// 静态方法
class Person{
    constructor(){
    }
    static say(){
    }
}
// 为Person定义静态属性(变通方法)
Person.prop=1

// 以上的静态方法say()相当于
class Person{}
Person.say = function() {}

静态属性特点:

  1. 储存在类中的公共属性,实例之间共享一份
  2. 不用实例化对象,直接在类上可访问。例如Person.say()

因为在class中只有this上的属性,以及class外的变量可被访问。所以静态属性就是class外的一个变量,并且通过静态方法进行访问

// class外的一个变量,并且通过静态方法进行访问
var age= 0
class Person{
  constructor(name) {
    this.name = name
  }
  getName() {
    return this.name 
  }
  getAge(value) {
    return age
  }
}

4.3 公共属性(通用属性)

ES5中,prototype是一个对象,因此,你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的公共属性(通用属性)。这些在ES6中同样适用。

// 公共属性
class Person{}
Example.prototype.age = 2;

4.4 实例属性

实例属性是定义在实例对象( this )上的属性。

class Person{
    age = 2;
    constructor () {
        console.log(this.age);
    }
}

4.5 name属性

返回紧跟在 class 后的类名(存在时)。本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性。

let Person=class Per {
    constructor(a) {
        this.a = a;
    }
}
console.log(Person.name); // Per
 
let Person=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Person.name); // Person

5、类的方法

5.1、constructor方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法,默认返回实例对象this。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Person{
}

// 等同于
class Person{
    constructor(){
    }
}

上面代码中,定义了一个空的类Person,JavaScript 引擎会自动为它添加一个空的constructor()方法。

constructor()方法默认返回实例对象(即this),也可以指定返回另外一个对象。

class Desk{
    constructor(){
        this.xixi="我是一只小小小小鸟!哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 这里没有用this哦,直接返回一个全新的对象
    }
}
var obj=new Box();
console.log(obj.xixi);//我是一只小小小小鸟!哦

constructor中定义的属性可以称为实例属性(即定义在this对象上),constructor外声明的属性都是定义在原型上的,可以称为原型属性(即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值, true说明是实例属性,false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

5.2 静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

  1. 如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。
  2. 如果静态方法包含this关键字,这个this指的是类,而不是实例。
  3. 静态方法可以与非静态方法重名。
  4. 父类的静态方法,可以被子类继承。
  5. 静态方法也可以从super对象上调用。
class Example {
    static sum(a, b) {
        return a + b;
    }
    static sum2(a, b) {
        // 这里的this指的是Example类,而不是Example的实例,等同于调用Example.sum。
        return this.sum(a, b);
    }
    sum(a, b) {
        console.log(a + b);
    }
}
console.log(Example.sum(1, 2)); // 3
console.log(Example.sum2(1, 2)); // 3

// 子类
class Child extends Example {
}
console.log(Child.sum(1, 2));  // 3

// 子类2
class Child2 extends Example {
    static sum(a, b) {
        return super.sum(a, b) + 2;
    }
}
console.log(Child2.sum(1, 2));  // 5

5.3 原型方法

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

5.4 实例方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

6、类的实例化

class 的实例化必须通过 new 关键字,如果忘记加上new,像函数那样调用Class,将会报错。与 ES5 一样,实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        return "我的名字叫" + this.name + "今年" + this.age + "岁了";
    }
}
var person = new Person("laotie", 28);
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('age')); // true
console.log(person.hasOwnProperty('say')); // false
console.log(person.__proto__.hasOwnProperty('say')); // true

// 以下是错误写法
var obj = Person("laotie",28);

上面代码中,name和age都是实例对象Person自身的属性(因为定义在this对象上),所以hasOwnProperty()方法返回true,而say()是原型对象的属性(因为定义在Person类上),所以hasOwnProperty()方法返回false。这些都与 ES5 的行为保持一致。

与 ES5 一样,类的所有实例共享一个原型对象。

var p1 = new Person("laotie1", 28);
var p2 = new Person("laotie2", 38);

p1.__proto__ === p2.__proto__   //true

上面代码中,p1和p2都是Person的实例,它们的原型都是Person.prototype,所以__proto__属性是相等的。这也意味着,可以通过实例的__proto__属性为“类”添加方法。

proto 并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加方法/属性。

var p1 = new Person("laotie1", 28);
var p2 = new Person("laotie2", 38);

p1.__proto__.printName = function () { return 'laotie' };

p1.printName() // "laotie"
p2.printName() // "laotie"

var p3 = new Point("laotie3", 48);
p3.printName() // "laotie"

上面代码在p1的原型上添加了一个printName()方法,由于p1的原型就是p2的原型,因此p2也可以调用这个方法。而且,此后新建的实例p3也可以调用这个方法。这意味着,使用实例的__proto__属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。

采用 Class 表达式,可以写出立即执行的 Class。

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

7、类的继承

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

7.1 extends关键字

class Person{  
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
 
   sayName(){
      console.log("the name is:"+this.name);
   }
}
 
class Worker extends Person{
   constructor(name, age, job) {
      super(name, age);
      this.job = job;
   }
   sayJob(){
     console.log("the job is:"+this.job)
   }
}
 
var worker = new Worker('tcy',20,'teacher');
worker.sayJob();//the job is:teacher
worker.sayName();//the name is:tcy

分析这段代码,父类Person,实现两个类属性name,age,以及一个类方法sayName()。子类Worker通过extends继承了Person类的所有属性和方法,另外实现了一个类属性job,以及一个类方法sayJob。在子类的构造方法中,使用super关键字调用父类的构造方法,用来新建父类的this对象。

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象,这时候使用this会报错,这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例(所以必须在super方法之后才能使用this关键字)。

如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

class Worker extends Person{
    
}

// 以上代码等同于
class Worker extends Person{
    constructor(...args) {
       super(...args);
    }
}

父类的静态方法,也会被子类继承。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

上面代码中,hello()是A类的静态方法,B继承A,也继承了A的静态方法。

7.2 Object.getPrototypeOf()获取父类

Object.getPrototypeOf方法可以用来从子类上获取父类。因此,可以使用这个方法判断,一个类是否继承了另一个类。

Object.getPrototypeOf(Worker) === Person
// true

7.3 super关键字

ES6的继承机制:先创建父类的实例对象,然后在构建子类的实例,再修改父类中的this对象。

super 可以当作函数使用(父类的构造函数),也可以当作对象使用(父类对象)。

super 当作函数使用时,子类的构造函数constructor中super方法实现对父类构造函数的调用。在调用时需要注意两点:

  1. 子类构造函数中必须调用super方法,否则在新建对象时报错。
  2. 子类构造函数中必须在使用this前调用super,否则报错。
  3. super()只能用在子类的构造函数之中,用在其他地方就会报错。
class A {}

class B extends A {
  constructor() {
    super();
  }
  m() {
    super(); // 报错
  }
}

super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B的实例,因此super()在这里相当于A.prototype.constructor.call(this)。

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

上面代码中,new.target指向当前正在执行的函数。可以看到,在super()执行时,它指向的是子类B的构造函数,而不是父类A的构造函数。也就是说,super()内部的this指向的是B。

super作为对象使用时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

上面代码中,子类B当中的super.p(),就是将super当作一个对象使用。这时,super在普通方法之中,指向A.prototype,所以super.p()就相当于A.prototype.p()。这里需要注意,由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。

class A {
  constructor() {
    this.p = 2;
  }
}
A.prototype.x = 2;

class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
  get m() {
    return super.p;
  }
}

let b = new B();
b.m // undefined

上面代码中,p是父类A实例的属性,super.p就引用不到它。属性x是定义在A.prototype(父类的原型对象)上面的,所以super.x可以取到它的值。

注意,使用super的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。

class A {}

class B extends A {
  constructor() {
    super();
    console.log(super); // 报错
    console.log(super.valueOf() instanceof B); // true
  }
}

上面代码中,console.log(super)当中的super,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。super.valueOf()表明super是一个对象(清晰地表明super的数据类型),因此就不会报错。同时,由于super使得this指向B的实例,所以super.valueOf()返回的是一个B的实例。

由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super关键字。

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};

obj.toString(); // MyObject: [object Object]

7.4 类的 prototype 属性和__proto__属性

大多数浏览器的 ES5 实现之中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖,同时有prototype属性和__proto__属性,因此同时存在两条继承链。

  1. 子类的__proto__属性,表示构造函数的继承,总是指向父类。
  2. 子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。
class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

上面代码中,子类B的__proto__属性指向父类A,子类B的prototype属性的__proto__属性指向父类A的prototype属性。

这样的结果是因为,类的继承是按照下面的模式实现的。

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

Object.setPrototypeOf方法的实现:

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

因此,就得到了上面的结果。

Object.setPrototypeOf(B.prototype, A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

Object.setPrototypeOf(B, A);
// 等同于
B.__proto__ = A;

这两条继承链,可以这样理解:作为一个对象,子类(B)的原型(__proto__属性)是父类(A);作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。

B.prototype = Object.create(A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

extends关键字后面可以跟多种类型的值。只要是一个有prototype属性的函数,就能被子类继承。由于函数都有prototype属性(除了Function.prototype函数),因此父类可以是任意函数。

下面,讨论两种情况。第一种,子类继承Object类。

class A extends Object {
}

A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A其实就是构造函数Object的复制,A的实例就是Object的实例。

第二种情况,不存在任何继承。

class A {
}

A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

这种情况下,A作为一个基类(即不存在任何继承),就是一个普通函数,所以直接继承Function.prototype。但是,A调用后返回一个空对象(即Object实例),所以 A.prototype.__proto__指向构造函数(Object)的prototype属性。

7.5 实例的 __proto__ 属性

子类实例的 __proto__ 属性的 __proto__ 属性,指向父类实例的 __proto__ 属性。也就是说,子类的原型的原型,是父类的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

上面代码中,ColorPoint继承了Point,导致前者原型的原型是后者的原型。

因此,通过子类实例的 __proto__.__proto__ 属性,可以修改父类实例的行为。

p2.__proto__.__proto__.printName = function () {
  console.log('Ha');
};

p1.printName() // "Ha"

上面代码在ColorPoint的实例p2上向Point类添加方法,结果影响到了Point的实例p1。

7.6 Mixin 模式的实现

Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下。

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}

上面代码中,c对象是a对象和b对象的合成,具有两者的接口。

下面是一个更完备的实现,将多个类的接口“混入”(mix in)另一个类。

function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷贝实例属性
      }
    }
  }

  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}

上面代码的mix函数,可以将多个对象合成为一个类。使用的时候,只要继承这个类即可。

class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}
0

评论区