前端开发教程:Javascript中如何定义类?-阿里云开发者社区

开发者社区> 郭生生> 正文

前端开发教程:Javascript中如何定义类?

简介: 很多新手朋友第一次建网站时候,如何选择一款适合的网站源码是比较困惑的问题,选择一款好的网站源码可以节约大量时间和金钱,但是由于网站源码参差不齐,免费的,收费的,淘宝几元钱购买的,几万块钱的都有,那么怎么看一个网站源码是否值得使用呢,下面从专业的角度来分析。
+关注继续查看

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>

运行结果:
1

这样的写法相对于其它传统面向对象语言来讲,是不是很不一样?

可喜的是2015年6月正式发布了ECMAScript 6(以下简称ES6)。它是JavaScript语言的下一代标准,ES6引入了Class这个概念,会后端开发的小伙伴都知道java和c#都用class来定义类,上面的代码用ES6改造后如下:

 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(Animal===Animal.prototype.constructor);

运行结果:

1

不过很多的浏览器并不完全支持ES6,比如IE……

如果大家有更好的建议可以评论留言,欢迎大家转发。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fundebug前端JavaScript插件更新至1.7.1,拆分录屏代码,还原部分Script error.
摘要: BUG监控插件压缩至18K。 1.7.0拆分了录屏代码,BUG监控插件压缩至18K,另外我们还原了部分Script error,帮助用户更方便地Debug。请大家及时更新哈~ 拆分录屏代码 从1.7.0版本开始,我们拆分了录屏代码。
1349 0
最全总结 JavaScript Array 方法详解--《前端那些事》
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 `Coder` 对 `Array` 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。
77 0
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容
好程序员web前端教程分享3种方法实现CSS隐藏滚动条并可以滚动内容,隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
1292 0
《JavaScript启示录》——1.4 用户自定义/非原生对象构造函数
关于构造函数比较复杂的一点就是this值在函数内部的使用方式。请记住,构造函数只是一个饼干模具,在将它与new关键字一起使用时,它会创建一个拥有构造函数内部定义的属性和值的对象。在使用new关键字时,this值的字面意思是基于构造函数内部的语句创建的新对象/新实例。
1035 0
+关注
58
文章
24
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载