昨天有提到说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的心路历程 -物件与原型(二)相关推荐

  1. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  2. 学JS的心路历程Day28 - PixiJS -基础(二)

    材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材 ...

  3. 学JS的心路历程 -非同步执行

    JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板 ...

  4. 学JS的心路历程-Promise(一)

    今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...

  5. 学JS的心路历程-函式(五)箭头函式

    箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77 ...

  6. 学JS的心路历程 -数组常见处理方法

    昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一 ...

  7. 学习JS的心路历程-参数传递方式(上)

    很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...

  8. 学习JS的心路历程-函式(一)

    前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...

  9. 尤雨溪创立 Vue.js 的心路历程纪录片

    Show More 本文分享自微信公众号 - 生信科技爱好者(bioitee). 如有侵权,请联系 support@oschina.cn 删除. 本文参与"OSC源创计划",欢迎正 ...

最新文章

  1. Andorid SQLite数据库开发基础教程(2)
  2. OpenWRT中运行脚本报错
  3. JVM 类加载机制深入浅出
  4. object - c 函数的值
  5. 工作222:title写活
  6. 解决 springboot 启动报错 -- Cannot determine embedded database driver class for database type NONE
  7. Java 8 新的时间日期库java.time
  8. Android BLE开发之Android手机与BLE终端通信
  9. MySQL数据导出:ERROR 1 (HY000) 错误解决
  10. RS485 光照度传感器 pc串口工具调试设备 亲身体验
  11. Excel中使用名称定义常数
  12. CVPR 2022 Oral | MLP进军底层视觉!谷歌提出MAXIM:刷榜多个图像处理任务,代码已开源!...
  13. C语言实现设置桌面壁纸
  14. 晨风机器人插件编辑器_晨风机器人文本编辑器使用方法
  15. moss部署学习入门及注意事项
  16. discuzdiy图片模块_dz论坛diy教程,discuz论坛DIY详细教程 论坛diy教程
  17. 机器人网络系统时延笔记(LAN+WLAN)
  18. NBA赛事直播超清画质背后:阿里云视频云「窄带高清2.0」技术深度解读
  19. 大型支付系统后台对账系统的控制和管理
  20. Linux三剑客awk之行和列

热门文章

  1. 使用K.function()调试keras
  2. JAVA基础3-选择语句
  3. vue文件快速生成模板代码
  4. java ojdbc 还需要装 oracle client 吗,c# 连接Oracle数据库必须安装客户端吗
  5. 如何利用计算机计算天数,计算机如何计算两个日期之间的天数
  6. java 图片合成 工具类_Java实现的图片上传工具类完整实例
  7. 【RocketMQ工作原理】消息的生产过程
  8. Spring Cloud Alibaba 消息队列:基于 RocketMQ 实现服务异步通信
  9. java.lang.NullPointerException空指针问题
  10. xmindcore.java_求解Xmind问题