Es6class类【黑马web前端】

更新时间:2019年07月26日 11时16分00秒来源:黑马程序员论坛

面向对象思想

什么是面向对象编程（Object Oriented Programming| OOP）？

类：定义某一事物的抽象特点，包含属性和方法，举个栗子，狗这个类包含狗的一些基础特征，如毛皮颜色，吠叫等能力。
对象：类的一个实例，还是举个栗子，小明家的白色的狗和小红家红色的狗。
属性：对象的特征，比如刚提到的狗皮毛的颜色。
方法：对象的行为，比如刚才提到的狗的吠叫能力。
封装性：通过限制只有特定类的对象可以访问特定类的成员，一般包含public protected private 三种，不同语言的实现不同。
继承性：一个类会有子类,这个子类是更具体化的一个抽象，它包含父类的一些属性和方法，并且有可能有不同于父类的属性和方法。
多态性：多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。
抽象性：复杂现实问题转化为类定义的途径，包括以上所有内容。

如何实现对象（类）的定义

JS中并没有类（class）的概念，更多的时候我们称之为对象（function），然后把对象叫做实例（instance）。如下，Person 类型为function

class Person {
// ...
sayHi() {
console.log('Hi')
}
}
typeof Person // 'function'
Person === Person.prototype.constructor // 'true'
let p1 = new Person();
p1.sayHi() // Hi

上列代码表明，类的数据类型就是函数，类本身就是指向构造函数。

使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

类的由来

在js里面，我们通常都是通过构造函数来创建对象(class),然后通过new这个关键字来实例化一个对象，如:

ES5中的方法：

通过构造函数实现
function Person(name,age) {
  this.name = name;
  this.age = age;
}
// Person.prototype.showName = function () {
// return `我的名字为：${this.name}`
// }
// Person.prototype.showAge = function () {
// return `我的年龄为：${this.age}`
// }
// 通过assgin方法可以优化代码写入
Object.assign(Person.prototype,{
  showName() {
return `我的名字为：${this.name}`
  },
  showAge() {
return `我的年龄为：${this.age}`
  }
})
let p1 = new Person('Jing',18)

console.log(p1.showName()); // 我的名字为：Jing
console.log(p1.showAge()); // 我的年龄为：18

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

构造函数的prototype属性

构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

例：
  class Person {
constructor() {

}
showName() {
   // ...
}
showAge() {
   // ...
}
  }
  // 等同于
  Person.prototype = {
constructor() {},
showName() {},
showAge() {},
  }
在类的实例上调用方法其实就是调用原型上的方法

ES6中的变形:方法的传值class Person {
showName(name) {
   return `我的名字为：${name}`
}
}
let p1 = new Person();
console.log(p1.showName('Jing'))
类的传参实例：  class Person {
constructor(name,age) {
   this.name = name;
   this.age = age;
}
showName() {
   return `我的名字为：${this.name}`
}
showAge() {
   return `我的年龄为：${this.age}`
}
  }
  let p1 = new Person('Jing',18)

  console.log(p1.showName()); // 我的名字为：Jing
  console.log(p1.showAge()); // 我的年龄为：18

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

class Person {

}
// 等同于
class Person {
constructor () {}
}
表达式形式  let Person = class {
constructor(name,age) {
   this.name = name;
   this.age = age;
}
showName() {
   return `我的名字为：${this.name}`
}
showAge() {
   return `我的年龄为：${this.age}`
}
  }
  let p1 = new Person('Jing',18)

  console.log(p1.showName()); // 我的名字为：Jing
  console.log(p1.showAge()); // 我的年龄为：18

以上两种形式结果相同。
使用Class表达式，可以写出立即执行的Class

上列代码中Person类的方法名showName是从表达式得到的。

  // 字符串拼接形式
let aa = 'show';
let bb = 'Name';
class Person {
   constructor (name) {
      this.name = name;
   }
   [aa+bb]() {
      return `我的名字为：${this.name}`
   }
}
let p1 = new Person('Jing')
console.log(p1.showName()); // 我的名字为：Jingclass取值函数，存值函数  class Person { constructor() { } get aaa() {    return `aaa的属性` } set aaa(val) {    console.log(`设置aaa属性，值为：${val}`);    }  }  let p1 = new Person();  p1.aaa = '123'  p1.aaa  //设置aaa属性，值为：123
注意点严格模式

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

不存在变量提升 let p1 = new Person() console.log(p1); class Person { constructor (){ this.name = 'Jing' } } // 报错显示初始化前无法访问Person（即Person类没有创建）静态方法

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

class Person { constructor() { } showName() { return `这是showName方法` } static aaa() { return `这是静态方法` } } let p1 = new Person(); console.log(p1.showName()); //这是showName方法 console.log(Person.aaa()); // 这是静态方法实例属性新写法

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

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

上面代码中，实例属性this._count定义在constructor()方法里面。另一种写法是，这个属性也可以定义在类的最顶层，其他都不变。

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

上面代码中，实例属性_count与取值函数value()和increment()方法，处于同一个层级。这时，不需要在实例属性前面加上this。
这种新写法的好处是，所有实例对象自身的属性都定义在类的头部，看上去比较整齐，一眼就能看出这个类有哪些实例属性。

类的继承 class Person { constructor(name) { this.name = name; } showName() { return `我的名字为${this.name}` } } // 子类 class Student extends Person{ } // 调用 let stu1 = new Student('Jing') console.log(stu1.showName());

super

class Person { constructor(name) { this.name = name; } showName() { return `我的名字为${this.name}` } } // 子类 class Student extends Person{ constructor(name,skill) { super(name) this.skill = skill } } // 调用 let stu1 = new Student('Jing','学习') console.log(stu1.skill);

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

Es6class类【黑马web前端】

相关阅读