原型与原型链

作者: JaniceZD | 来源:发表于2019-03-16 17:11 被阅读6次

1. 公用属性(就是原型对象)

所有对象都有 toStringvalueOf 属性,那么是否有必要给每个对象一个 toStringvalueOf 呢?

明显不需要(内存不允许)。

JavaScript 的做法是把 toStringvalueOf 放在一个对象里(暂且叫做公用属性组成的对象),然后让每一个对象的__proto__存储这个「公用属性组成的对象」的地址,当需要使用的时候,引用这个对象即可。

而这个公用属性和方法组成的对象,就是传说中的原型

JavaScript 规定,所有对象都有自己的原型对象(prototype)。
原型对象的作用,就是定义所有实例对象共享的属性和方法。

2. 原型链

Number对象、String对象、Boolean对象,他们还有各自独有的公用属性库,他们的 __proto__ 指向的就是各自的独有属性,这些独有属性的 __proto__ 最终指向的 Object 的公有属性,就是Object.prototype(原型),这一条链就叫原型链。引用情况如下图:

原型链.png
由此可知,
o1.toString === o2.toString    //true

“原型链”(prototype chain):对象到原型,再到原型的原型。所有对象的原型最终都可以上溯到 Object.prototype,即 Object 构造函数的 prototype 属性。也就是说,所有对象都继承了Object.prototype的属性。

Object.prototype 对象有没有它的原型呢?回答是Object.prototype 的原型是 null

完整的原型链.png
图中红色的线,就组成了一条原型链

3. 一些公式:

注:当声明一个对象时,JS引擎除了在栈里弄出一个哈希,还把proto指向了其该有的公用属性(原型)。

(1)number:

var n1 = new Number();
n1.__proto__ === Number.prototype    
//true,是把Number.prototype的地址赋给 n1的__proto__属性了
n1.__proto__.__proto__ === Object.prototype   //true

(2)string:

var s1 = new String()
s1.__proto__ === String.prototype   //true
s1.__proto__.__proto__ === Object.prototype  //true

(3)object:

var o1 = new Object()
o1.__proto__ === Object.prototype   //true
o1.__proto__.__proto__ === null     //true

(4)function:

var f1 = new Function()
f1.__proto__ === Function.prototype    //true
f1.__proto__.__proto__ === Object.prototype   //true

(5)重要公式与推论

公式:
var 对象 = new 函数()   //函数可以是Number/String/Boolean/Object
对象.__proto__ === 对象的构造函数.prototype

__proto__是对象的属性,prototype是函数的属性。

推论:
// 另外,所有函数都是由 Function 构造出来的,所以
Number.__proto__ = Function.prototype   // 因为 Number 是函数,是 Function 的实例
Object.__proto__ = Function.prototype   // 因为 Object 是函数,是 Function 的实例
Function.__proto__ == Function.prototye  // 因为 Function 是函数,是 Function 的实例!

Function.__proto__.__proto__ === Object.prototype   //true

FunctionNumberStringObjectFunction的构造函数。
注意:Function.__proto__.__proto__ === Object.prototype //true

无代码内存图.png

4. 三句话解释原型与原型链

第一句话:prototype 是函数的原型对象,即 prototype 是一个对象,它会被对应的 __proto__ 引用。
第二句话:要知道自己的 __proto__ 引用了哪个 prototype,只需要看看是哪个构造函数构造了你,那你的 __proto__ 就是那个构造函数的 prototype
第三句话:所有对象的原型最终都可以上溯到 Object.prototype,即 Object 构造函数的 prototype 属性。
注意: Object.prototype.__proto__ === null //true

5. 其他

面试题: '1'.__proto__ 是什么?
答:'1' 会临时转化为 String 对象,

'1'.__proto__ === String.prototype      //true

所有对象都有 __proto__ 属性。

Object.prototype.__proto__  ===  null

1.toString()     //语法错误,不加引号JS引擎会把.当作小数点,比如1.234
1..toString()    //'1'
// 第一个.当作小数点,第二个为点操作符

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 2019-01-28

    原型与原型链

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JavaScript 面向对象第一篇

    1.原型链 ---- (实例对象与原型之间的连接 叫做原型链) 2. hasOwnproperty ----(看是...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 原型链&instanceof关键字

    1.原型链&instanceof关键字 简单说明 原型链 与 instanceof 作用原理 1.原型链 1...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

网友评论

    本文标题:原型与原型链

    本文链接:https://www.haomeiwen.com/subject/ilubyqtx.html