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",);
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 一样,在“类”的内部可以使用getset关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

class MyClass {
constructor() {
// ...
}
get prop() {// 使用 get 拦截了该方法的返回值
return 'getter';
}
set prop(value) {//当对该方法赋值时能获取到该赋值
console.log('setter: '+value);
}
} let obj = new MyClass(); obj.prop = ;
// 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 = ;
}
//静态方法,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(,,);
console.log(myarr.length)//
 
完结。。。谢谢

es6新特性之 class 基本用法的更多相关文章

  1. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  2. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  3. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  4. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  5. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  6. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  7. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  8. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  9. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

随机推荐

  1. Sql-exec

    --显示sql server现有的所有数据库 exec sp_helpdb --查看数据表设置的约束 exec sp_helpconstraint SubjectType --update selec ...

  2. QQ 聊天机器人小薇发布!

    简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息,发现有"感兴趣"的内容时通过图灵机器人进行智能回复 监 ...

  3. 微信公众号 报token验证失败

    最近两天一直碰到token验证失败的问题,如下图所示 然后上网疯狂的搜索答案,碰到的人还真不少,原因大概有这几个: 1)服务器URL未实名认证 2)token重名(基本不可能) 3)服务器部署的项目 ...

  4. 微信小程序现实问题之低素质客户需求问题

    ·微信小程序已经在市场摸爬滚打很久了,但是真正是否可用以及是否真正满足客户需求,市场是否真正到了火热的程度,值得怀疑. 根据本人从事小程序开发的经验,短时间内,小程序市场依然会不温不火,而此时客户的满 ...

  5. 浅谈App原生开发、混合开发及HTML5开发的优劣

    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...

  6. C# 两个结构相同的类进行赋值

    假入两个类A类和B类不有任何继承关系,它们属性名相同,怎么给他们互相赋值呢?下面的方法就可以了. public L SetProperties<T, L>(T t) where L : n ...

  7. 【Oracle】Oracle11g安装和基本的使用-转载

    一.测试操作系统和硬件环境是否符合,我使用的是win2008企业版.下面的都是step by step看图就ok了,不再详细解释. 请留意下面的总的设置步骤:--------------------- ...

  8. ES6 Map遍历、filter()筛选对象

    目录: -------- 1.map() -------- 2.filter(): ------------- 2.1.filter函数可以看成是一个过滤函数,返回符合条件的元素的数组 ------- ...

  9. Python Json获取天气预报

    #!/usr/bin/python # -*- coding: UTF-8 -*- import json import smtplib import urllib from email.mime.t ...

  10. django.db中的transaction

    transaction.set_autocommit(0) ..... ........ ................ transaction.commit() 可以使夹在其两句中间的所有SQL语 ...