前端开发教程：Javascript中如何定义类？
原创前端开发教程：Javascript中如何定义类？
原创
用户4831957
修改于 2019-06-24 10:10:21
修改于 2019-06-24 10:10:21
是程序猿 2019-06-22 15:18:26
前端开发教程：Javascript中如何定义类？
Javascript虽然不是面向对象语言，但是我们一样可以实现类的定义，工作中我们定义类一般用下面的方式，如下：
<script type="text/javascript">
function Animal(name, species){
this.name = name;
this.species = species;
}
Animal.prototype.walk = function (){
return this.name + "是" + this.species + "，它会抓老鼠！";
}
Animal.prototype.swim = function () {
return this.name + "是" + this.species + "，它会游泳！";
}
var obj = new Animal("咪咪", "猫");//通过new关键词创建对象
console.log(obj.walk());
var obj = new Animal("旺旺", "狗");//通过new关键词创建对象
console.log(obj.swim());
</script>运行结果：
前端开发教程：Javascript中如何定义类？
这样的写法相对于其它传统面向对象语言来讲，是不是很不一样？
可喜的是2015年6月正式发布了ECMAScript 6（以下简称ES6）。它是JavaScript语言的下一代标准，ES6引入了Class这个概念，会后端开发的小伙伴都知道java和c#都用class来定义类,上面的代码用ES6改造后如下：
<script type="text/javascript">
class Animal {
constructor(name, species) {//constructor是一个构造方法，用来接收参数
this.name = name;//this代表的是实例对象
this.species = species;
}
walk() {
return this.name + "是" + this.species + "，它会抓老鼠！";
}
swim() {
return this.name + "是" + this.species + "，它会抓看家！";
}
}
var obj = new Animal("咪咪", "猫");//通过new关键词创建对象
console.log(obj.walk());
var obj = new Animal("旺旺", "狗");//通过new关键词创建对象
console.log(obj.walk());
</script>这种写法是不是更加清晰，更像是一种面向对象的语言。
但是需要注意javascript依然不是一个面向对象的语言，ES6中的class只是一个语法糖，底层的实现方式还是一样的，为什么我会这样说，运行下面的代码。
console.log(typeof Animal)
console.log(Animal===Animal.prototype.constructor);运行结果：
前端开发教程：Javascript中如何定义类？
不过很多的浏览器并不完全支持ES6，比如IE……
如果大家有更好的建议可以评论留言，欢迎大家转发。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读