广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >JavaScript普通函数有原型吗
  • 968
分享到

JavaScript普通函数有原型吗

javascriptprototype属性 2022-11-22 23:11:33 968人浏览 安东尼
摘要

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。函数的prototype属性(原型)一、 只要我们创建一个函数,该函数就会自动获得一个prototype属性,这个属性指向函数的原型对象。创建fn函

教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

函数的prototype属性(原型)

一、 只要我们创建一个函数,该函数就会自动获得一个prototype属性,这个属性指向函数的原型对象。

1.png

创建fn函数自动获得prototype属性,该属性是一个对象即该函数的原型对象,我们可以看到原型对象默认会有一个constructor属性,该属性是指向函数自身即fn。

原型的作用其实就是为类(函数)提供了一个【公共区域】,在这个公共区域中声明的属性和方法能够被所有通过这个类所创建的对象所访问到。减少内存消耗。

二、 函数的prototype属性是一个对象

typeof fn.prototype  //"object"

prototype属性是一个对象,那么我们除了以普通对象的形式访问对应的属性和方法以外,还可以用什么方式访问呢?答案就是当 函数作为‘构造函数’,我们是用‘new关键字创建实例’来访问prototype属性中对应的属性和方法

function Fn(){
    this.name = "CJF"}
Fn.prototype.name="CJF1";
Fn.prototype.getName = function(){
    return this.name;
}var f = new Fn();
f.name;//输出 'CJF'f.getName(); //输出 'CJF'Fn.prototype.getName();//输出 'CJF1'

可以看到当函数作为构造函数创建实例的时候,该实例就可以调用原型对象上的方法,此时的this是指向f ;实例f访问name属性,因为其自身有name属性,可以访问到,所以输出 ‘CJF’,自身没有name属性,那么脚本引擎就会去查询用于创建当前对象的构造函数的原型(相当于我们访问f.constructor.prototype),找到构造函数原型对象有name属性就会返回‘CJF1’。(f和其原型对象都有name属性,对象自身属性的优先级高于原型对象)

function Fn(){}
Fn.prototype.name="CJF1";
Fn.prototype.getName = function(){
    return this.name;
}var f = new Fn();
f.name;//输出 'CJF1'f.getName(); //输出 'CJF1'Fn.prototype.getName();//输出 'CJF1'

三、prototype原型对象的 “实时性”

由于javascript中,所有对象都是通过传引用的方式来传递,我们每次新创建函数实例中都没有一份属于自己的原型副本,也就是说原型对象是所有实例共享的,我们修改函数的原型对象,那么有该函数创建的所有实例对象的prototype都会跟着变化。

function Fn(){}
Fn.prototype.name="CJF1";
Fn.prototype.getName = function(){
    return this.name;
}var f = new Fn();
f.name;//输出 'CJF1'f.getName(); //输出 'CJF1'f.getAge();//此时没有实例f并没有getAge方法  浏览器会报错 Uncaught TypeError: f.getAge is not a function//加上后面的就可以正常访问了Fn.prototype.getAge = function(){
    return 20;
}
f.getAge();//20

四、原型链
刚才我们有了解到,当对象自身属性和原型属性相同时,自身属性优先级高于原型属性,但是当对象自身没有我们要访问的属性或者方法时,就会沿着创建当前对象的构造函数的原型(原型链)查找要访问的属性,一旦查找到就返回对应属性,没查找到对应属性返回undefined,但是没查找到要访问的方法会报错(因为没有该方法却还要执行该方法所以报错)。

function Fn(){}
Fn.prototype.name="CJF1";
Fn.prototype.getName = function(){
    return this.name;
}var f = new Fn();
f.constructor.prototype == Fn.prototype //true

2.png

由上图我们可以看到实例f._proto_(前后各两个下划线)指向的是一个对象,而这个对象就是Fn.prototype,当我们访问实例f没有的属性或者方法是,就会沿着这个秘密链接_proto_)查找我们要访问的,一直找到Object.prototype,一旦查找到就返回对应属性,没查找到对应属性返回undefined,但是没查找到要访问的方法会报错。这个秘密链接只用于学习和调试,在实际开发别用(建议使用Object.getPrototypeOf方法)。

3.png

如果我们调用f.toString(),因为实例f没有toString方法,所以它就会沿着秘密链接查找Object.prototype,因为Object 是最顶层父类,其他的对象都是直接或者间接继承自他,秘密链接找到它之后,有结果就返回,没有就返回undefined或者报错。所以出现Object.prototype._proto_ = null。

以上就是JavaScript普通函数有原型吗的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript普通函数有原型吗

