es6新增class关键字使用方法详解。

通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

实例讲解:

es5的定义类方法:

  1. function extend(obj1,obj2){//合并对象属性的方法
  2. for(var attr in obj2){
  3. obj1[attr]=obj2[attr];
  4. }
  5. };
  6. function Person(opt){
  7. this.settings = {
  8. 'name':'jack',
  9. 'age':'30',
  10. 'sex':'male',
  11. 'eye':'Single eyelid',//Double-fold eyelids
  12. 'Height':'tall',//or Medium
  13. 'Weight':'fat', //or thin
  14. }
  15. extend(this.settings,opt);
  16. };
  17. Person.prototype.message=function(){
  18. console.log(this.settings.name+"今年"+this.settings.age+'岁。'+'性别:'+this.settings.sex+"。特点:"+this.settings.eye+","+this.settings.Height+","+this.settings.Weight);
  19. };
  20. var p1=new Person({});
  21. p1.message();
  22. console.log(p1);
  23. var p2 = new Person({
  24. 'name':'lily',
  25. 'age':'23',
  26. 'sex':'femal',
  27. 'eye':'Double-fold eyelids',//Double-fold eyelids
  28. 'Height':'Medium',//or Medium
  29. 'Weight':'Medium', //or thin
  30. });
  31. p2.message();
  32. console.log(p1.__proto__ === p2.__proto__)//true;

es6的定义类方法:

  1.  
  1. class Person{
  2. constructor(opt) {
  3. this.settings={
  4. 'name':'jack',
  5. 'age':'30',
  6. 'sex':'male',
  7. 'eye':'Single eyelid',//Double-fold eyelids
  8. 'Height':'tall',//or Medium
  9. 'Weight':'fat', //or thin
  10. };
  11. extend(this.settings,opt);
  12. }
  13. message(){
  14. console.log(this.settings.name+"今年"+this.settings.age+'岁。'+'性别:'+this.settings.sex+"。特点:"+this.settings.eye+","+this.settings.Height+","+this.settings.Weight);
  15. }
  16. }
  17. var p1=new Person({});
  18. p1.message();
  19. console.log(p1);
  20. var p2 = new Person({
  21. 'name':'lily',
  22. 'age':'23',
  23. 'sex':'femal',
  24. 'eye':'Double-fold eyelids',//Double-fold eyelids
  25. 'Height':'Medium',//or Medium
  26. 'Weight':'Medium', //or thin
  27. });
  28. p2.message();
  29. console.log(p1.__proto__ === p2.__proto__)//true;
  30. //两个原型链是一样的说明是指向的同一个内存。
  1.  

如何实现类的继承?

  1. es5实现类的继承方法:
  1. //传统的继承的写法。
  2.  
  3. function Pchild(opt){
  4. Person.call(this,opt);//属性通过call:this方式继承。
  5. }
  6. extend(Pchild.prototype,Person.prototype );//方法通过extend继承。
  7.  
  8. Pchild.prototype.languge=function(){
  9. console.log(this.settings.name+'come from'+this.settings.country+'speak:'+this.settings.language);
  10. }
  11. var c1 = new Pchild({
  12. 'name':'licy',
  13. 'age':'23',
  14. 'sex':'femal',
  15. 'eye':'Double-fold eyelids',//Double-fold eyelids
  16. 'Height':'Medium',//or Medium
  17. 'Weight':'Medium', //or thin
  18. 'country':'canada',
  19. 'language':'English'
  20. });
  21. c1.message();
  22. c1.languge()
  23. console.log(c1);
  1.  

es6实现继承的方法:使用extends关键字。

  1.  
  1. class Pchild extends Person{
  2. languge(){
  3. console.log(this.settings.name+'.come from:'+this.settings.country+'speak:'+this.settings.language+"后面是继承父级的方法");
  4. super.message();
  5. }
  6. }
  7. var c1 = new Pchild({
  8. 'name':'licy',
  9. 'age':'23',
  10. 'sex':'femal',
  11. 'eye':'Double-fold eyelids',//Double-fold eyelids
  12. 'Height':'Medium',//or Medium
  13. 'Weight':'Medium', //or thin
  14. 'country':'canada',
  15. 'language':'English'
  16. });
  17. c1.message();
  18. c1.languge()
  19. console.log(c1);
  20. console.log(p2);
  1.  

es6的继承使用extends关键字来继承父级,使用super来调用父级的方法。

