学JS的心路历程 -物件与原型(二)
昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗?
答案是Object.prototype!
Object.prototype
在第一天有提到说「JS中除了原始型别以外的一切都是物件」。
所以每条正常的[[Prototype]]串链最顶层的尾端都是内置的Object.setPrototypeOf,这个物件含有JS中各地方所用的常见工具,如toString()、hasOwnProperty()、valueOf()等等,所有正常的物件都应起源于这个Object.setPrototypeOf物件(vmwork)。
建构式与原型
在第八天时,有提到说建构式会经由new呼叫函式,建立一个新的物件:
function Foo(){
this.say =“hello”;
}
var a = new Foo();
但其实new Foo()产生一个新的物件a同时,新的物件a的内部会有[[Prototype]]连接至Foo.prototype。
等等,Foo.prototype的.prorotype是什么鬼东西?函式有自己的原型?
「每一个函式都有一个原型物件,会被自动设为透过该函式所建立的物件原型」。
也就是说prototype是当用new创建新的物件时,该新物件的[[Prototype]]。
那我们要怎么看一个物件的原型呢?可以用__proto__或Object.getPrototypeOf()。
function Foo(){
this.say =“hello”;
}
var a = new Foo();
a.__proto__;//{constructor:ƒ}
Object.getPrototypeOf(a);//{constructor:ƒ}
Object.getPrototypeOf(a)=== Foo;//false
Object.getPrototypeOf(a)=== Foo.prototype;//true
用图表来看可能会比较好理解。
好,又有一个奇怪的东西了,什么是constructor?
函式的原型物件也就是Foo.prototype会具有constructor的属性,会参照回原来的函式。
我们建立出来的新物件,其原型会被设定为建构式函式原型所参照的物件,可以透过.constructor来存取建立物件的函式以此来作类型检查。
function Foo(){
this.say =“hello”;
}
var a = new Foo();
typeof a;//“object”
a instanceof Foo;//true
a.constructor === Foo;//true
a.__proto__.constructor === Foo;//true
所以我们可以用这张图来表示。
使用原型来实现继承
函式原型是一个物件,所以在继承实有许多种复制功能的方式。
function Person(){};
Person.prototype.say =“Hi”;
function trickyMan(){};
trickyMan.prototype = { say:Person.prototype.say};
var Jason = new trickyMan();
Jason instanceof trickyMan;//true
Jason instanceof Person;//false
执行后发现没有办法把Person继承trickyMan,这只是复制而已。
如果想要真正的原型串链,也就是Jason可以是trickyMan,trickyMan可以是Person,一直到最终的Object,应该这样做:
function Person(){};
Person.prototype.say =“Hi”;
function trickyMan(){};
trickyMan.prototype = new Person();
var Jason = new trickyMan();
Jason instanceof trickyMan;//true
Jason instanceof Person;//true
要注意到的是,由于把trickyMan指定为Person的建构物件,所以trickyMan的原本的constructor没有被任何东西参考,会被弃置且删除。
我们来看一下图片(leafor)。
那么,今天就到这边,一样如果有错误及来源未附上也欢迎留言指正,那么我们明天见。
转载于:https://www.cnblogs.com/lannyQ-Q/p/10086531.html
学JS的心路历程 -物件与原型(二)相关推荐
- 学JS的心路历程 -函式(三)this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
- 学JS的心路历程Day28 - PixiJS -基础(二)
材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...
- 学JS的心路历程 -非同步执行
JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...
- 学JS的心路历程-Promise(一)
今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...
- 学JS的心路历程-函式(五)箭头函式
箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...
- 学JS的心路历程 -数组常见处理方法
昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...
- 学习JS的心路历程-参数传递方式(上)
很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...
- 学习JS的心路历程-函式(一)
前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...
- 尤雨溪创立 Vue.js 的心路历程纪录片
Show More 本文分享自微信公众号 - 生信科技爱好者(bioitee). 如有侵权,请联系 support@oschina.cn 删除. 本文参与"OSC源创计划",欢迎正 ...
最新文章
- Andorid SQLite数据库开发基础教程(2)
- OpenWRT中运行脚本报错
- JVM 类加载机制深入浅出
- object - c 函数的值
- 工作222:title写活
- 解决 springboot 启动报错 -- Cannot determine embedded database driver class for database type NONE
- Java 8 新的时间日期库java.time
- Android BLE开发之Android手机与BLE终端通信
- MySQL数据导出:ERROR 1 (HY000) 错误解决
- RS485 光照度传感器 pc串口工具调试设备 亲身体验
- Excel中使用名称定义常数
- CVPR 2022 Oral | MLP进军底层视觉!谷歌提出MAXIM:刷榜多个图像处理任务,代码已开源!...
- C语言实现设置桌面壁纸
- 晨风机器人插件编辑器_晨风机器人文本编辑器使用方法
- moss部署学习入门及注意事项
- discuzdiy图片模块_dz论坛diy教程,discuz论坛DIY详细教程 论坛diy教程
- 机器人网络系统时延笔记(LAN+WLAN)
- NBA赛事直播超清画质背后:阿里云视频云「窄带高清2.0」技术深度解读
- 大型支付系统后台对账系统的控制和管理
- Linux三剑客awk之行和列
热门文章
- 使用K.function()调试keras
- JAVA基础3-选择语句
- vue文件快速生成模板代码
- java ojdbc 还需要装 oracle client 吗,c# 连接Oracle数据库必须安装客户端吗
- 如何利用计算机计算天数,计算机如何计算两个日期之间的天数
- java 图片合成 工具类_Java实现的图片上传工具类完整实例
- 【RocketMQ工作原理】消息的生产过程
- Spring Cloud Alibaba 消息队列:基于 RocketMQ 实现服务异步通信
- java.lang.NullPointerException空指针问题
- xmindcore.java_求解Xmind问题