javascript原型是什么?javascript原型的详细解说

本篇文章给大家带来的内容是关于javascript原型是什么?javascript原型的详细解说 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

原型

原型还是比较重要的,想单独来细说一下,说到原型,那么什么是原型呢?

构造函数创建出来的时候,都有一个prototype(原型)属性,这个属性是一个指针,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
说白了就是可以在构造函数上调用prototype属性来指向原型,从而创建那个对象实例的原型对象

使用原型有什么好处呢?

使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。

立即学习“Java免费学习笔记(深入)”;

转晕了麽?是不是超级乱?又构造函数,又原型,又实例,不担心,我一句话点破你
我们所有的构造函数最终都要演变成实例才有意义,因为在构造函数中定义方法无法被所有的实例共享,因此只能找构造函数的上一级,就是原型,在原型上定义的属性和方法可以被所有的实例所共享,这就是对原型对象的性质

看个图你就知道了,它们三者之间就是三角恋关系
408152979-5b8c019e5a2c8_articlex.png
很通俗易懂了吧
构造函数.prototype = 原型
原型.constructor = 构造函数
实例对象.constructor = 构造函数(这是因为实例对象在自身找不到constructor属性,那么他会通过__proto__去原型中找,通过原型搭桥指向了构造函数)
实例对象.__proto__ = 原型

原型是打印显示不出来的,只能通过 构造函数.prototype 去表示

下面介绍另外两个获取原型的方法

isPrototypeOf()方法:用于判断这个实例的指针是否指向这个原型。
Object.getPrototypeOf()方法:获取实例的原型,这个方法支持的浏览器有IE9+、Firefox 3.5+、Safari 5+、Opera 12+和Chrome,因此比较推荐通过这个方法获取对象的原型。

假定有个Person构造函数和person对象Person.prototype.isPrototypeof(person)  // 返回true说明前者是person1的原型Object.getPrototypeOf(person) === Person.prototype // 获取person的原型

登录后复制

多个对象实例共享原型所保存的属性和方法的基本原理
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性值。

我们可以访问原型中的值,但是却不能重写原型中的值,如果我们在实例中添加一个属性,而这个属性名和原型中的重名,则这个属性将会屏蔽(复写)原型中的那个属性。

function Person() {}Person.prototype.name = "George"Person.prototype.sayName = function() {    console.log(this.name)}let person1 = new Person();let person2 = new Person();person1.name = "命名最头痛";// 在这一环节,person1.name会从他实例中找,若实例没找到,则继续搜索它的原型对象console.log(person1.name); // 命名最头痛 console.log(person2.name); // George

登录后复制

在实例对象中添加一属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接

若想完全删除实例属性,可使用delete操作符,从而让我们能够重新访问原型中的属性。

delete 操作符的使用

依旧用上面那个例子delete操作符可用于删除对象的属性,无论是实例上的属性,还是在原型上的属性都可以删delete person1.name    // 删除这个实例的属性delete Person.prototype.name    // 删除原型上的属性delete Person.prototype.constructor // 删除constructor属性,这样就没办法指回函数了

登录后复制

hasOwnProperty()方法可用来检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例时,才返回true,也可以这样理解,hasOwnProperty方法用于检测这个属性是否是对象本身属性。
obj.hasOwnProperty(‘属性名’)

Demo:

function Person(){   this.name = '命名最头痛'}var person = new Person()Person.prototype.age = '18'console.log(person.hasOwnProperty('name'))  // trueconsole.log(Person.prototype.hasOwnProperty('age')) // true

登录后复制

in操作符

in操作符有两种用法
①放在for-in循环中使用,for-in能够返回所有能够通过对象访问的、可枚举的(enumerable)属性(可枚举属性可参看一眼看穿

以上就是javascript原型是什么?javascript原型的详细解说的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2742462.html

(0)
上一篇 2025年3月8日 02:49:48
下一篇 2025年2月19日 02:52:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 全面分析javascript继承的原理

    本篇文章给大家带来的内容是关于全面分析javascript继承的原理 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 继承 我们知道JS是OO编程,自然少不了OO编程所拥有的特性,学习完原型之后,我们趁热打铁,来聊聊OO编…

    编程技术 2025年3月8日
    200
  • (超经典)javascript中对象继承方式的总结

    本篇文章给大家带来的内容是关于(超经典)javascript中对象继承方式的总结 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、原型链继承 重点:利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数,原型…

    编程技术 2025年3月8日
    200
  • javascript中DOM的表单操作(附代码)

    dom中的表单可以进行什么样的操作,操作的方法是什么?本篇文章就分享给大家javascript中dom的表单操作,内容很详细,一起来看看吧。 1、获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集…

    编程技术 2025年3月8日
    200
  • javascript中DOM的事件分析(附代码)

    事件是什么?事件又有什么用?本篇文章将给到大家分享关于javascript中dom的事件分析,给大家介绍了关于事件的概念以及事件的用法。 事件 1、事件是什么 让JS知道程序用户行为,比如用户点击HTML页面中的某个按钮和用户输入用户名与密…

    编程技术 2025年3月8日
    200
  • 前端模板是什么?前端模板的原理介绍以及实例

    前端模板是什么?前端模板该如何实现?很多朋友可能对这个不太了解,那么,下面这篇文章将给大家介绍一下关于前端模板的原理以及简单的实现代码。 前端模板的发展 模板可以说是前端开发最常接触的工具之一。将页面固定不变的内容抽出成模板,服务端返回的动…

    编程技术 2025年3月8日
    200
  • Vue基于vuex和axios实现加载效果以及axios的安装配置

    本篇文章给大家带来的内容是关于vue基于vuex和axios拦截器实现loading效果及axios的安装配置,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 准备 利用vue-cli脚手架创建项目 进入项目安装vuex、a…

    2025年3月8日
    200
  • React中的函数子组件和高阶组件的详解

    这篇文章给大家带来的内容是关于react中的函数子组件和高阶组件的详解 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在接触过React项目后,大多数人都应该已经了解过或则用过了HOC(High-Order-Compon…

    编程技术 2025年3月8日
    200
  • javascript中reduce的用法总结(附代码)

    这篇文章给大家带来的内容是关于javascript中reduce的用法总结(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近经常在项目中经常看到别人用reduce处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨…

    编程技术 2025年3月8日
    200
  • 使用react开发日历组件的方法详解

    本篇文章给大家带来的内容是关于php中如何得到小程序传来的json数组数据(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 准备工作 提前需要准备好react脚手架开发环境,由于react已经不支持在页面内部通过js…

    编程技术 2025年3月8日
    200
  • jQuery中的选择器是什么?jquery选择器的介绍

    本篇文章给大家带来的内容是关于jquery中的选择器是什么?jquery选择器的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 选择器 选择器是什么 jQuery的选择器是用于定位HTML页面中的元素,其用法最初设计是…

    2025年3月8日
    200

发表回复

登录后才能评论