web前端-JavaScript中的原型对象

简介: web前端-JavaScript中的原型对象

原型(prototype)


所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。


我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象


  • 如果函数作为普通函数调用prototype没有任何作用


  • 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性。


原型对象原理


在如下图所示中,创建一个构造函数Person,这个构造函数中有一个隐含的属性prototype,这个属性指向的对象就是原型对象,它的内存地址假设为0x123,则该构造函数对应的prototype属性则指向这个内存地址,随后通过构造函数创建一个实例per,我们可以使用__proto__来访问构造函数中的原型对象,在该实例中添加一个name属性,同时给原型对象中也添加一个属性age,这两个属性的区别就是name属性为per实例私有的,而age属性则是共有的,即使再创建一个per2实例,没有给它添加age属性,per2.age也是可以访问到原型对象中的age属性的,正如在控制台输出per.age一样,可以正常访问到原型对象中的age属性的。

向原型对象中添加的属性为公共属性,通过构造函数所创建的实例都可以访问到对应原型对象中添加的属性。


image.png


image.png


上期性能优化


传送锚点:web前端-JavaScript构造函数创建对象


上期我们说到使用构造函数创建对象中,在构造函数内创建sayName方法,每创建一个实例就会重新创建一个sayName方法,大大占用了我们的内存,之后我们将该对象的方法提取了出来,在全局作用域中重新定义了一个函数,如图:


image.png


这种方法虽然解决了内存占用的问题,但也存在一种缺陷,因为它时在全局作用域中定义,并且这个函数只用在该构造函数中,污染了全局作用域的命名空间,再开发过程中,他人再创建相同名字的函数时就会覆盖该函数,此时再通过该构造函数调用该方法时,性质就完全改变了。因此我们需要在该构造函数的原型对象中添加该方法,这样即不会占用大量内存,该构造函数创建的实例都可以访问到该方法,也不会污染全局作用域的命名空间。在开发过程中也相对安全。下面我们一起看看如何修改吧。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name = name ;
            this.age = age ;
            this.gender = gender;
        }
        Person.prototype.sayName = function(){
            console.log(this.name)
        }
        var per = new Person('suliang',21,'男');
        var per1 = new Person('小红',18,'女');
        console.log(per.sayName == per1.sayName);
        per.sayName();
        per1.sayName();
    </script>
</head>
<body>
</body>
</html>


运行结果:


image.png


in操作符和hasOwnProperty方法的使用


使用in来检查一个对象是否包含某个属性时,如果对象中没有但是该对象的原型中有,也会返回true。


image.png


而用hasOwnProperty方法时,则是检查本身对象是否含有某个属性。只有本身对象含有该属性才会返回true。


image.png


原型对象也是个对象,它本身也有原型对象,最后的原型就是Object。即到Object就没有原型了。


image.png


hasOwnProperty这个方法则是在该构造函数的原型的原型对象中。


image.png

目录
相关文章
|
4月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
4月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
4月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
8月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
4月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
535 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
9月前
|
JavaScript 前端开发 API
|
7月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
136 2
|
9月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
277 23
|
9月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
346 8