5.Javascript 原型链之原型对象、实例和构造函数三者之间的关系
前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之。
本文主要解决的问题有以下三个:
(1)constructor 和 prototype 以及实例之间啥关系?
(2)prototype是啥,__proto__又是啥,他们之间啥关系?
(3)如果改变一个 constructor 的 prototype,他的实例会发生什么改变?
ok,下面一个一个解决。
(1)constructor 和 prototype 以及实例对象三者之间啥关系?
举例:

如上,当我们创建一个函数,系统就会为这个函数自动分配一个prototype指针,指向它的原型对象。并且可以发现,这个原型对象包含两个部分(constructor 和 __proto__)其中constructor指向函数自身。(这里形成了一个小闭环)
当我们将该函数作为模版创建实例(new方法)的时候,我们发现创建出的实例是一个与构造函数同名的object,这个object是独立的,他只包含了一个__proto__指针(实例没有prototype,强行访问则会输出undefined),这个指针指向上面提到的构造函数的prototype原型对象。
这时候我们发现三者形成了一个大"闭环"。之所以加上引号,因为构造函数和实例之间无法直接访问,需要通过__proto__指针间接读取。

这个"大闭环"画出来就是下面这个样子啦:

到此第一个问题已经解决。
(2)prototype是啥,__proto__又是啥,他们之间啥关系?
在上一个问题中,我们用到了实例对象的__proto__指针,实际上在JavaScript中大部分类型的值都拥有__proto__属性,例如:



当然object和function对象也有:

不过也有不存在__proto___属性的类型,比如:


等等。
然而。只有function对象才有prototype属性,其他任何类型的值都没有。即使是使用new方法从function构造出的实例对象也没有prototype属性。

(object类型的值的prototype输出undefined)

(我们改变了test的prototype的值,将其链接到一个函数名为test的函数,接着,函数类型的值的prototype输出了一个原型对象)
so,do you understand?
(3)如果改变一个 constructor 的 prototype,他的实例会发生什么改变?
我们来做一个尝试:

我们可以发现,改变了prototype之后创建的实例指向了新的prototype对象,而之前的依然指向老的prototype对象。
下面是个应用这个方法拓展实例的小例子:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var shape = function () {};var p = { a: function () { console.log('aaa'); }};shape.prototype = p;var circle = new shape();circle.a();//输出'aaa' |
好啦,到这里就讲完啦~~撒花哈哈哈哈~~~
5.Javascript 原型链之原型对象、实例和构造函数三者之间的关系的更多相关文章
- Javascript 原型链之原型对象、实例和构造函数三者之间的关系
前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之. 本文主要解决的问题有以下三个: (1)constructor 和 prototype 以及实例之间啥关系? (2)pro ...
- 【面向对象】----【prototype&&__proto__&&实例化对象三者之间的关系】(四)-----【巷子】
1.构造函数 a.什么是构造函数? 解释:通过关键字new 创建的函数叫做构造函数 作用:用来创建一个对象 废话少说直接上代码,首先我们还是创建一个构造函数人类 然后我们在创建两个实例,一个凡尘 一个 ...
- 【面向对象】【prototype&&__proto__&&实例化对象三者之间的关系】
1.构造函数 a.什么是构造函数? 解释:通过关键字new 创建的函数叫做构造函数 作用:用来创建一个对象 废话少说直接上代码,首先我们还是创建一个构造函数人类 然后我们在创建两个实例,一个凡尘 一个 ...
- 面向对象---prototype、__proto__、实例化对象三者之间的关系
1.构造函数 a.什么是构造函数? 解释:通过关键字new 创建的函数叫做构造函数 作用:用来创建一个对象 废话少说直接上代码,首先我们还是创建一个构造函数人类 然后我们在创建两个实例,一个凡尘 一个 ...
- 创建Oracle数据库、数据库名与实例名与SID之间的关系(图文详解)
分类: Oracle(9) 版权声明:转载请注明出处 JmilkFan_范桂飓:http://blog.csdn.net/jmilk 目录(?)[+] 目录 目录 软件环境 前言 安装Oracle监听 ...
- 做筛选遍历时遇到的json字符串、json对象、json数组 三者之间的转换问题
这个是后台对登录用户以及筛选条件的操作 @Override public List<SdSdPer> listResults(String sidx, String sord) { try ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:对象 实例(2)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:对象 实例(3)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅谈Javascript中的原型、原型链、继承
构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Produ ...
随机推荐
- Delphi Webbrowser使用方法详解(一)
1.webbroser介绍 该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等操作.该 组件在Int ...
- html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
- django的forms
base知识 参考博文:https://www.cnblogs.com/yuanchenqi/articles/9036474.html 用户表单是Web端的一项基本功能,大而全的Django框架中自 ...
- [Python] numpy.logspace
numpy.logspace(start, stop, num=50, endpoint=True, base=10.0, dtype=None) starting value := base** ...
- selenium+python自动化87-Chrome浏览器静默模式启动(headless)
前言 selenium+phantomjs可以打开无界面的浏览器,实现静默模式启动浏览器完成自动化测试,这个模式是极好的,不需要占用电脑的屏幕. 但是呢,phantomjs这个坑还是比较多的,并且遇到 ...
- tornado-模板继承extend,函数和类的导入
大 import tornado.ioloop import tornado.web import tornado.httpserver # 非阻塞 import tornado.options # ...
- 关于putty连接百度云linux服务器那些事
看有活动,30元半年的百度云服务器,就直接买了当练手的玩 买完之后,发现使用putty不能直接连接百度云的centos服务器, 用了putty和ssh都不能连接 试了好几次,都打算尝试用秘钥对的形式了 ...
- BDE 退出历史 迁移至FireDAC
BDE组件套TQuery\TTable\TStoreProce结束历时使命. ADO组件套也停止更新, 将来是FireDAC组件套的江湖 Migrating BDE Applications to F ...
- jQuery上传插件uploadify 3.2.1
1.属性 名称 默认值 说明 swf [必须设置]swf的路径 uploader [必须设置]服务器端脚本文件路径 uploadLimit 999 最多上传文件数量 checkExisting ...
- as3 对于加载进来多层swf缩放操作
//swf实际尺寸 var oldWidth:Number = frameLder.contentLoaderInfo.content.width; var oldHeight:Number = fr ...