首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js oop的特性

JavaScript(JS)是一种基于原型的面向对象编程(OOP)语言,尽管它的OOP特性与其他传统OOP语言(如Java或C++)有所不同。以下是JavaScript中OOP的几个主要特性:

1. 封装(Encapsulation)

封装是将数据(属性)和操作数据的方法(函数)绑定在一起,形成一个独立的单元,即对象。在JavaScript中,可以通过构造函数和原型来实现封装。

代码语言:txt
复制
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('Alice', 30);
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.

2. 继承(Inheritance)

继承允许一个对象继承另一个对象的属性和方法。JavaScript通过原型链实现继承。

代码语言:txt
复制
function Student(name, age, grade) {
    Person.call(this, name, age); // 调用父类构造函数
    this.grade = grade;
}

Student.prototype = Object.create(Person.prototype); // 设置原型链
Student.prototype.constructor = Student; // 修复构造函数指向

Student.prototype.sayGrade = function() {
    console.log(`I am in grade ${this.grade}.`);
};

const student1 = new Student('Bob', 15, 9);
student1.sayHello(); // 输出: Hello, my name is Bob and I am 15 years old.
student1.sayGrade(); // 输出: I am in grade 9.

3. 多态(Polymorphism)

多态允许不同类的对象通过相同的接口进行调用,产生不同的行为。JavaScript中的多态可以通过原型链和函数重写来实现。

代码语言:txt
复制
function Teacher(name, age, subject) {
    Person.call(this, name, age);
    this.subject = subject;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;

Teacher.prototype.sayHello = function() {
    console.log(`Hello, I am ${this.name} and I teach ${this.subject}.`);
};

const teacher1 = new Teacher('Charlie', 40, 'Math');
teacher1.sayHello(); // 输出: Hello, I am Charlie and I teach Math.

4. 抽象(Abstraction)

抽象是指只展示对象的关键特性,而隐藏不必要的细节。JavaScript中没有直接的抽象类或抽象方法的语法支持,但可以通过约定和设计模式来实现。

代码语言:txt
复制
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    throw new Error('Method "speak" must be implemented.');
};

