返回顶部
首页 > 资讯 > 前端开发 > 其他 >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://lsjlt.com/news/173435.html(转载时请注明来源链接)

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

猜你喜欢
  • 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+
    2024-04-02
  • JavaScript 箭头函数的特点、与普通函数的区别
    目录1. 箭头函数的使用1. 普通函数到箭头函数2. 省略大括号和 return3. 省略小括号2. 箭头函数与普通函数的区别1. 箭头函数的 this 是父级作用域的 this2....
    99+
    2024-04-02
  • 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+
    2024-04-02
  • c++ 内联函数和普通函数的区别
    前言 内联函数是c++为了提高程序的运行速度做的改进,它与普通函数区别在于: 编译器如何将它们组合到程序中。所以我们需要深入到程序内部。 我们的最终的可执行程序由 一组机器指令组成...
    99+
    2024-04-02
  • javascript原生函数有哪些
    javascript中的原生函数有:1.Array(),构建数组的内建构造器函数;2.Number(),将对象的值转换为数字;3.String(),将对象的值转换为字符串;4.Boolean(),将对象的值转换为字符串;5.Date(),返...
    99+
    2024-04-02
  • Javascript有什么函数类型
    这篇文章主要讲解了“Javascript有什么函数类型”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript有什么函数类型”吧! ...
    99+
    2024-04-02
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型?怎样去理解原型的...
    99+
    2024-04-02
  • javascript的构造函数, 原型,原型链和new是什么
    这篇“javascript的构造函数, 原型,原型链和new是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“j...
    99+
    2023-06-29
  • javascript数值型只有一种吗
    本文小编为大家详细介绍“javascript数值型只有一种吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript数值型只有一种吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2024-04-02
  • 详解Python中的普通函数和高阶函数
    目录什么是函数函数的嵌套调用高阶函数我们思考一下计算圆形和方形的面积为何高阶函数能够降低维度总结什么是函数 每个语言都有函数,甚至大家用的Excel里面也有函数,我们以前学习的数学也...
    99+
    2024-04-02
  • C++知识点之inline函数、回调函数和普通函数
    目录一、inline内联函数# 1.1 使用# 1.2 编译器对 inline 函数处理步骤# 1.3 优缺点# 1.3.1 优点# 1.3.2 慎用内联# 1.3.3 不宜使用内联...
    99+
    2024-04-02
  • Javascript的函数类型有哪些
    Javascript中函数的类型有:1.构造函数,使用new关键字定义或调用;2.匿名函数,没有实际名字;3.闭包函数,具有访问另一个函数作用域中变量的权限;4.动态函数,通过字符串动态指定参数列表和函数体;Javascript中函数的类型...
    99+
    2024-04-02
  • 普通人学Python能干什么?有用吗?
      学习Python到底具有怎样的作用呢学习Python是很多人都在考虑的事情,毕竟Python在我们的生活中具有非常重要的作用,也是非常热门的语言,可以从业岗位多、前景好、待遇高。  到底学习Python有用吗在这里想要告诉大家,其实情况...
    99+
    2023-06-01
  • C++普通函数指针怎么使用
    本篇内容介绍了“C++普通函数指针怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!进行C++编写程序时,你经常需要在一个函数中调用其他...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作