前端开发教程: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……

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

相关文章
|
5天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
6天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
7天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
8天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
8天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
8天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲
|
8天前
|
JavaScript 前端开发 开发者
【Web 前端】JS模块化有哪些?
【4月更文挑战第22天】【Web 前端】JS模块化有哪些?
|
8天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
8天前
|
前端开发 JavaScript 索引
【Web 前端】JS的几种具体异常类型(报错)
【4月更文挑战第22天】【Web 前端】JS的几种具体异常类型(报错)
|
8天前
|
前端开发 JavaScript
【Web 前端】JS继承的方法有哪些?
【4月更文挑战第22天】【Web 前端】JS继承的方法有哪些?