function Dog(name) {
    Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog1 = new Dog('Rex');
dog1.speak(); // 输出: Rex barks.

优势

  • 代码复用:通过继承和原型链,可以减少代码重复。
  • 模块化:封装使得代码更加模块化,易于维护和扩展。
  • 灵活性:JavaScript的动态类型和原型链机制使得代码更加灵活。

应用场景

  • 复杂应用开发:在开发大型应用时,OOP可以帮助组织代码,使其更加清晰和易于管理。
  • 框架和库:许多JavaScript框架和库(如React、Vue)都利用了OOP的概念来设计API和组件。

常见问题及解决方法

  • 原型链混乱:在复杂的继承关系中,原型链可能会变得混乱。可以通过使用ES6的class语法来简化继承关系。
  • 内存泄漏:不当的原型链设置可能导致内存泄漏。确保正确设置原型链,并在不需要时解除引用。

通过理解和应用这些OOP特性,可以编写出更加结构化和可维护的JavaScript代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

OOP 三大特性:封装中的 property

显然,这样对密码的管理是非常不安全的——要进行适当的“封装”,基本要求是:密码只能通过属性读取,不能通过属性重置,即是只读的。 将 mypassword.py 中的文件按照下面方式进行修改。...注释(5)增加了一个装饰器(注释写法),它的作用就是让注释(6)所定义的方法变成以属性赋值的形式。在注释(6)的方法里面,用了一种最拙劣的加密方法。...实例的宽度和长度,分别用属性 rect.width 和 rect.height 得到,那么面积,也应该是实例的属性,不应该是方法。所以用 rect.area() 计算面积,本身就不很“OOP”。...如果用 rect.area 这样的属性形式得到实例的面积,那才符合 OOP 思想,并体现着 Python 的优雅,更蕴含着开发者的智慧。...如果读者现在“回头看”从第1章以来做过的各种练习,或许对某些问题又有了新的思考,甚至于认为书中的代码也不怎样——这说明已经有了较高的欣赏和评价能力。

48510

OOP三大特性之封装

像C语言这种结构化编程帮助我们解决了很多问题,但随现代应用系统的代码量剧增,其局限也越发明显:各模块依赖关系太强,不能有效隔离变化。 于是,OOP诞生。...但对于大部分初学就是C语言的开发人员,习惯了结构化编程思维,认为: OO=数据+函数 不能说是错的,但层次太低。结构化编程思维就如管中窥豹,只能看到局部。想要用好OOP,则需更宏观的视野。...所以,要减少该单元对外的暴露: 减少内部实现细节的暴露 减少对外暴露的接口 OOP语言都支持public、private,日常开发经常会轻率地给一个方法加public,不经意间暴露了一些本是内部实现的部分...注意区分: OO和 Java 语言 传输数据和业务对象 Java语言特点就是一切皆对象,Java中对象的概念跟OO中对象的概念不同: 前者是语言特性 后者是一种编程范式 在具体编码中,哪些属于对象,哪些不属于对象...其实如果用另一个名字“最小知识原则”可能更容易理解一些,这个也算是程序员的“黑话”吧。 虽然接触OOP已经很久了,不过写程序时,大多数人还是习惯“一个对象一张表”,也没有太多考虑封装。

50020
  • Python 面向对象 OOP-三大特性#学习猿地

    > 面向对象的三大特性:封装,继承,多态 ## 封装 > 封装就是使用特殊的语法,对成员属性和成员方法进行包装,达到保护和隐藏的目的 > 但是一定注意,不能把成员全部封装死,就失去意义了 > 被封装的成员主要是供类的内部使用...> 被特殊语法封装的成员,会有不同的访问的权限 #### 封装的级别 ``` 封装的级别     成员  ==> 公有的     _成员  ==> 受保护的 (约定俗成,而python没有具体实现)...在python中并没有实现受保护的封装,属于开发者的约定俗成。 2. python中的私有化封装是通过改名策略实现的,并不是真正的私有化 ## 继承 ### 什么是继承?...> 文化的传承,技艺的传承,衣钵的继承。。。...子类永远在父类的前面 2. 同一等级的类,按照子类中的继承顺序摆放 3.

    36810

    Python 面向对象 OOP-三大特性#学习猿地

    > 面向对象的三大特性:封装,继承,多态 ## 封装 > 封装就是使用特殊的语法,对成员属性和成员方法进行包装,达到保护和隐藏的目的 > 但是一定注意,不能把成员全部封装死,就失去意义了 > 被封装的成员主要是供类的内部使用...> 被特殊语法封装的成员,会有不同的访问的权限 #### 封装的级别 ``` 封装的级别 成员 ==> 公有的 _成员 ==> 受保护的 (约定俗成,而python没有具体实现)...在python中并没有实现受保护的封装,属于开发者的约定俗成。 2. python中的私有化封装是通过改名策略实现的,并不是真正的私有化 ## 继承 ### 什么是继承?...> 文化的传承,技艺的传承,衣钵的继承。。。...子类永远在父类的前面 2. 同一等级的类,按照子类中的继承顺序摆放 3.

    37720

    js闭包特性

    学习了一下js的闭包,主要的特点就是函数内部可以访问上一级作用域的变量。 ​ 那这个特点可以做什么呢,比如我们需要维护一个变量,但是又不想把这个变量提权到更高一级,以免污染了全局。...这个时候我们可以写一个函数,内部定义变量,然后定义维护变量的方法。这样我们可以随时修改这个变量,同时也不需要在全局定义变量,把变量的作用域限制在了方法内部。 ​...有这样一个案例,我们需要在鼠标按下某个按钮的时候开启一个定时器,然后鼠标抬起的时候又关闭这个定时器。...定时器内部我们可以有自己的逻辑,但是定时器的所有逻辑我们不能扩大到外面,要保证造成的影响是最小的 function Timer(){ let t this.start=function(){...,这样会污染全局,因为定时器的引用对于全局是没有用的。

    2.5K20

    python的OOP机制

    python的OOP机制 在Python中,实际上一切都是对象,我们使用的内置数据类型,本质上也是类的实例化。...除此之外,python的OOP模型基本就是处理内置类型的函数。 OOP不仅是一门技术,更是一种经验。...因为OOP不是在所有场景下都优于POP(Procedure-Oriented Programmin) python是一门一致性非常好的语言,大多数使用OOP的方式,都可以统一表达为: object.attribute...因此通过搜索将I2.w解析为C3.w,用OOP的术语来讲就是“I2从C3继承了属性w”。...OOP是关于代码重用 类所支持的代码重用方式是python中其它方式难以提供的,事实上,代码重用也是OOP最重要的目的。通过类,我们可以定制现有的代码来实现需求。

    42230

    VFP 中的 OOP

    三十年弹指一挥间,但是仍旧有很多 foxer 对 OOP(面向对象) 这个概念懵懵懂懂。 OOP 是 VFP 中一个非常重要的概念。核心概念就是类和对象。而这些,在 VFP 中是天然存在的。...假设你完全不懂什么是 OOP,但是仍旧可以使用 VFP 编写可运行的应用程序。...那么,你编写的每一个表单,就天然使用 OOP 技术(例如,新建一个表单,在属性窗口中查看 BaseClass 属性的值,它为 "Form"。...所以,对于排斥 OOP 的一些伪 foxer,最好还是绕着走......)。是什么原因造成很多 foxer 对此毫无感觉的呢?我个人看法,也许是因为 VFP 的“集成度”太高了。...因此,我才会强调,如果理解了 VFP 的 OOP,X# 的学习几乎无明显的学习曲线。 但是,仅仅掌握这些技术就足够了吗? 实质上,OOP 重要的不是技术,而是思想。

    8100

    Vue.js基础特性

    计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可 绑定表达式 一段绑定表达式可以由一个简单的js表达式和可选的一个或多个过滤器组成...,即在 {{}}内部支持js表达式 {{}} 内的表达式是非常便利的,但是它们实际上只用于简单的运算,并且只能够支持单个js表达式,多个就会报错。...这是计算属性无法做到的。 事件绑定与监听 之前我们已经讲解过v-on这个指令,可以监听dom,触发js代码,在这里我们先做一个简单的回顾 <!...new Vue()和Vue.extend() 之前我们讲解到,vue的两大特性: 数据的 双向绑定和组件化 在这里,我们对组件化进行更深一步的了解 new Vue() new Vue()创建的是vue...() 在vue中给我们提供的创建组价的方式, 在这里,我们先了解一下这个方法,之后再做详细的讲解 两者的共性 构造器 每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例

    1.9K10

    我个人对OOP的理解

    OOP面向对象的思维: pay1:封装 A.避免使用非法数据赋值 B.保证数据的完整性 C.避免类内部发生修改的时候,导致整个程序的修改 pay2:继承 A.继承模拟了现实世界的关系...,OOP中强调一切皆对象,这符合我们面向对象的编程思考方向 B.继承实现了代码的复用,这在例子中我们已经有所体会,合理地使用继承,会使我们的代码更加简洁 C.继承使得程序结构清晰,子类和父类的层次结构更清晰...,最终的目的是是子类只关注子类的相关行为和状态,无须关注父类的行为和状态.例如,学员只需要管 理学号、爱好这种属性,而公共的姓名、年龄、性别属性交给父类管理 pay3:多态 A.相同的两个或者是多个属于不同类的对象...,对于同一个消息(方法的调用)做出不同响应的行为方式 pay4:接口 A.接口是对继承单根性的扩展:请你回想一个我们在第六章的继承中的问题,在C#中,一个子类可以继承多个父类吗?...D.接口的使用方便团队的协助开发:例如一个系统,加入要实现对象的排序功能,实现接口的专门实现接口,而做排序功能的专门做排序,如果一 个系统都能够做到这种设计,便可以更为方便的使用开发团队进行的分工明确的协作开发

    62430

    JS面向对象高级特性

    本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:   1 对象的创建方法   2 对象的对象属性、私有属性、类属性   3 对象的对象方法、私有方法...、类方法   4 javascirpt的继承、封装、与多态   对象的创建方法:   对象的创建可以通过两种方式,第一种通过对象初始化的方法: var person={...var f = new demoFunc1(); f.objFunc1(); f.objFunc2();   继承、封装与多态   JS...如果单纯的使用apply方法,子类的原型是子类;如果使用prototype,那么子类的原型也将继承父类。   ...如果开启注释的部分,可以发现,cat类的原型也变成了Animal。 ?

    1.9K100

    【前端词典】4 个实用有趣的 JS 特性

    前言 最近在学习的过程中发现了我之前未曾了解过的一些特性,发现有些很有趣并且在处理一些问题的时候可以给我一个新的思路。 这里我将这些特性介绍给大家。...4 个有趣的 JS 特性 利用 a 标签解析 URL 有的时候我们需要从一个 URL 中提取域名,查询关键字,变量参数值等,一般我们会自己去解析 URL 来获取这些内容。...可是你或许不知道还有更简单的方法。 即创建一个 a 标签将需要解析的 URL 赋值给 a 的 href 属性,然后我们就能很方便的拿到这些内容。...所以我们可以用这个特性来处理曝光埋点,而不是用 getBoundingClientRect().top 这种更加损耗性能的方式来处理。...ele.getBoundingClientRect().top; self.titleFixed = offsetTop < 0; }, 50)); }}, 希望这 4 个特性可以对你有所帮助

    54050

    Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性、工具和改进。...以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext JS 和 Sencha Touch的所有组件, 只用一个代码基即可,满足所有设备的用户体验...•Sencha枢轴网格透视网格插件,使您能够快速和容易的Ext JS应用程序添加强大的分析功能。你可以构建应用程序,让用户发现大量的在你的Ext JS网格数据的关键见解。...•Sencha Cmd的Ext JS 6的每一个主要版本,我们更新了Sencha CMD并使其更容易和更快的开发建设及其应用。...•Sencha JetBrains的插件,我们创造了这些流行的IDE插件,这使得Ext JS开发更快和更容易,大大提高了生产效率。

    1.3K50

    【JS】380- JavaScript 正则新特性

    概括 如果你曾用 JavaScript 进行过复杂的文本处理操作,那么你将会喜欢 ES2018 中引入的新特性。本文将详细介绍第9版标准如何提高 JavaScript 的文本处理能力。...ECMAScript 2018(简称 ES2018)是该标准的第九版,引入四个新特性进一步提高了 JavaScript 的文本处理能力: 后行断言 具名组匹配 s 修饰符:dotAll 模式 Unicode...属性类 以下小节详细介绍这些新特性 后行断言 断言能够根据之前或之后的内容匹配一系列字符,丢弃可能不需要的匹配。...当需要处理大段字符串并且意外匹配的可能性很高时,这一特性尤为重要。幸运的是大多数正则表达式都支持后行断言和先行断言。 在 ES2018 之前,JavaScript 中只支持先行断言。...总结 ES2018 在之前标准上增加正则表达式特性。新特性包括后行断言,具名组匹配,s 修饰符:dotAll 模式,Unicode 属性类。后行断言,x 只有在 y 后面才匹配。

    1K20
    领券