es6新特性之 class 基本用法解析


Posted in Javascript onMay 05, 2018

javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

es6 class 与es5的面向对象的区别:

 1. 写法不同,使用关键字class

 2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象

 3.类的所有方法都在prototype属性上,但是不可枚举,且每方法结束不能使用分号

 4.类的调用必须通过new 一个实例,且类的内部默认使用严格模式

 5.不存在变量提升,必须先声明,再调用

 6.class的this 默认指向当前类

 7.class 的静态方法,使用关键字static,不需new,直接通过类来调用

 8. 实例属性和静态属性的写法,实例属性在类的内部直接使用等式(=)写法,也可以写在constructor 方法里,静态属性只需在实例属性前加一个关键字static即可

9.类的继承使用关键字extends,继承机制与es5完全不同,

es5的继承原理:先new子类的实例对象this,再通过将父类的方法和属性添加到子类的this上(parents.call(this))。

Es6的继承原理:先创造父类的实例对象this,所以要构造函数constructor()访问父类的属性使用this,必须先调用super()方法;再通过子类的constructor()来修改this

10.类的继承可以继承原生的构造函数,es5不可以

 1. 一般写法(es5 与es6)

//一.ES5写法:
function Animate(name){
  this.name = name;
}
Animate.prototype.getname = function(){
  console.log(this.name)
}
var p =new Animate("lity");
p.getname();

//二.ES6,面向对象的写法,calss,
class Person{
  //constructor():构造方法是默认方法,new的时候回自动调用,如果没有显式定义,会自动添加
  //1.适合做初始化数据
  //2.constructor可以指定返回的对象
  constructor(name,age){
   this.name = name;
  
 this.age = age;

}
  getval(){
    console.log(`你是${this.name},${this.age}岁`);
  }
}      
var c1 = new Person("lity",20); 
c1.getval();

 ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到

注意 :class 类的本质还是一个函数,类本身就指向构造函数。

typeof Person  //function
Person === Person.prototype.constructor // true

我们使用Object的一些属性或者方法检测一下 用es6 写的实例对象

//1.查看实例对象c1的__proto__是否指向Person的原型(Person.prototype)
 console.log(c1.__proto__==Person.prototype)//true
 console.log(c1.__proto__)//原型对象的所有方法
 //2.isPrototypeOf:检测实例对象是否是某个函数的原型
  console.log(Person.prototype.isPrototypeOf(c1));//true
//3.constructor:查看某个对象的构造函数
   console.log(c1.constructor);
 //4.hasOwnProperty:检测某个属性是否是自己的属性;不是原型对象上的属性和方法
   console.log(c1.hasOwnProperty("name"))//true;
 //5.in:通过in可以检测属性是否在自己中(this)或者是原型中存在
    console.log("getval" in c1)//原型上存在,true
    console.log("name" in c1)//constructor(自己上存在),true
 //6.自定义检测属性是否是存在
    function hasproperty(attr,obj){
       return obj.hasOwnProperty(attr)&&(attr in obj);
    }
    console.log(hasproperty("name",c1));//true;

2.表达式写法

//class表达式
const Myclass = class Me{//这里的Me是没有作用的
  constructor(name,jog){
    this.name = name;
    this.jog = jog;
  }
  getval(){
    console.log(`name is ${this.name},job is a ${this.jog}`);
  }
}
 var obj1 = new Myclass("lylt","teacher");
 obj1.getval();

