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

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

相关文章
|
14天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
109 2
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
15天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
61 41
|
9天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
3天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
7 0
|
14天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
85 0
|
14天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
14天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
14天前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
24 0
|
15天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
11 0