JavaScript：class类的实现方式及特点

在JavaScript开发中，我们通常会使用构造函数的方式来是实现实例对象的生成，代码如下：

function People(name, age) {this.name = name;this.age = age;
}
People.prototype.say = function () {console.log('hello');
}
var tom = new People('tom', 25);

但是在ES6中，新加了一个比较传统的概念---class（类），来作为对象的模板，通过class关键字，可以定义我们需要的类，具体语法如下：

class People {constructor(name, age) {this.name = name;this.age = age;}say() {console.log('hello');}
}

可以看到，定义一个类People，用到了constructor构造方法，constructor构造方法内的this指向的则是实例对象，所以可以大概得出一个结论：就是class定义类中的constructor构造方法跟我们通常定义实例对象的构造函数是类似的（即constructor构造方法 ≈ People构造函数）。还可以看到，我们给class类中定义了一个say()的方法，这里有个语法需要注意，就是在class类中定义方法时不需要添加function函数关键字，而且方法与方法之间，不能用逗号分隔。同时我们检测一下class类的属性：

class People {...};
console.log(typeof People);    // function，属于引用类型中的函数类型

同样，检测与People.prototype.constructor与class People的关系：

People === People.prototype.constructor

判定的结果是true，也就是说明：class类本身就是一个函数类型，同时class类本身指向的就是构造函数。我们先看下calss类声明对象的实现过程是咋样的：

首先，创建一个我们需要的People函数：

var People = function () {}

然后，前面我们说到的class类中的constructor构造方法中的this指向的就是实例，所以这里的constructor实际上指的就是People，那我们给People添加name和age的两个属性如下：

var People = function () {function People(name, age) {this.name = name;this.age = age;}
}

接下来就是如何将People的属性方法值添加上去？上面我们有在类中添加say()方法，那么实现的过程，我们就会利用到Object.defineProperty来给function People添加属性方法，如下：

// 先定义一个添加对象属性的方法，利用Object.defineProperty
var defineProperties = function (target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];Object.defineProperty(target, descriptor.key, descriptor);}
}var People = function () {function People(name, age) {this.name = name;this.age = age;}// 给function People添加say属性方法defineProperties(People, [{key: 'say', value: function(){console.log('hello')}}]
}

最后就是调用并返回我们需要的实例对象People：

var People = function () {function People(name, age) {this.name = name;this.age = age;}// 给function People添加say属性方法defineProperties(People, [{key: 'say', value: function(){console.log('hello')}}]return People
}();

说完class类实现的方式，接下来说一些它的特点：

class创建的类中的定义的所有方法，不能枚举

var a = Object.keys(People.prototype);
console.log(a);   // []

定义一个类时候必须要有constructor方法，如果没有定义，会默认添加一个空的constructor

class People {}  --->   class People {constructor(){}}

在使用class类声明实例的时候也需要在前面添加new关键字

class People {...};
var tom = new People('tom', 25);

关于class类的相关是实现原理及一些特性简单介绍到这里，有想更深入学习的有志青年可以去看下阮一峰大神关于ES6新增特性的讲解，有不足之处，还望各位多多指点！

JavaScript：class类的实现方式及特点相关推荐

实现Javascript编写类的方式1(原生方式)
网上实现javascript写类的方法有很多, 总结下不外乎以下几种. 我自己学习总结了一下. 构造方法方式原型方式构造方法+原型的混合方式现在具体分析一下以上方式的优缺点: 构造方法方式这是 ...
【java】Java运行时动态生成类几种方式
1.概述转载:Java运行时动态生成类几种方式这里发现自己不知道的,原来Java 还能自己编译自己,学到了. 最近一个项目中利用规则引擎,提供用户拖拽式的灵活定义规则.这就要求根据数据库数据动态生 ...
客户端控件Javascript验证类
客户端控件Javascript验证类 2005-09-20 javascritp一直是web开发的利器,在Ajax逐渐流行以后,javascript又更焕发活力.但是别误会,本文不讨论如何用javas ...
【JavaScript】类数组详解
[JavaScript]类数组详解文章目录 [JavaScript]类数组详解什么是类数组类数组转换成数组 ES6 的方法转数组 callee属性箭头函数没有arguments HTMLCol ...
JavaScript Class类详解
ECMAScript 6 提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力.类(class)是ECMAScript中新的基础性语法糖结构,虽然ECMAScript 6类表面上看 ...
【Kotlin】Kotlin 类的继承一 ( 类继承基本方式 | final 关键字 | 子类主构造函数 | 子类次构造函数 )
文章目录 I . 类继承基本方式 II . 使用 final 禁止类继承 / 方法重写 III . 父类没有主构造函数 IV . 父类有主构造函数 V . 父类构造函数与子类构造函数总结 I . 类继 ...
javascript 定义类(转载)
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...
J2EE进阶(十五)MyEclipse反向工程实现从数据库反向生成实体类之Hibernate方式[申明：来源于网络]...
J2EE进阶(十五)MyEclipse反向工程实现从数据库反向生成实体类之Hibernate方式[申明:来源于网络] 地址:http://blog.csdn.net/sunhuaqiang1/arti ...
javascript 常用类
javascript 常用类 2008-01-09 13:34 一.验证类 1.数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iM ...

JavaScript：class类的实现方式及特点

JavaScript：class类的实现方式及特点相关推荐

最新文章

热门文章