这篇文章给大家介绍的内容是关于JS面向对象编程中封装的解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
我们所熟知的面向对象语言如 C++、Java 都有类的的概念,类是实例的类型模板,比如Student
表示学生这种类型,而不表示任何具体的某个学生,而实例就是根据这个类型创建的一个具体的对象,比如zhangsan
、lisi
,由类生成对象体现了抽象模板到具体化的过程,这叫做基于类的面向对象方式,而 JavaScript 没有类的概念,是基于原型的面向对象方式(虽然 Es6 增加了 class
,实质是对原型方式的封装)。总结起来就是以下两点:
在基于类的面向对象方式中,对象(object)依靠类(class)来产生。
在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。
面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些属性和方法放到对象中“包裹”起来,那么我们要怎么去封装属性和方法,或者说怎么去创建对象呢(后文统一说创建对象)?下面用逐步推进的方式阐述:
对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模
对象字面量
JS中创建对象最原始的方式有两种:
对象字面量
var person = { name: "leon", age: "20", greeting: function() { alert('Hi!'); } }
为
Object
实例添加属性方法
var person = new Object(); person.name = "leon"; person.age = "20"; person.greeting = function() { alert('Hi!'); };
优点:代码简单
缺点: 创建多个对象会产生大量的代码,编写麻烦,且并没有实例与原型的概念。
解决办法:工厂模式。
工厂模式
工厂模式是编程领域一种广为人知的设计模式,它抽象了创建具体对象的过程。JS 中创建一个函数,把创建新对象、添加对象属性、返回对象的过程放到这个函数中,用户只需调用函数来生成对象而无需关注对象创建细节,这叫工厂模式:
function createPerson(name, age) { var person = new Object(); person.name = name; person.age = age; person.greeting = function() { alert('Hi!'); }; } var person1 = createPerson("leon", "20");
优点:工厂模式解决了对象字面量创建对象代码重复问题,创建相似对象可以使用同一API。
缺点:因为是调用函创建对象,无法识别对象的类型。
解决办法:构造函数
构造函数
JS 中构造函数与其他函数的唯一区别,就在于调用它的方式不同。任何函数,只要通过new
操作符来调用,那它就可以作为构造函数。来看下面的例子:
function Person(name, age) { this.name = name; this.age = age; this.greeting = function() { alert('Hi!'); }; // return this; } var person1 = new Person("leon", "20"); var person2 = new Person("jack", "21");
通过构造函数new
一个实例经历了四步:
创建一个新对象;
将构造函数内的
this
绑定到新对象上;为新对象添加属性和方法;
返回新对象(JS 引擎会默认添加
return this;
)。
而通过构造函数创建的对象都有一个constructor
属性,它是一个指向构造函数本身的指针,因此就可以检测对象的类型啦。:
alert(person1.constructor === Person) //true alert(person1 instanceof Person) // true
但是仍然存在问题:
alert(person1.greeting == person2.greeting) //false
同一个构造函数中定义了greeting()
,而不同实例上的同名函数却是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每个实例上重新创建一次。这显然是不划算的。
优点:解决了类似对象创建问题,且可以检测对象类型。
缺点:构造函数方法要在每个实例上新建一次。
解决办法:原型模式。
原型模式
终于讲到了原型模式,JS 中每个构造函数都有一个prototype
属性,这个属性是一个指针,指向原型对象,而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而实例对象中有一个<em>proto</em>
属性,它指向原型对象,也就是构造函数.prototype = = 原型对象 == 对象._proto_
,那么对象就可以获取到原型对象中的属性和方法啦。同时,所有对象中都有一个constructor
属性,原型对象的constructor
指向其对应的构造函数。
使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new
一个实例,原型对象中定义的方法都不会重新创建一次。来看下面的例子:
function Person() { } Person.prototype.name = "leon"; Person.prototype.age = "20"; Person.prototype.greeting = function() { alert('Hi!'); }; var person1 = new Person(); var person2 = new Person(); alert(person1.name); //"leon" alert(person2.name); //"leon" alert(person1.greeting == person2.greeting); //true
优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。
缺点:使用空构造函数,实例 person1 和 person2 的
name
都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。解决办法:构造函数+原型模式组合使用。
另外 JS 中还定义了一些与原型相关的属性,这里罗列一下:
Object.getPrototypeOf()
,取得实例的原型对象。
Object.getPrototypeOf(person1);
isPrototypeOf()
,判断是不是一个实例的原型对象。
Person.prototype.isPrototypeOf(person1);
hasOwnProperty()
,检测一个属性是否存在于实例中
person1.hasOwnProperty("name");
in
,判断一个属性是否存在于实例和原型中。
"name" in person1;
构造函数+原型模式
最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,同时又有对共享方法的引用,节省内存。
function Person(name, age) { this.name = name; this.age = age; } Person.prototype = { constructor: Person, nationality: "China", greeting: function() { alert(this.name); } } var person1 = new Person("leon", "20"); var person2 = new Person("jack", "21"); alert(person1.greeting == person2.greeting) //true
上面代码中用对象字面量的形式重写了原型对象,这样相当于创建了一个新的对象,那么它的constructor
属性就会指向Object
,这里为了让它继续指向构造函数,显示的写上了constructor: Person
这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。
相关文章推荐:
以上是JS面向对象编程中封装的解析的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

Dreamweaver Mac版
视觉化网页开发工具

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

Atom编辑器mac版下载
最流行的的开源编辑器

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。