3.class的私有方法(ES6不提供写法)和私有属性(也不提供写法,提案用#识别)

      所谓私有方法和私有属性,是指只能在类的内部使用,不能在类外部调用

 4.ES6规定Class类没有静态属性,只有静态方法:static

     所谓静态,不需要实例化对象,直接调用

class Foo {
   static classMethod() {
      return 'lity';
    }
 }
 console.log(Foo.classMethod()) // 'hello'

5.new.target属性

new是在构造函数生成实例的命令,ES6为new提供了一个属性.target,

 返回通过new 命令实例对象的class(构造函数),一般用于类的内部

//ES5:原始写法对象
function objtarge(name){
  if(new.target==undefined){
    throw new Error("必须实例化对象");
  }else{
    this.name = name
  }
}
var targets = new objtarge("litys");
console.log(targets.name);//litys
//es6写法:class内部使用new.target,返回当前的calss
class caltartget{
  constructor(name){
    console.log(new.target==caltartget);//true
    if(new.target!==caltartget){
      throw new Error("实例化对象不是caltrget");
    }else{
      this.name = name;
    }
  }
}
var caltart = new caltartget("lity");
console.log(caltart.name);//lity

6.this指向

 类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错

如下示例

class Logger {
 printName(name = 'there') {
  this.print(`Hello ${name}`);
 }
 print(text) {
  console.log(text);
 }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

分析以上示例:prinName 的方法中this,默认指向 类Logger,但是将改方法单独调用,就会报错,this会指向所在运行的环境,所以因为找不到this.print()方法而报错。

针对以上解决this指向的方法:

(1). 使用bind(this)

(2). 使用es6 的箭头函数 ()=>{}

(3).使用Proxy 代理

//1.bind()方法
class Logger {
 constructor() {
  this.printName = this.printName.bind(this);
 }
 // ...
}
//2.箭头函数 ()=>{}
class Logger {
 constructor() {
  this.printName = (name = 'there') => {
   this.print(`Hello ${name}`);
  };
 }
 // ...
}
//3. Porxy()
.................

7.class 的get() 和set() 方法

与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

class MyClass {
 constructor() {
  // ...
 }
 get prop() {// 使用 get 拦截了该方法的返回值
  return 'getter';
 }
 set prop(value) {//当对该方法赋值时能获取到该赋值
  console.log('setter: '+value);
 }
}
let obj = new MyClass();
obj.prop = 123;
// setter: 123
inst.prop
// 'getter'

8.继承

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

//es5 的继承
//父类
function Person(name,sex){
  this.name = name;//属性
  this.sex = sex;//属性       
}
//定义一个原型方法
Person.prototype.show = function(){
  console.log("我的姓名是"+this.name+"==="+"我的性别是"+this.sex)
}
//子类
function Worker(name,sex,job){      
  //构成函数伪装:使用call()方法绑定this,伪装继承父级的属性
  Person.call(this,name,sex);
  this.job = job;
}
//继承父类的原型方法:(介绍三种方法)
//写法一:通过遍历父级的原型一个个赋给子级的原型(es5 的原型是可枚举的,es6的不可以枚举)
(var i in Person.prototype){
  Worker.prototype[i] = Person.prototype[i];
}
//写法:重新new一个父级对象赋给子级的原型
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
//写法三:创建一个原型对象赋给子级的原型;(es5 推荐)
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.constructor = Worker;
var workers = new Worker("小明","男","job")
//es6 的继承
class Person{
  constructor(name,sex){
    this.name = name;//属性
   this.sex = sex;//属性
   }
}
class Worker extends Person{
   constructor(name,sex,job){
     super();
     this.job =job;
   }
}
var workers = new Worker("小明","男","job")

8.1:super关键字:在子类中不同情况用法不同,既可以当作函数使用,也可以当作对象使用。

    (1):super作为函数,只能在constructor中使用:代表父类,返回子类的this

   (2):super作为对象,在普通函数中,cuper指向父类的原型对象,可以访问原型对象的属性和方法,注意,父类的实例的属性和方法是访问不了的

   (3):super作为对象,在静态方法中,cuper指向的是父类,不是父类的原型对象

示例分析如下:

//父类
class Aniamte{
  constructor(){
    if(new.target == Aniamte){
      throw new Error("本类不能实例化,只能有子类继承");
    }
  }
  //静态方法
  static getval(mgs){
    console.log("父类的static",mgs)
  }
  //普通方法      
  setname(){
    console.log("该方法有子类重写")
  }      
}
//子类
class Dog extends Aniamte{
  constructor(){
    super();//调用此方法,this才用可以用,代表父类的构造函数,返回的却是子类
    //super() ==父类.prototype.constructor.call(子类/this)
    console.log(this)//Dog {}
    this.age = 20;
    }
  //静态方法,super在静态方法中作为对象使用,指向父类;
  static getval(mgs){
    super.getval(mgs)//父类的static niceday
    console.log("子类的static",mgs)//子类的static niceday
  }
  setname(name){
    //普通方法,super作为对象使用,指向父类的原型对象,父类.prototype;
    super.setname();//该方法有子类重写
    this.name = name;
    return this.name
  }
};
Dog.getval("niceday");//静态方法,直接调用
//var parAni = new Aniamte();//报错
var dogs = new Dog();//new 一个示例对象
dogs.setname("DOYS");////DOYS

8.2.原生构造函数的继承,ES5不支持,ES6利用extend可以继承原生构造函数

//ESMAScript的构造函数有以下几种
/* Boolean()
* Unmber()
* String()
* Array()
* Date()
* Function()
* RegExp()
* Error()
* Object()
*/
//实例一:自定义类Myarray 继承了原生的数组的构造函数,拥有原生数组的属性和方法了
class Myarray extends Array{
  constructor(){
  super();
  console.log(this.constructor.name)//Myarray
  }
}
var myarr = new Myarray();
console.log(Object.prototype.toString.call(myarr));//[object Array]
myarr.push(1,2,1);
console.log(myarr.length)//3

总结

以上所述是小编给大家介绍的es6新特性之 class 基本用法解析,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JS hashMap实例详解
May 26 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
详解vue中组件参数
Jul 09 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
JS同步、异步、延迟加载的方法
May 05 #Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 #Javascript
JS文件中加载jquery.js的实例代码
May 05 #jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 #Javascript
js动态引入的四种方法
May 05 #Javascript
关于HTML5的data-*自定义属性的总结
May 05 #Javascript
深入浅析Vue.js计算属性和侦听器
May 05 #Javascript
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
brook javascript框架介绍
2011/10/10 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
在python shell中运行python文件的实现
2019/12/21 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
初中毕业生自我评价
2015/03/02 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS