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

目录
相关文章
|
5月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
485 108
|
5月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
576 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
7月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
93 2
|
7月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
226 1
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
321 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
321 5
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
XML 前端开发 JavaScript
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
125 1
2022 前端JavaScript高频手写面试题大全,助你查漏补缺

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    649
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    274
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    246
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    192
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    299
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    431
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    189
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    133
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    198
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    278