本文链接: https://www.lsjlt.com/news/173435.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript普通函数有原型吗
    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。函数的prototype属性(原型)一、 只要我们创建一个函数,该函数就会自动获得一个prototype属性,这个属性指向函数的原型对象。创建fn函...
    99+
    2022-11-22
    javascript prototype属性
  • JavaScript普通函数有没有原型
    本篇内容介绍了“JavaScript普通函数有没有原型”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript普通函数有原型。在J...
    99+
    2023-07-04
  • JavaScript如何把普通函数改成箭头函数
    小编给大家分享一下JavaScript如何把普通函数改成箭头函数,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!把普通函数改成箭头函数const func = function() {...
    99+
    2023-06-27
  • JavaScript中箭头函数与普通函数的区别详解
    本文为大家讲解了JavaScript中箭头函数与普通函数的区别,供大家参考,具体内容如下 箭头函数: let fun = () => { console.log('...
    99+
    2022-11-12
  • JavaScript 箭头函数的特点、与普通函数的区别
    目录1. 箭头函数的使用1. 普通函数到箭头函数2. 省略大括号和 return3. 省略小括号2. 箭头函数与普通函数的区别1. 箭头函数的 this 是父级作用域的 this2....
    99+
    2022-11-12
  • JS数组遍历普通函数有哪些
    这篇文章将为大家详细讲解有关JS数组遍历普通函数有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JS数组遍历普通函数优点:支持流程控制(break、continue、return)forconst&n...
    99+
    2023-06-17
  • JavaScript箭头函数与普通函数的区别示例详解
    目录箭头函数与普通函数的区别箭头函数的理解箭头函数里的this指向总结箭头函数与普通函数的区别 要讨论箭头函数和普通函数的区别,首先来看看两者的基本格式 普通函数和箭头共同点就是圆...
    99+
    2022-11-13
    JavaScript箭头函数普通函数 JavaScript 箭头普通函数区别
  • es6箭头函数和普通函数的区别有哪些
    这篇文章主要介绍“es6箭头函数和普通函数的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数和普通函数的区别有哪些”文章能帮助大家解决问题。ES6 箭头函数的主要区别如下:&n...
    99+
    2023-06-17
  • es6中箭头函数和普通函数的区别有哪些
    这篇文章主要介绍es6中箭头函数和普通函数的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 区别:1、箭头函数的定义要比普通函数定义简洁、清晰得...
    99+
    2022-10-19
  • javascript的构造函数, 原型,原型链和new是什么
    这篇“javascript的构造函数, 原型,原型链和new是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“j...
    99+
    2023-06-29
  • javascript原生函数有哪些
    javascript中的原生函数有:1.Array(),构建数组的内建构造器函数;2.Number(),将对象的值转换为数字;3.String(),将对象的值转换为字符串;4.Boolean(),将对象的值转换为字符串;5.Date(),返...
    99+
    2022-10-20
  • Javascript有什么函数类型
    这篇文章主要讲解了“Javascript有什么函数类型”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript有什么函数类型”吧! ...
    99+
    2022-10-19
  • javascript数值型只有一种吗
    本文小编为大家详细介绍“javascript数值型只有一种吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript数值型只有一种吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2022-10-19
  • javascript的构造函数,原型,原型链和new你了解多少
    目录1、什么是构造函数?2、如何通过构造函数创建一个对象?3、new一个对象的过程发生了什么?4、什么是原型?5、原型、构造函数、实例的关系?6、什么是原型链?7、类?总结1、什么是...
    99+
    2022-11-13
  • 实例详解JavaScript构造函数和原型
    以上就是实例详解JavaScript构造函数和原型的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-24
    javascript
  • Javascript的函数类型有哪些
    Javascript中函数的类型有:1.构造函数,使用new关键字定义或调用;2.匿名函数,没有实际名字;3.闭包函数,具有访问另一个函数作用域中变量的权限;4.动态函数,通过字符串动态指定参数列表和函数体;Javascript中函数的类型...
    99+
    2022-10-18
  • JavaScript构造函数与原型之间的联系
    目录一、构造函数和原型1、构造函数2、构造函数的问题3、构造函数原型 prototype4、对象原型 __proto__5、constructor 构造函数6、构造函数、实例、原型对...
    99+
    2022-11-12
  • JavaScript原型链中函数和对象的理解
    目录__ proto__prototype.__ proto__理解__ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的...
    99+
    2022-11-13
  • JavaScript构造函数和原型使用实例分析
    本文小编为大家详细介绍“JavaScript构造函数和原型使用实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript构造函数和原型使用实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1...
    99+
    2023-07-04
  • 【Kotlin】DSL 领域特定语言 ( apply 标准库函数分析 | 普通匿名函数 | 扩展匿名函数 | 泛型扩展匿名函数 )
    文章目录 一、DSL 领域特定语言二、apply 标准库函数分析1、apply 函数展示2、apply 函数原型分析函数原型参数和返回值分析 3、匿名函数类型分析4、扩展函数回顾5、泛型扩展函数函数类型6、泛型扩展匿名函数7、...
    99+
    2023-08-30
    kotlin 匿名函数 扩展匿名函数 泛型扩展匿名函数 标准库函数
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作