ES6--class基本使用

类定义

  ES6完整学习阮老师的ECMAScript6入门

  技术一般水平有限,有什么错的地方,望大家指正。

  以前我们使用ES5标准定义一个构造函数的过程如下:

  function Person(name,age){
      this.name = name;
      this.age = age;
  }
  Person.prototype.say = function(){
      console.log("你好,我是"+this.name)
  }
  Person.prototype.show = function(){
      console.log("年龄"+this.age+"一名小学生!");
  }

  通常首字母大写的函数我们称为构造函数(并不是一种语法约束,只是一种约定俗成的规律),属性写在方法里面,函数写在原型上面,这样实例化(new操作)出来的对象既有属性也有方法。

  ES6为了更明朗构造函数这个概念了多了一个class语法,它会帮我们完成上面的一系列操作,我们可以把它看做是构造函数的变身,通常我们称为类。JS中的类同函数一样也有两种声明方式:

  类声明:

  class Person{
  }

  类表达式:

var Person = class {
}

  现在我们利用类来对开始的构造函数进行变形:

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("你好,我是"+this.name);
      }
      show(){
          console.log("年龄"+this.age+"一名小学生!");
      }
  }

  我们实例化一个Person的对象,是可以正常使用的:

  var me = new Person("zt",23);
  me.say();
  me.show();

  原来的构造函数现在变成了一个类,constructor就是构造函数对参数进行初始化的变形,say和show就是构造函数原型上面的函数。

  类就是对有同样特征的事物的一个统称,在JS的类里面只能包括函数,不能包含别的,如果我们需要给类添加一个属性只能通过get/set存取器方法来实现:

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      get message()
      {
          return "name:"+this.name+",age:"+this.age
      }
  }
  var me = new Person("zt",23);
  console.log(me.message);

  constructor函数在类里面最多只能有一个,它的主要职能就是初始化属性,在执行new操作时先经由constructor函数将参数设置为对象的属性,如果不需要存在初始化属性那么constructor可以省略。

函数修饰

  类里面定义的函数可以被修饰符修饰最常见的就是static。

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("由类调用");
      }
  }
  Person.say();

  一旦一个函数被static修饰,那么这个函数就属于类了,可以直接由类名来调用Person.say()。而普通函数是不能直接由类进行调用的,普通函数只能由实例化的对象来调用,被static修饰的函数是不能被实例化的对象调用的只能通过类直接来进行调用,这种函数等价于我们以前直接利用Person.fn = function(){}定义工具函数一样。

类继承

  一个类可以继承一个类,被继承的类我们一般称为父类,另一个称为子类,通过extends来实现:

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
  }

  新创建的Student类是子类,Person类是父类,子类会拥有父类里面的所有函数(constructor和其他函数),子类继承来的函数都是可以直接使用的:

  var stu = new Student("zt",23)
  stu.say();

  子类里面没有声明任何函数,仍然可以调用say,say就是通过继承得来的。

  子类可以定义自己的特有的函数,如果和父类函数同名那么就父类的函数就不会生效而是使用子类自身的函数(就是ES5原型链查找的套路):

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
      say(){
          console.log("我是子类的say函数!")
      }
      fn(){
          console.log("我是子类函数fn")
      }
  }
  var stu = new Student("asaszt",23)
  stu.say();//我是子类的say函数!
  stu.fn();//我是子类函数fn

在子类中使用super

  子类会继承父类的constructor函数来初始化自身的属性,同样也可以添加自身特有的属性,但是必须使用super来完成这个操作:

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
  }
  var stu = new Student("zt",23,"男")
  console.log(stu.sex);//男

  在子类中使用constructor来初始化属性,首先使用super来对可继承的属性进行初始化,然后在通过this添加自身特有的属性,this只有在调用super()之后才会存在。

  super同样可以调用父类的非静态函数(此时我们可以把super看做是一个父类实例化出来的一个对象):

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是父类的say函数");
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
      say(){
          super.say();
          console.log("我是子类的say函数");
      }

  }
  var stu = new Student("zt",23)
  stu.say();//我是父类的say函数 我是子类的say函数
时间: 2025-01-02 13:33:58

ES6--class基本使用的相关文章

es6学习 -- 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. 我认为

ES6之主要知识点(六)数组

引自http://es6.ruanyifeng.com/#docs/array 1.扩展运算符(...) 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 该运算符主要用于函数调用. function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(...n

ES6简介

概述 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布,也叫ES2015. 语法提案的批准流程 新的语法从正式提案到正式成为标准,需要经历5个过程. Stage 0 - Strawman(展示阶段) Stage 1 - Proposal(征求意见阶段) Stage 2 - Draft(草案阶段) Stage 3 - Candidate(候选人阶段) Stage 4 - Finished(定案阶段) 一个提案进入Stage 2

es6的一些基本语法

首先说一下什么是es6: ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准; let 和 const 命令 let的基本用法: 上面代码在代码块之中,分别用let和var声明了两个变量.然后在代码块之外调用这两个变量,结果let声明的变量报错, var声明的变量返回了正确的值.这表明,let声明的变量只在它所在的代码块有效. const的基本用法: const声明的是一个常量,不能被修改,所以第二次声明后会报错! 数组的解构赋值: 之前最基本的写法是这样

js的ES6特性

一. let和const关键字 let出现之前,js所有的作用域都是以函数为单位的,只要在一个function里声明的var, 无论是for循环等块里面声明的还是在块外面声明的,整个function都可以使用这个var,比如: function foo() { for (var i=0; i<100; i++) { // } i += 100; // 仍然可以引用变量i } 我个人的理解是js的提升特性,函数会将里面声明的所有var都提升到函数开始的地方,所以整个函数内都共享这些var. let

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

30分钟掌握ES6核心内容

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

ES6之块级作用域

一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1.  全局作用域: 2.  函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一术语--“变量提升(hoisting)”. 如下: function func(){ console.log(test); var test = 1; }; func(); 在node环境执行上述代码,结果为: 之所以为’undefined’,原因就在于‘变量提升’,在进入func函数时,将所有通过

[ES6] 03. The let keyword -- 1

var message = "Hi"; { var message = "Bye"; } console.log(message); //Bye The message inside the block still has impact on the outside. If you add function around the inside message: var message = "Hi"; function greeting(){ va

Es6中如何使用splic,delete等数组删除方法

Es6中如何使用splic,delete等数组删除方法 1:js中的splice方法 splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标        len: 替换/删除的长度       item:替换的值,删除操作的话 item为空 如:arr = ['a','b','c','d'] 删除 ----  item不设置 arr.splice(1,1)   /