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

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

实例讲解:

es5的定义类方法:

   function extend(obj1,obj2){//合并对象属性的方法
for(var attr in obj2){
obj1[attr]=obj2[attr];
}
};
function Person(opt){
this.settings = {
'name':'jack',
'age':'30',
'sex':'male',
'eye':'Single eyelid',//Double-fold eyelids
'Height':'tall',//or Medium
'Weight':'fat', //or thin
}
extend(this.settings,opt);
};
Person.prototype.message=function(){
console.log(this.settings.name+"今年"+this.settings.age+'岁。'+'性别:'+this.settings.sex+"。特点:"+this.settings.eye+","+this.settings.Height+","+this.settings.Weight);
};
var p1=new Person({});
p1.message();
console.log(p1);
var p2 = new Person({
'name':'lily',
'age':'23',
'sex':'femal',
'eye':'Double-fold eyelids',//Double-fold eyelids
'Height':'Medium',//or Medium
'Weight':'Medium', //or thin
});
p2.message();
console.log(p1.__proto__ === p2.__proto__)//true;

es6的定义类方法:


   class Person{
constructor(opt) {
this.settings={
'name':'jack',
'age':'30',
'sex':'male',
'eye':'Single eyelid',//Double-fold eyelids
'Height':'tall',//or Medium
'Weight':'fat', //or thin
};
extend(this.settings,opt);
}
message(){
console.log(this.settings.name+"今年"+this.settings.age+'岁。'+'性别:'+this.settings.sex+"。特点:"+this.settings.eye+","+this.settings.Height+","+this.settings.Weight);
}
}
var p1=new Person({});
p1.message();
console.log(p1);
var p2 = new Person({
'name':'lily',
'age':'23',
'sex':'femal',
'eye':'Double-fold eyelids',//Double-fold eyelids
'Height':'Medium',//or Medium
'Weight':'Medium', //or thin
});
p2.message();
console.log(p1.__proto__ === p2.__proto__)//true;
//两个原型链是一样的说明是指向的同一个内存。

如何实现类的继承?

   es5实现类的继承方法:
   //传统的继承的写法。

   function Pchild(opt){
Person.call(this,opt);//属性通过call:this方式继承。
}
extend(Pchild.prototype,Person.prototype );//方法通过extend继承。 Pchild.prototype.languge=function(){
console.log(this.settings.name+'come from'+this.settings.country+'speak:'+this.settings.language);
}
var c1 = new Pchild({
'name':'licy',
'age':'23',
'sex':'femal',
'eye':'Double-fold eyelids',//Double-fold eyelids
'Height':'Medium',//or Medium
'Weight':'Medium', //or thin
'country':'canada',
'language':'English'
});
c1.message();
c1.languge()
console.log(c1);

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


   class Pchild extends Person{
languge(){
console.log(this.settings.name+'.come from:'+this.settings.country+'speak:'+this.settings.language+"后面是继承父级的方法");
super.message();
}
}
var c1 = new Pchild({
'name':'licy',
'age':'23',
'sex':'femal',
'eye':'Double-fold eyelids',//Double-fold eyelids
'Height':'Medium',//or Medium
'Weight':'Medium', //or thin
'country':'canada',
'language':'English'
});
c1.message();
c1.languge()
console.log(c1);
console.log(p2);

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. DNSmasq服务搭建

    .c { background: #FEFEF2; padding: 30px } hr { border: 1px dotted #70C4EF } DNSmasq介绍 DNSmasq是一个小巧且方 ...

  2. 最近完成的AndroidStudio项目实现思路及应用技术

    主要内容: Android Studio的介绍 AS中个Gradle及Groovy介绍 AS中的依赖管理 Maven以及Nexus私库管理依赖 Gradle对变种代码的管理以及多渠道打包 eclips ...

  3. Mysql 数据库date, datetime类型设置0000-00-00默认值(default)报错问题

    Mysql 数据库date, datetime类型设置0000-00-00默认值报错问题 现象:MySQL5.7版本之后,date, datetime类型设置默认值"0000-00-00&q ...

  4. hdu 6194 沈阳网络赛--string string string(后缀数组)

    题目链接 Problem Description Uncle Mao is a wonderful ACMER. One day he met an easy problem, but Uncle M ...

  5. Jquery 绑定标签事件

    为子元素绑定: $('#foreachResult').delegate('td', 'click', function () {            alert($(this).text());  ...

  6. shell脚本编程基础

       最近学习了shell脚本编程,感觉自己的脚本写的不太好,所以想把shell脚本相关的知识系统的整理一下,便于以后的学习和使用. 一.shell脚本基础    shell脚本是利用shell的功能 ...

  7. PHP初入,for循环使用

    一: 找出100-999之间的所有"水仙花数".所谓水仙花数是指一个三位 数,各位数字的立方和等于该数本身.(如153次方=1的3次方+5的3次方+3的3次方)并输出这些数字 想想 ...

  8. mysql的压缩特性-需求

    需求:最近有个插入量比较大的应用需要上,每天的插入量在1亿左右,同时会有较少的查询,表的单行长度在0.5k,就数据而言每天有近50G数据,由于每天写一张新表,保留30天的数据,一个月下来也要1.5T, ...

  9. 201521123010 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 ①ArrayList代码分析 1.1 解释ArrayList的contains源代码 ...

  10. 201521123045 《Java程序设计》第5周学习总结

    第5周-继承.多态.抽象类与接口 1. 本周学习总结 2. 书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试 ...