用es6的class关键字定义一个类的更多相关文章

  1. 怎样用Javascript定义一个类

    其实Javascript中没有类这个定义,但是有类这个概念.很多人都写过这样的代码,对,没错,就是如下代码,清晰的不能再清晰了,就是一个关键字 function,然后定义一个方法名,方法名后紧跟一对括 ...

  2. Java分享笔记:自定义枚举类 & 使用enum关键字定义枚举类

    在JDK1.5之前没有enum关键字,如果想使用枚举类,程序员需要根据Java语言的规则自行设计.从JDK1.5开始,Java语言添加了enum关键字,可以通过该关键字方便地定义枚举类.这种枚举类有自 ...

  3. Java TreeSet集合排序 && 定义一个类实现Comparator接口,覆盖compare方法 && 按照字符串长度排序

    package TreeSetTest; import java.util.Iterator; import java.util.TreeSet; import javax.management.Ru ...

  4. JAVA 类的定义(定义一个类,来模拟“学生”)

    package Code413;/*定义一个类,来模拟“学生”属性 (是什么) 姓名 年龄行为(能做什么) 吃饭 睡觉 学习对应到Java的类当中 成员变量(属性) String nanme; //姓 ...

  5. Python3.x:定义一个类并且调用

    Python3.x:定义一个类并且调用 1,定一个类Shrjj(其中有属性:name, jjzt,fbsjj,etf,lof,fjlof): class Shrjj(object): def __in ...

  6. 定义一个类:实现功能可以返回随机的10个数字,随机的10个字母, 随机的10个字母和数字的组合;字母和数字的范围可以指定,类似(1~100)(A~z)

    #习题2:定义一个类:实现功能可以返回随机的10个数字,随机的10个字母, #随机的10个字母和数字的组合:字母和数字的范围可以指定 class RandomString(): #随机数选择的范围作为 ...

  7. 103-PHP定义一个类

    <?php class ren{ //定义人类 } class mao{ //定义猫类 } new ren(); //实例化人类 new mao(); //实例化猫类 new mao(); // ...

  8. 定义一个类Point,代表一个点,public属性有x和y,方法有显示点坐标 show(),构造函数有两个参数分别给x,y赋值,在main方法中构造两个对象,再创建一方法(getMiddle)为取两个点构成线段的中点的坐标,参数为2个点对象,调用此方法后得到一个新的点,编写Application,显示该对象的坐标值。

    这个题让我更加明白了类创建对象的实质 代码中用到:1.对象作形参;2.对象作返回值 以下用代码具体分析: class Point1{ public double x; public double y; ...

  9. 按要求编写一个Java应用程序: (1)定义一个类,描述一个矩形,包含有长、宽两种属性,和计算面积方法。 (2)编写一个类,继承自矩形类,同时该类描述长方体,具有长、宽、高属性, 和计算体积的方法。 (3)编写一个测试类,对以上两个类进行测试,创建一个长方体,定义其长、 宽、高,输出其底面积和体积。

    package jvxing; public class Jvxing { //成员变量 private double width; private double chang; public doub ...

随机推荐

  1. 修改xcode初始生成代码

    xcode在新建新的工程的时候会默认生成一份代码,例如新建一个c++工程,其初始的代码如下: #include <iostream> int main(int argc, const ch ...

  2. try...catch...finally语句块

    try-catch-finally语句主要是用来处理检查异常,捕获并处理,以及最后必须要执行的finally块. try-catch-finally语句入门: 1.try-catch-finally语 ...

  3. [2016-07-15]nuget包管理器控制台下的powershell脚本介绍

    博客有阵子没打理了,今天刚恢复样式,但是标题还是不太正常,总算能凑合看看. 回到正题,最近为了能在VS的程序包管理器控制台上能方便的自定义ps脚本去调整project的package,就开始看powe ...

  4. 【详细资料】ICN6202:MIPI DSI转LVDS芯片简介

    ICN6202功能MIPI DSI转LVDS,分辨率1920*1200,封装QFN40

  5. jumpserver-0.3.2 堡垒机环境搭建(图文详解)

    下载安装包:https://github.com/jumpserver/jumpserver.git 解压 三.执行快速安装脚本 cd /opt/jumpserver/install pip inst ...

  6. django模板(过滤器)

    -------------------django内建的过滤器-------------------1.add 使用形式为:{{ value | add: "2"}} 意义:将va ...

  7. javascript计算啤酒2元一瓶,4个盖换一瓶,2个瓶换一瓶,10元钱最多喝多少瓶

    var n = 0//当前剩下多少瓶加上喝赢了多少瓶 var x = 5//初始多少瓶 var y = 0//除了喝掉的,剩下多少瓶 var z = 0;//总数 var arr = []//定义一个 ...

  8. php的mysql语句里变量加不加单引号问题

    第一种[{$_GET['id']}加不加单引号都能正常执行没问题] $sql = "select * from `news` where `id` = {$_GET['id']}" ...

  9. Beta版本冲刺前准备

    Beta版本冲刺 经过紧张的Alpha阶段,很多组已经从完全不熟悉语言和环境,到现在能够实现初步的功能.下一阶段即将加快编码进度,完成系统功能.强化软件工程的体会. 1.凡事预则立,在Beta开始前, ...

  10. 团队作业8——第二次项目冲刺(Beta阶段)5.21

    1.当天站立式会议照片 会议内容: 本次会议为第三次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查总结第二次任务完成情况 ②:布置第三次任务的详细分工 ③:规定完成时间是在第四次任务之前 ④ ...