我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript普通函数有原型吗

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript普通函数有原型吗

本教程操作环境: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普通函数有原型吗的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript普通函数有原型吗

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

下载Word文档

猜你喜欢

JavaScript普通函数有原型吗

JavaScript普通函数有原型。在JavaScript中,任何一个函数都有一个prototype(原型)属性,这个属性指向函数的原型对象。原型的作用其实就是为类(函数)提供了一个“公共区域”,在这个公共区域中声明的属性和方法能够被所有通过这个类所创建的对象所访问到,可减少内存消耗。
2022-11-22

JavaScript普通函数有没有原型

本篇内容介绍了“JavaScript普通函数有没有原型”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaScript普通函数有原型。在J
2023-07-04

JavaScript如何把普通函数改成箭头函数

小编给大家分享一下JavaScript如何把普通函数改成箭头函数,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!把普通函数改成箭头函数const func = function() { console.log(a);
2023-06-27

JS数组遍历普通函数有哪些

这篇文章将为大家详细讲解有关JS数组遍历普通函数有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JS数组遍历普通函数优点:支持流程控制(break、continue、return)forconst a
2023-06-17

JavaScript箭头函数与普通函数的区别示例详解

这篇文章主要为大家介绍了JavaScript箭头函数与普通函数的区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

es6箭头函数和普通函数的区别有哪些

这篇文章主要介绍“es6箭头函数和普通函数的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6箭头函数和普通函数的区别有哪些”文章能帮助大家解决问题。ES6 箭头函数的主要区别如下: 1
2023-06-17

javascript的构造函数, 原型,原型链和new是什么

这篇“javascript的构造函数, 原型,原型链和new是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javasc
2023-06-29

实例详解JavaScript构造函数和原型

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于构造函数和原型的相关问题,以及prototype相关内容,下面一起来看一下,希望对大家有帮助。
2022-11-24

JavaScript构造函数和原型使用实例分析

本文小编为大家详细介绍“JavaScript构造函数和原型使用实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript构造函数和原型使用实例分析”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1
2023-07-04

编程热搜

目录