JS原型与原型链理解
前几天在看那个OL3的控件封装,感觉对愿原型和原型链有点忘记,js本身是没有类这个概念,所谓函数即对象,继承这个东西主要通过对象来完成,要是在C#,Java这类语言中这个就很好理解的
一,函数对象
所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)
所有函数拥有prototype属性(显式原型)(仅限函数)
原型对象:拥有prototype属性的对象,在定义函数时就被创建
二,构造函数
先复习下构造函数
- //创建构造函数
- function Word(words){
- this.words = words;
- }
- Word.prototype = {
- alert(){
- alert(this.words);
- }
- }
- //创建实例
- var w = new Word("hello world");
- w.print = function(){
- console.log(this.words);
- console.log(this); //Person对象
- }
- w.print(); //hello world
- w.alert(); //hello world
print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。
实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于
w.__proto__ === Word.prototype
当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:
w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。
三,原型和原型链
- Function.prototype.a = "a";
- Object.prototype.b = "b";
- function Person(){}
- console.log(Person); //function Person()
- let p = new Person();
- console.log(p); //Person {} 对象
- console.log(p.a); //undefined
- console.log(p.b); //b
想一想p.a打印结果为undefined,p.b结果为b
解析:
p是Person()的实例,是一个Person对象,它拥有一个属性值__proto__,并且__proto__是一个对象,包含两个属性值constructor和__proto__
- console.log(p.__proto__.constructor); //function Person(){}
- console.log(p.__proto__.__proto__); //对象{},拥有很多属性值
我们会发现p.__proto__.constructor返回的结果为构造函数本身,p.__proto__.__proto__有很多参数
我们调用constructor属性,p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.__proto__.constructor == Object()
从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype
所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过__proto__向上进行查找,最终到null结束
- console.log(p.__proto__.__proto__.__proto__); //null
- console.log(Object.prototype.__proto__); //null
大家理解刚才的过程,相信下面这些应该也都明白
- //Function
- function Function(){}
- console.log(Function); //Function()
- console.log(Function.prototype.constructor); //Function()
- console.log(Function.prototype.__proto__); //Object.prototype
- console.log(Function.prototype.__proto__.__proto__); //NULL
- console.log(Function.prototype.__proto__.constructor); //Object()
- console.log(Function.prototype.__proto__ === Object.prototype); //true
四、 总结:
1.查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined
2.p.__proto__.constructor == function Person(){}
3.p.___proto__.__proto__== Object.prototype
4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null
5.通过__proto__形成原型链而非protrotype
最后附上一张图,大家阅读完之后,看图应该可以很容易理解
原文:https://blog.csdn.net/yucihent/article/details/79424506
JS原型与原型链理解相关推荐
- js原型和原型链_理解JS中的原型和原型链
导读:JavaScript中(JS)的原型和原型链是web前端开发面试中经常被问到的问题:同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继 ...
- js原型对象和原型链理解
参考:https://blog.csdn.net/yucihent/article/details/79424506 文章内的图是参考一个大神的 但是找不到链接了 一. 函数对象 所有引用类型(函数, ...
- JS 中原型和原型链深入理解
作者: erdu segmentfault.com/a/1190000014717972 首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(nat ...
- 《js中原型和原型链的深入理解》的笔记
前言:在微信公众号前端大全上看过<js中原型和原型链的深入理解>,个人认为这是我看过的js原型链的文章中,在思维结构上理解最清楚的一个文章了,本着温故而知新,有害怕找不到这个文章,我就把文 ...
- JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"prototype"属性,函数对象有"prototype"属性,原型对象有&q ...
- (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】
JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...
- js中原型,原型链,原型链继承的个人理解
一.什么是原型? 每一个javascript对象在创建的时候就会有一个与之关联的对象B产生,对象B就是所说的"原型". 1)原型也是一个对象,其他对象可以通过原型实现属性继承, 2 ...
- 真正理解JS原型和原型链
什么是原型.原型链 首先我们要搞明白原型的概念,什么原型? 每个对象都可以指定另一个对象来作为自己的原型,并继承原型的所有属性.那么对象当然是由构造函数创建的,那我们是不是就可以在声明构造函数的时候就 ...
- 浅谈JS原型与原型链(一)
最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...
最新文章
- 论MySQL何时使用索引,何时不使用索引
- qt如何提前jpg文件里的缩略图_如何去捕获和编辑H5制作软件Hype中的海报图像
- c语言mfc弹出窗口函数,CMFCDesktopAlertWnd实现桌面弹出消息框
- [18]Debian Linux Install GNU GCC Compiler and Development Environment
- python--从入门到实践--chapter 10 文件及错误
- SQL查询单表数据(一)
- 小程序php支付,前后端分离
- 将beyond compare设置为svn的代码比较工具
- linux日志删除了还能恢复吗,Linux系统中恢复被删除日志的方法
- 【应届生租房】应届生如何租房以及注意事项
- 中国邮政国际挂号信网上查询
- transformer系列论文-Sliced Recursive Transformer
- VBA(14)排序Sort
- 二十四式长生图——清手抄本(扫描版)
- SQL50题(MySQL)
- HDU oj wod sticks
- 概率统计16——均匀分布、先验与后验
- 【教程】树莓派bt下载机之Transmission Web Interface
- 哈尔滨校区学员扫码绑定教练、签到、签退、评价说明
- 这些年我们错过了什么