这次给大家带来es6中class特性使用案例详解,es6中class特性使用的注意事项有哪些,下面就是实战案例,一起来看一下。
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
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
node+koa2+mysql+bootstrap搭建论坛前后端
以上是es6中class特性使用案例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

类和方法的概念和实例类(Class):用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。方法:类中定义的函数。类的构造方法__init__():类有一个名为init()的特殊方法(构造方法),该方法在类实例化时会自动调用。实例变量:在类的声明中,属性是用变量来表示的,这种变量就称为实例变量,实例变量就是一个用self修饰的变量。实例化:创建一个类的实例,类的具体对象。继承:即一个派生类(derivedclass)继承基类(baseclass)的

在Web应用程序中,缓存通常是用来优化性能的重要手段。Django作为一款著名的Web框架,自然也提供了完善的缓存机制来帮助开发者进一步提高应用程序的性能。本文将对Django框架中的缓存机制进行详解,包括缓存的使用场景、建议的缓存策略、缓存的实现方式和使用方法等方面。希望对Django开发者或对缓存机制感兴趣的读者有所帮助。一、缓存的使用场景缓存的使用场景

jQuery是一种经典的JavaScript库,被广泛应用于网页开发中,它简化了在网页上处理事件、操作DOM元素和执行动画等操作。在使用jQuery时,经常会遇到需要替换元素的class名的情况,本文将介绍一些实用的方法,以及具体的代码示例。1.使用removeClass()和addClass()方法jQuery提供了removeClass()方法用于删除

class是python中的一个关键字,用来定义一个类,定义类的方法:class后面加一个空格然后加类名;类名规则:首字母大写,如果多个单词用驼峰命名法,如【class Dog()】。

背景最近针对公司框架进行关键业务代码进行加密处理,防止通过jd-gui等反编译工具能够轻松还原工程代码,相关混淆方案配置使用比较复杂且针对springboot项目问题较多,所以针对class文件加密再通过自定义的classloder进行解密加载,此方案并不是绝对安全,只是加大反编译的困难程度,防君子不防小人,整体加密保护流程图如下图所示maven插件加密使用自定义maven插件对编译后指定的class文件进行加密,加密后的class文件拷贝到指定路径,这里是保存到resource/corecla

Python是一种简洁、易学、高效的编程语言。它广泛应用于各种领域,如数据科学、人工智能、游戏开发、网络编程等。虽然Python自带有一些GUI库,但他们的功能较为简单,无法满足各类复杂应用的需求。因此,Python中有许多GUI库可供选择,其中wxPython是其中一个,本文将详细介绍。wxPython简介wxPython是一个开源、跨平台的GUI库,它基

在编写PHP代码时,使用类(Class)是一个非常常见的做法。通过使用类,我们可以将相关的功能和数据封装在一个单独的单元中,使代码更加清晰、易读和易维护。本文将详细介绍PHPClass的用法,并提供具体的代码示例,帮助读者更好地理解如何在实际项目中应用类来优化代码。1.创建和使用类在PHP中,可以使用关键字class来定义一个类,并在类中定义属性和方法。

基本的Java类型(boolean、byte、char、short、int、long、float和double)和关键字void通过class属性也表示为Class对象;Class类中booleanisPrimitive():判定指定的Class对象是否表示一个基本类型。包装类和Void类的静态TYPE字段;Integer.TYPE==int.class;Integer.class==int.class;数组类型的Class实例对象:Classclz=String[].class;数组的Clas


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

SublimeText3汉化版
中文版,非常好用

SublimeText3 Linux新版
SublimeText3 Linux最新版

记事本++7.3.1
好用且免费的代码编辑器

Dreamweaver CS6
视觉化网页开发工具