原型对象

绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创建新对象实例,而所有被创建的对象都会共享原型对象,因此这些对象遍可以访问原型对象的属性。
例如hasOwnProperty()方法存在于Object原型对象中,他便可以被任何对象当做自己的方法使用
用法object.hasOwnProperty(propertyName)
hasOwnProperty()函数的返回值为Boolean类型。如果对象object具有名称为propertyName的属性,则返回true,否则返回false

var person = {name:"Messi",age:'18',profession:"footabll player"
};
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('hasOwnProperty')); // false
console.log(Object.prototype.hasOwnProperty('hasOwnProperty')); // true

由以上代码可知,hasOwnProperty() 并不存在于 person 对象中,但是 person 依然可以拥有此方法,所以 person 对象是如何找到 Object 对象中的方法呢? 靠的是原型链

1. prototype

每个函数都有一个prototype属性,被称为显示原型

2._ _proto_ _

  • 每个实例对象都会有_ proto _属性,其被称为隐式原型
  • 每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype

3. constructor

每个prototype原型都有一个constructor属性,指向它关联的构造函数。

4. 原型链

原因是每个对象都有__proto__属性,此属性指向该对象的构造函数的原型
对象可以通过__proto__ 与上游的构造函数的原型对象连接起来,而上游的原型对象也有一个 __proto__,这样就形成了一个原型链

获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null

 这里需要注意的是Object是属于原型链的顶层,所有构造函数的的prototype都指向 Object.prototype



首先,fn的构造函数是Foo()。所以:

fn._ _ proto _ _=== Foo.prototype

又因为Foo.prototype是一个普通的对象,它的构造函数是Object,所以:

Foo.prototype._ _ proto _ _=== Object.prototype

通过上面的代码,我们知道这个toString()方法是在Object.prototype里面的,当调用这个对象的本身并不存在的方法时,它会一层一层地往上去找,一直到null为止。

所以当fn调用toString()时,JS发现fn中没有这个方法,于是它就去Foo.prototype中去找,发现还是没有这个方法,然后就去Object.prototype中去找,找到了,就调用Object.prototype中的toString()方法。

这就是原型链,fn能够调用Object.prototype中的方法正是因为存在原型链的机制。

另外,在使用原型的时候,一般推荐将需要扩展的方法写在构造函数的prototype属性中,避免写在_ _ proto _ _属性里面。

JS----javascript原型和原型链相关推荐

  1. web前端面试高频考点——JavaScript 篇(一)【JS的三座大山 】 原型和原型链、作用域和闭包、异步

    系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上 的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容 参考链接 HTML & CSS 篇 ...

  2. JavaScript什么是原型和原型链JS

    从事前端这么久,发现原型和原型链一直都是云里雾里,网上看了好多文章.博客也还是不怎么明朗,相信被它困扰的小伙伴,不在少数 以下是我总结的原型和原型链,个人认为是比较浅显易懂的: 原型:构造函数中的 p ...

  3. 浅谈JS原型与原型链(一)

    最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...

  4. JS原型与原型链终极详解

     一. 普通对象与函数对象   JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 functi ...

  5. JavaScript对象——原型与原型链

    原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...

  6. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  7. 关于javascript的原型和原型链,看我就够了(二)

    温故 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 仔细观察如下代码 function Foo(name) {th ...

  8. 最详细的讲解 JS 原型与原型链

    文章目录 一. 普通对象与函数对象 二. 构造函数 三. 原型对象 四. proto 五. 构造器 六. 原型链 七. Prototype 总结 一. 普通对象与函数对象 JavaScript 中,万 ...

  9. 【前端芝士树】Javascript的原型与原型链

    [前端芝士树]Javascript的原型.原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下 0. 为什么会出现原型和原型链的概念 1994年,网景公司(Ne ...

  10. js原型、原型链、作用链、闭包全解

    https://www.2cto.com/kf/201711/698876.html [对象.变量] 一个对象就是一个类,可以理解为一个物体的标准化定义.它不是一个具体的实物,只是一个标准.而通过对象 ...

最新文章

  1. DELL服务器引导光盘图片及下载链接
  2. mysql client centos_centos7 安装mysql和mysqlclient遇到的那些坑
  3. 问题之传递参数名和接收参数名要一致。
  4. java中的位移运算符_java中的移位运算符(, , )
  5. 企业是否应该实现对客户需求的快速响应_为什么说数据中台是企业数字化转型的基石?...
  6. 【ElasticSearch】Es 启动流程 初始化流程 源码分析
  7. 系统快捷方式java_java中这么创建界面快捷方式图标 代码
  8. Ubuntu 16.04配置CUDA 9.0+cudnn 7.0以及解决Nvidia显卡导致黑屏问题
  9. 重新开始我的blog内容!
  10. jmeter系列六(processor)
  11. OpenCV-图像处理(20、霍夫变换-直线)
  12. 第 7 章 Neutron - 079 - 在 ML2 中 enable local network
  13. html空格字符转义存入数据库,HTML中多种空格转义字符
  14. 数据挖掘:概念与技术(第三版)之第八章的学习记录
  15. 磁力计椭球拟合使用篇 IMU 加速度、电子罗盘校准
  16. oracle数据库生成流水号,oracle 中生成流水号 步骤
  17. 32岁辞职读博,博三还没有文章,焦虑,如何调节?
  18. 怎么拆分PDF文档?一分钟学会拆分PDF文档的方法
  19. 动什么别动感情 第66节:你不是一个虚荣的女性
  20. crontab 定时任务时间格式设置

热门文章

  1. eclipse上安装hadoop后报错 Error:org.hadoop.security.AccessControlException:Permission
  2. pandas常见的时间处理函数
  3. jquery获取当前的节点
  4. Facebook 开源了一整套重要的 Linux 内核组件与工具!
  5. 在线机器学习FTRL(Follow-the-regularized-Leader)算法介绍
  6. spark出现task不能序列化错误的解决方法 org.apache.spark.SparkException: Task not serializable
  7. 【LeetCode算法题库】Day5:Roman to Integer Longest Common Prefix 3Sum
  8. Linux RHCS中心跳网络接口的指定
  9. SharePoint 2010无法使用外部asp.net web应用程序调试的解决办法
  10. 打破“创新困局”,让你的企业创意盎然的六个新角色