JavaScript作为一个动态语言,很大程度上的诟病就是缺少了面向对象的这个概念,ES5传统的方法是通过构造函数来实现类的特性;ES6引入了类这一概念,将Class这个概念作为对象的模板,通过关键字class可以定义类;本质上ES6中引入的类是一个语法糖,其大部分功能ES5均可实现;

JavaScript语言可以实现继承的特征,但ES5与ES6在实现的机制上确迥然不同:

  • ES5继承的实质:先创造子类的实例对象this,然后将父类的方法添加到this上面,及Parent.apply(this);
  • ES6继承的实质:先创造父类的实例对象this,然后再用子类的构造函数修改 this,因此ES6子类继承必须先调用super方法;

1.类与对象的区别

1. 先来看一下对象和类的定义
②对象,是一个具体的个体,拥有对象名、属性、方法三个特征;每个对象拥有自己独立的属性,依靠属性来区分不同的对象,方法是对象的动态属性,也成为方法/服务;每个方法用来确定对象的一种行为或功能;
①类,是抽象的概念集合,拥有类标识、属性、方法三个特征,是一类具有相同特性的个体的抽象和归纳;类是抽象出能反映与当前目标有关的本质特征,忽略那些与当前目标无关的非本质特征,从而找出事物的共性,把具有共同性质的事物归结为一类,进而抽象出的概念;

类的变量:一个类所包含的变量根据其可访问性的差别分为:①局部变量:定义在方法、构造方法、语句块中的变量,方法结束后变量就自动销毁;②成员变量:定义在类中,方法体之外的变量,可被类中的方法、构造方法、语句块访问;③成员变量:定义在类中,方法体之外,且用static修饰的变量;

类的修饰符:类的变量修饰符有4种:publicprivateprotectedfriendly;类的方法有7种修饰符:publicprivateprotectedstaticabstractfinalsynchronized;其区别如下:

  • public:在类中任意地方可见、对子类可见、对继承对象可见;
  • private:在类中任意地方可见、在类外不可见;
  • protected:在类中任意地方可见、在类外不可见,不可被外部修改

类和对象都是面向对象程序设计的基本组成单元,但两者又有所不同,简单来说:
两者之间的主要区别如下:

  • 类是对象的模板,对象是类的实例;
  • 类不能直接使用,只有通过对象才可使用,而对象可以直接使用;
  • 类需要在对象之前创建,对象可以继承类;
  • 类和对象都具有一系列属性(静态属性)、方法(动态属性/服务/操作);

2. ES6 类的特性

  • 类的数据类型就是函数,类本身指向构造函数;
  • 类具有构造方法constructor(),类内部this指向实例对象;
  • 类的所有方法都定义在类的prototype属性上,类方法的调用其调用实质上就是调用原型上的方法;
  • 类内部定义的所有方法都是不可枚举的;而ES5原型上的所有方法都是可以枚举的;
  • 类的属性名可以采用表达式;
  • 类和模块内部默认使用严格模式;
  • 类的方法之间不需要逗号分隔,加了会报错;
  • 类必须用new来调用,否则会报错;
  • 类的实例化对象必须使用new,否则会报错;
  • 类中变量的定义不存在变量提升,这一点是为了保证子类继承必须在父类之后定义
// 案例1:类的创建
class Person{};      // 类声名方式
class Cat=class cat{};// 表达式方式// 案例2
class Person1{constructor(name,age){this.name=name;this.age=age;}sayHi(){console.log('My name is'+this.name+'; and I'm '+this.age);}
}
Person1===Person1.prototype.constructor;//true
// 以上写法和下面写法本质上一样
class Person2{constructor(name,age){this.name=name;this.age=age;}
};
Person2.prototype.sayHi=function(){console.log('My name is'+this.name+'; and I'm '+this.age);
}
// 或
class Person2{constructor(name,age){this.name=name;this.age=age;}
};
Person2.prototype={sayHi(){console.log('My name is'+this.name+'; and I'm '+this.age);}
}

3. ES6类的私有属性、私有方法

ES6并没有提供类的私有属性、私有方法特性,所以私有属性、私有方法都需要通过其他方法模拟实现;

  • 私有属性实现:私有属性提案属性前加#
class Piont{#xcnstructor(x=0){#x=x*2;}
}
  • 私有方法实现:利用Symbol+表达式方法名;
const foo=Symbol('foo');
export default class Cat{bar(){console.log('这是一个公有方法')}[foo](){console.log('这是一个私有方法)}
}

4. ES6类中静态属性、静态方法

类是实例的原型,所有类中的方法和属性都会被实例继承,而静态属性、静态方法不会被实例继承,可以被子类继承,并且通过直接调用;类中的静态属性、静态方法在类中都采用static关键字;此外静态属性和静态方法还可以在类外部定义

// 示例1 关键字stativc定义静态属性、静态方法
class Foo{name=1;static age=2;sayMethod(){console.log('这是一个公有方法')}static say(){console.log('这是一个私有方法')}
}
let foo=new Foo();
class Bar extends Foo{};consle.log(foo.name);//1
consle.log(foo.age);// Type Error foo.age is undefined
Foo.say(); // 这是一个私有方法
bar.say();  // 这是一个私有方法
foo.sayMethod(); // 这是一个公有方法
foo.say();   // TyoeError: foo.say is not a function

5. Class.name 、new.target属性

  • name属性:返回一个类的标识;
  • target属性:返回new命令所用的构造函数,而子类继承父类,是new.target返回子类;该属性可用于确定构造函数是如何调用的;
// name属性
class Foo{};
console.og(foo.name);//Foo
// target属性
class Person{constructor(age,name){this.age=age;this.width=name;console.log(new.target===Person);}
}
var obj=new Person(13,'John');// true
var obj0=Person.call(obj,(24,'Lilly'));//false
class Person1 extends Person{constructor(age,name){super(age,name);}
}
let obj1=new Person1(23,'Jim');// false

6. ES6类的继承

参考:

  • JAVA中类与对象的概念
  • java类的结构(属性、方法、构造函数)

转载于:https://www.cnblogs.com/hbzyin/p/ES6.html

ES6-18:class类及其继承相关推荐

  1. React 项目 -ES6 语法类的继承 (10)

    在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...

  2. 从babel实现es6类的继承来深入理解js的原型及继承

    先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...

  3. ES6——class类的继承与静态方法

    类的继承 通过关键字:super 代码示例: {//父类class Father{constructor(name){this.name = name;this.hobby = "抽烟,喝酒 ...

  4. (语法糖)ES6类class声明类的方式 -ES5类声明继承

    本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 ...

  5. 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)

    1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...

  6. 详解JavaScript中ES5和ES6的类、继承之间区别和联系

    导读: 很多JavaScript的初学者(比如说我)在刚开始学习这门语言的时候,往往会对函数.对象.类.继承这些概念感到迷茫和疑惑,感觉他们彼此之间长得十分相似,这就导致很难分清他们什么时候该怎么用. ...

  7. ES6学习笔记(二):教你玩转类的继承和类的对象

    文章目录 继承 super关键字 ES6中的类和对象的4个注意点: 总结 继承 程序中的继承: 子类可以继承父类的一些属性和方法 class Father { //父类constructor () { ...

  8. typescript学习之路(四) —— ts类的继承(包含es5以及es6的类继承)

    上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承 原型 ...

  9. JS高级之ES6类与对象、静态成员、类的继承

    一.类与对象 什么是类? 好比:人类.动物类 就是一个群体的统称 类里描述这一类群体,有哪些特征和行为,所谓的特征对应到代码中就是属性,行为对应到代码中就是方法 类理解为是一套描述数据的模板,但是没有 ...

  10. 第九天2017/04/18(2、类的继承、面试题:继承访问修饰符、组合、static、构造、多态)

    继承:可以使用原来的代码,代码复用 多态:代码复用.接口复用,用基类的指针"根据对象"调用"指定对象的函数". 1.继承.访问修饰符//C++类成员的3种访问级 ...

最新文章

  1. 导师讨厌什么样的学生 ?
  2. 【Clickhouse】问题记录
  3. 【Android笔记】MediaPlayer基本使用方式
  4. 静态变量和实例变量的区别
  5. 数据结构:哈希表函数构造和冲突解决方法
  6. 前端学习(3074):vue+element今日头条管理-删除文章处理完成
  7. Spring3集成Swagger2遇到问题总结
  8. c语言根据元素位置读取元素,jquery1.5.1中根据元素ID获取元素对象的代码
  9. Springcloud学习系列之Ribbon自定义负载均衡规则
  10. IDEA放大和缩小代码字体的快捷键设置
  11. 大数据、智慧城市与智慧交通 (全集)
  12. 有一个做饭好吃的妈妈是一种什么体验?
  13. Flixel横板游戏制作教程(七)—VictoryState(胜利状态)
  14. 论如何把自己变成卡通人物(OpenCV制作卡通化头像)
  15. 深度!全球机器人产业趋势及特征分析
  16. 二十六、 对偶问题(※※※)
  17. JAVA--多对多关系
  18. Overflow Freed Chunk
  19. okcoin 爱沙尼亚_我如何成为爱沙尼亚的电子居民
  20. php 传智播客 学习内容

热门文章

  1. 离开HK后的第一篇所感--重生
  2. mysql-python安装时EnvironmentError: mysql_config not found
  3. 搭建网站常见返回码40X 50X等错误的原因及解决方案
  4. 路强 java 百度云,解决 Tried to download(403): 。。。zopfli-v2.0.2
  5. python数据框去重_【Python】基于某些列删除数据框中的重复值
  6. 计算机管理是什么控件,Win7旗舰版系统WMI控件的功能作用是什么?
  7. 添加lua_非关系型数据库Redis之Lua脚本
  8. 【maven】论 maven settings 文件 mirrors 对 IDEA 的影响
  9. 【Redis】Redis 使用 redisson 做分布式锁 复盘 maven 依赖 netty 冲突
  10. 【ElasticSearch】Es 源码之 SearchTransportService 源码解读