es6 — class 类,原型，原型链

acsndcasnoncddn

已于 2022-12-14 20:31:35 修改

阅读量281

点赞数

分类专栏： es6 javascript 文章标签： es6

于 2022-12-12 18:55:12 首次发布

本文链接：https://blog.csdn.net/bug_caicai/article/details/127908131

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

es6

3 篇文章 0 订阅

订阅专栏

文章目录

1.意义
2.语法
2.原型以及原型链

1.意义

生成实例对象，写法更清晰
类的数据类型就是函数，类本身就指向构造函数

2.语法

1.由来

关键字 class ，定义类

 class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

1. constructor()、toString()、toValue()这三个方法，
其实都是定义在Point.prototype上面。
2. 定义了一个toString()方法。注意，定义toString()方法
的时候，前面不需要加上function这个关键字，直接把函数
定义放进去了就可以了。另外，方法与方法之间不需要逗号
分隔，加了会报错。

Point 相当于function

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

调用时使用new,与构造函数一致

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

const b = new Bar();
b.doStuff() // "stuff"

Object.assign()方法可以很方便地一次向类prototype上添加多个方法。

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

2. constructor( )

类的默认方法，new调用生成对象时自动调用，类必须有该方法，若没有显示定义，空的该方法会被默认添加

class Point {
}

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

调用时必须使用new,跟普通构造函数的一个主要区别，后者不用new也可以执行。

3. 类实例

3.1. 使用new 调用

属性和方法，除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

类的所有实例共享一个原型对象

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

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

原型都是Point.prototype，所以__proto__属性是相等的。可以通过实例的__proto__属性为“类”添加方法。

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

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

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

var p3 = new Point(4,2);
p3.printName() // "Oops"

3.2类的继承

可以继承属性和方法，通过关键字 extents继承父类以及super执行父类函数，将参数传递即可

// 共同属性name添加到父类，构造函数Person
        class Person {
            constructor(name) {
                this.name = name;
            }
        }
        // 1、
        class Student extends Person {
            // 属性：
            constructor(name, score) {
                    // this.name = name,
                    // 调用父类,不是使用new Person
                    super(name);
                    this.score = score
                }
                // 方法
            introduce() {
                console.log(`我是类的方法，我的名字是${this.name},成绩是${this.score}`);
            }
        }
        // 调用类Student
        const student = new Student('张三', 99)
            // 打印Student的属性和和方法
        console.log('student', student);//student Student {name: '张三', score: 99}
        // 调用方法
        student.introduce();
//我是类的方法，我的名字是张三,成绩是99

        // 2.类，
        class Teach extends Person {
            constructor(name, subject) {
                // this.name = name;
                super(name);
                this.subject = subject;
            }
            teach() {
                console.log(`${this.name}老师教${this.subject}`);
            }
        }
        const teacher = new Teach('李', '数据结构')
        console.log('teacher', teacher);
        //teacher Teach {name: '李', subject: '数据结构'}
        teacher.teach()
        //李老师教数据结构

4. 新写法

实例属性现在除了可以
1. 定义在constructor()方法里面的this上面，

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

2. 也可以定义在类内部的最顶层。

class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

实例属性_count与取值函数value()和increment()方法，处于同一个层级。这时，不需要在实例属性前面加上this。

5.取值函数 getter 存值函数 setter

设置在属性的 Descriptor 对象上的

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

2.原型以及原型链

1.原型

 class Student extends Person {
            // 属性：
            constructor(name, score) {
                    // this.name = name,
                    // 调用父类,不是使用new Person
                    super(name);
                    this.score = score
                }
                // 方法
            introduce() {
                console.log(`我是类的方法，我的名字是${this.name},成绩是${this.score}`);
            }
        }
        // 调用类Student
        const student = new Student('张三', 99)
            // 打印Student的属性和和方法
        console.log('student', student);//student Student {name: '张三', score: 99}
        // 调用方法
        student.introduce();

控制台可以通过 student.introduce()调用该对象的方法

但实例打印 student 时想获取属性和方法，仅仅直接显示属性，他的方法在属性 __ proto __中称为隐式原型

类的 Student.prototype(显式原型) 与实例的student.__ proto __（隐式原型）类型相等 ,都指向 student 对象的方法

2.原型链

 class Person {
            constructor(name) {
                this.name = name;
            }
     	drink(){
            console.log('喝水')
        }
        } 
class Teach extends Person {
            constructor(name, subject) {
                // this.name = name;
                super(name);
                this.subject = subject;
            }
            teach() {
                console.log(`${this.name}老师教${this.subject}`);
            }
        }
        const teacher = new Teach('李', '数据结构')
        console.log('teacher', teacher);//①
        //teacher Teach {name: '李', subject: '数据结构'}
        teacher.teach()