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

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

相关文章
|
21天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
44 5
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
19 0
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
50 0
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
29 0
|
1月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
19 0