JS----javascript原型和原型链
原型对象
绝大部分的函数(少数内建函数除外)都有一个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原型和原型链相关推荐
- web前端面试高频考点——JavaScript 篇(一)【JS的三座大山 】 原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上 的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容 参考链接 HTML & CSS 篇 ...
- JavaScript什么是原型和原型链JS
从事前端这么久,发现原型和原型链一直都是云里雾里,网上看了好多文章.博客也还是不怎么明朗,相信被它困扰的小伙伴,不在少数 以下是我总结的原型和原型链,个人认为是比较浅显易懂的: 原型:构造函数中的 p ...
- 浅谈JS原型与原型链(一)
最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...
- JS原型与原型链终极详解
一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是JS自带的函数对象.下面举例说明 functi ...
- JavaScript对象——原型与原型链
原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
- 深入理解JavaScript系列(5):强大的原型和原型链
前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...
- 关于javascript的原型和原型链,看我就够了(二)
温故 创建对象的三种方式 通过对象直接量 通过new创建对象 通过Object.create() js中对象分为两种 函数对象 普通对象 仔细观察如下代码 function Foo(name) {th ...
- 最详细的讲解 JS 原型与原型链
文章目录 一. 普通对象与函数对象 二. 构造函数 三. 原型对象 四. proto 五. 构造器 六. 原型链 七. Prototype 总结 一. 普通对象与函数对象 JavaScript 中,万 ...
- 【前端芝士树】Javascript的原型与原型链
[前端芝士树]Javascript的原型.原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下 0. 为什么会出现原型和原型链的概念 1994年,网景公司(Ne ...
- js原型、原型链、作用链、闭包全解
https://www.2cto.com/kf/201711/698876.html [对象.变量] 一个对象就是一个类,可以理解为一个物体的标准化定义.它不是一个具体的实物,只是一个标准.而通过对象 ...
最新文章
- DELL服务器引导光盘图片及下载链接
- mysql client centos_centos7 安装mysql和mysqlclient遇到的那些坑
- 问题之传递参数名和接收参数名要一致。
- java中的位移运算符_java中的移位运算符(, , )
- 企业是否应该实现对客户需求的快速响应_为什么说数据中台是企业数字化转型的基石?...
- 【ElasticSearch】Es 启动流程 初始化流程 源码分析
- 系统快捷方式java_java中这么创建界面快捷方式图标 代码
- Ubuntu 16.04配置CUDA 9.0+cudnn 7.0以及解决Nvidia显卡导致黑屏问题
- 重新开始我的blog内容!
- jmeter系列六(processor)
- OpenCV-图像处理(20、霍夫变换-直线)
- 第 7 章 Neutron - 079 - 在 ML2 中 enable local network
- html空格字符转义存入数据库,HTML中多种空格转义字符
- 数据挖掘:概念与技术(第三版)之第八章的学习记录
- 磁力计椭球拟合使用篇 IMU 加速度、电子罗盘校准
- oracle数据库生成流水号,oracle 中生成流水号 步骤
- 32岁辞职读博,博三还没有文章,焦虑,如何调节?
- 怎么拆分PDF文档?一分钟学会拆分PDF文档的方法
- 动什么别动感情 第66节:你不是一个虚荣的女性
- crontab 定时任务时间格式设置
热门文章
- eclipse上安装hadoop后报错 Error:org.hadoop.security.AccessControlException:Permission
- pandas常见的时间处理函数
- jquery获取当前的节点
- Facebook 开源了一整套重要的 Linux 内核组件与工具!
- 在线机器学习FTRL(Follow-the-regularized-Leader)算法介绍
- spark出现task不能序列化错误的解决方法 org.apache.spark.SparkException: Task not serializable
- 【LeetCode算法题库】Day5:Roman to Integer Longest Common Prefix 3Sum
- Linux RHCS中心跳网络接口的指定
- SharePoint 2010无法使用外部asp.net web应用程序调试的解决办法
- 打破“创新困局”,让你的企业创意盎然的六个新角色