玩转JavaScript OOP[02]--类的实现
myzbx 2024-12-07 15:14 33 浏览
概述
当我们在谈论面向对象编程时,我们在谈论什么?
我们首先谈论的是一些概念:对象、类、封装、继承、多态。
对象和类是面向对象的基础,封装、继承和多态是面向对象编程的三大特性。
JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类。但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现”类”。
对象和类的概念
对象
“对象”是面向对象编程中非常重要的一个概念,一个对象是一个“东西”(某个人或某件事)的描述。
人和事都来源于现实生活,我们对现实世界的认知就是对人和事的认知。
在编程的领域,代码对于常人来说是抽象的,代码构成的应用是为了更好地解决现实世界的问题。
在分析和设计阶段,使用“对象”的概念能够更好地反应现实世界的问题。
反过来说,代码是包含一些逻辑的,这些逻辑用于描述业务,业务是包含一些业务知识的,业务知识是通过对现实世界的理解和分析总结出来的,这些问题是由现实世界的“对象”构成的。
对象包含特征和行为,用OOP的术语来说,特征是对象的属性,行为是对象的方法。
类
在现实世界中,相似的对象可以按照一定的标准来分组。例如“蜂鸟”和“老鹰”都被划分到鸟类,鸟类不是一个具体的对象,它是人们根据“蜂鸟”、“老鹰”等那些具体的鸟分析出相似的特征和行为后,归纳出来的一个概念。类相当于一个模板,我们可以基于这个模板创建不同的具体的对象。
在C#中,我们可以定义一个鸟类。
/// <summary> /// 鸟类 /// </summary> public class Bird { public void Fly { Console.WriteLine("I can fly!"); } }
虽然JavaScript是一门面向对象编程语言,但它没有提供class的语法支持。在JavaScript中,一切都是基于对象的,即使后面要讲的“原型”也都是对象,JavaScript的继承和重用也都是通过原型来实现的。
构造函数
之前我们使用new Array创建一个数组,使用new Object创建一个对象。
Array和Object是JavaScript内置的两个构造函数,尽管JavaScript没有提供类,但我们可以将Array和Object理解为“类”的概念。
需要注意的是,JavaScript“类”的概念是由构造函数实现的。
定义构造函数
构造函数也是函数,定义构造函数和其他函数并没有语法上的区别。
唯一的区别是构造函数的首字母应该大写,这也是JavaScript的编程规范。
以下定义了一个Person构造函数,我们可以将它理解为Person类。
function Person{ console.log('I am keepfool.'); }
使用构造函数
JavaScript使用类的方式和C#一样,new关键字后面跟着构造函数。
var p = new Person;
JavaScript的“类”和构造函数是同时被定义的,在JavaScript中定义“类”时,就同时定义了构造器。
定义属性和方法
现在我们已经定义好了Person类,可以为Person类添加一些属性和方法。
定义属性
在讲JavaScript对象时,我们讲了对象的属性设置和访问。
var cat = { color : 'black' }; console.log(cat.color);
JavaScript类的属性定义方式则有些不同,在构造函数中使用this关键字定义属性:
function Person(name){ this.name = name; }
- 第一行代码,声明了Person类,并定义了构造器。
- 第二行代码,定义了name属性。
创建对象并使用属性:
var p1 = new Person('James'); var p2 = new Person('Cury');
p1和p2是两个不同的对象,修改p1.name不会影响p2.name。
p1.name = 'Lebron James';
定义方法
首先,我们区分一下术语“函数”和“方法”,“函数”是独立的单元,而“方法”是依赖于类这个主体存在的。在JavaScript中,方法是定义在构造函数中的函数,在构造函数中使用this关键字定义方法:
function Person(name) { // 定义属性 this.name = name; // 定义方法 this.sayHello = function { return 'Hello, I am ' + this.name; } }
使用方法:
constructor属性
当创建一个对象时,一个特殊的属性被JavaScript自动地分配给对象了,这个属性就是constructor属性。
在chrome控制台输入p1.constructor
,可以看到p1对象的constructor属性指向一个函数。
瞧瞧这个函数的内容,这不正是Person构造函数吗?
这表示我们也可以通过p1.constructor属性创建对象,
var p3 = new p1.constructor('Steve Nash');
这行代码阐述了一句话:“我不关心p1对象是怎么创建的,但我想让另一个对象如p1一样创建!”
在Chrome控制台使用instanceof操作符,可以看到p1、p2、p3都是Person类的实例
另外,当我们以{}
方式创建对象时,实际上也调用了Object构造函数。
var o = {};
这行代码声明了一个对象,尽管我们没有设置任何属性和方法,但JavaScript引擎默认给它设置了constructor属性。
o.constructor
指向的是Object构造函数,[native code]
显示了Object是JavaScript内置的函数。
prototype属性
在JavaScript中,定义一个函数时,函数就会拥有prototype属性,构造函数也不例外。
下图说明了Person构造函数的prototype属性是一个对象,它是属于函数的,我们称这个属性为原型对象。
从Person类的角度出发,我们也可理解为prototype属性是属于Person类的。
同时Person类的实例是没有prototype属性的,上图的p1.prototype是undefined,这说明prototype属性是共享的,这有点像C#中的静态属性。
设置prototype
既然prototype是一个对象,那就可以为它添加属性和方法。
在函数的protpotype属性上定义属性和方法,与设置普通对象的属性和方法没什么区别。下面的代码为Person.prototype定义了属性和方法。
function Person(name){ this.name = name; this.sayHello = function { return 'Hello, I am ' + this.name; } } // 在构造函数的prototype对象上定义属性和方法 Person.prototype.height = 176; Person.prototype.run = function{ return 'I am ' + this.name + ', I am running!'; } var p1 = new Person('James');
使用prototype
在Person.prototype中定义的属性和方法,可以直接被Person类的实例使用,仍然是以object.property
的方式使用。
需要特别注意的是,name
和sayHello
是属于Person类的实例,而height
和run
是不属于Person类的实例。
小技巧:通过hasOwnProperty方法可以查看对象是否包含某个属性或方法。
自有属性 vs. prototype的属性
Person类的实例既可以使用Person类中的属性,又可以使用Person.prototype中的属性。那么Person类的属性和Person.prototype的属性有什么差别呢?
首先,我们可以将Person类中的属性和方法理解为“实例属性”。由于prototype是共享的,我们可以将prototype中的属性和方法理解为“共享属性”。
“实例属性”和“共享属性”的差别主要体现在性能上。每创建一个Person的实例,就会产生一个name属性和sayHello方法的副本,而height属性和run方法则是所有实例共享一个副本。
既然如此,这意味着sayHello方法可以提到prototype中。另外,不同的Person实例height可能会不一样,应将它放到Person类中更合理。
function Person(name,height){ this.name = name; this.height = height; } Person.prototype.sayHello = function{ return 'Hello, I am ' + this.name + ', my height is ' + this.height + 'cm.'; } Person.prototype.run = function{ return 'I am ' + this.name + ', I am running!'; } var p1 = new Person('James',203); var p2 = new Person('Cury',190);
类的实现总结
- JavaScript没有类,但构造函数可以实现“类”。
- 按照JavaScript编程规范,构造函数的首字母应该大写。
- “类”的属性和方法是用
this.property
方式定义在构造函数中的。 - 函数在定义时就已经有了prototype属性,prototype属性也是一个对象。
- prototype是共享的,定义在prototype中的属性和方法可以被“类”的实例使用。
- 如果属性或方法能够定义在prototype中,就不要定义在构造函数中,使用prototype会减少内存开销。
- 上一篇:JS中的类?class语法糖??? 两分钟秒了
- 下一篇:系列专栏(十一):类语法
相关推荐
- JMeter:执行顺序与作用域(jmeter顺序执行怎么设置)
-
一、执行顺序类似于运算符或操作符的优先级,当JMeter测试中包含多个不同的元素时,哪些元素先执行,哪些元素后执行,并不是严格按照它们出现的先后顺序依次有序执行的,而是会遵循一定的内部规则,我们称之为...
- 彻底搞懂C语言指针(c语言 指针用法)
-
指针是C语言的难点,本篇文章总结一下各类指针的用法。指针是个变量,它存储的是变量的地址,这个地址指向哪里,取决于指针的类型,指针类型包括以下几种:基本类型指针数组类型指针函数类型指针结构体类型指针联合...
- Excel运算符相关知识点分享(excel运算符有哪些类型)
-
在Excel中,运算符主要用于执行各种计算和逻辑操作主要分为以下四类1.比较运算符在Excel中,比较运算符用于比较两个值,并返回逻辑结果TRUE(真)或FALSE(假)。它们常用于条件判...
- Python编程基础:运算符的优先级(python运算符优先级记忆口诀)
-
多个运算符同时出现在一个表达式中时,先执行哪个,后执行哪个,这就涉及运算符的优先级。如数学表达式,有+、-、×、÷、()等,优先级顺序是()、×、÷、+、-,如5+(5-3)×4÷2,先计算(5-3)...
- 吊打面试官(四)--Java语法基础运算符一文全掌握
-
简介本文介绍了Java运算符相关知识,包含运算规则,运算符使用经验,特殊运算符注意事项等,全文5400字。熟悉了这些内容,在运算符这块就可以吊打面试官了。Java运算符的规则与特性1.贪心规则(Ma...
- C语言零基础教学-3-运算符与表达式
-
同学们好,今天学习c元基础知识第三讲:运算符与表达式。本节内容将学习算数运算符与算数表达式。·至臻至减运算符、赋值运算符、逗号运算符、求至结运算符。→首先学习算数运算符,它包含加减乘除求余数正负。比如...
- Python运算符优先级终极指南:避免表达式计算的陷阱
-
混合表达式中的运算符优先级当Python表达式中同时出现算术运算符、布尔运算符和比较运算符时,计算顺序由运算符优先级决定:算术运算符(最高优先级)包括:乘方(**)、乘除(*,/,//,%)、加...
- Python自动化办公应用学习笔记12——运算符及运算符优先级
-
一、运算符1.算术运算符:运算符名称描述示例+加数值相加10+3=13-减数值相减10-3=7*乘数值相乘10*3=30/除浮点数除法10/3≈3.33//整除向下...
- python3-运算符优先级(python运算符优先级最高)
-
#挑战30天在头条写日记#Python运算符优先级以下列出了从最高到最低优先级的所有运算符,相同单元格内的运算符具有相同优先级。运算符均指二元运算,除非特别指出。相同单元格内的运算符从左至右分组...
- Java运算符优先级表(java语言中运算符的优先级)
-
Java语言中有很多运算符,由于运算符优先级的问题经常会导致程序出现意想不到的结果,为了避免程序可能由于运算顺序而导致一系列的问题,Java初学者需应尽可能掌握这些运算符规律图示给大家详细介绍了运算符...
- Excel公式中运算符类型及优先顺序
-
在Excel中公式中,用到的一些运算符是有优先计算顺序的,详见下图。下面我们简单介绍一下这些运算符的使用方法。说明:Excel中所有公式及运算符,都需要在英文输入法半角状态输入,不要输入中文字符或者全...
- JavaScript基础知识14——运算符:逻辑运算符,运算符优先级
-
哈喽,大家好,我是雷工!一、逻辑运算符1、概念:在程序中用来连接多个比较条件时候使用的符号。2、应用场景:在程序中用来连接多个比较条件时候使用。3、逻辑运算符符号:4、代码演示逻辑运算符的使用:逻辑...
- 认识Excel中的运算符(excel中的运算符包括在哪里)
-
Excel中,函数与公式无疑是最具有魅力的功能之一。使用函数与公式,能帮助用户完成多种要求的数据运算、汇总、提取等工作。函数与公式同数据验证功能相结合,能限制数据的输入内容或类型,还可以制作动态更新...
- JavaScript 中的运算符优先级(javascript中的运算符分为哪几种?)
-
#寻找热爱表达的你#新人求关注,点击右上角↗关注,博主日更,全年无休,您的关注是我的最大的更新的动力~感谢大家了运算符优先级在JavaScript中是指决定表达式中不同操作符执行顺序的规...
- 从几个细节问题出发,如何写好产品需求文档?
-
来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。这篇文章暂时不讨论什么是需求文档,也不强调需求文档的重要性等等,就简单地从各种细节问题出发如何写好一份需求文档。一份好...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)