美文网首页
原型和原型链的简单理解

原型和原型链的简单理解

作者: 猫晓封浪 | 来源:发表于2018-08-11 22:20 被阅读0次
原型

在JS中原型就是prototype对象,用来表示类型之间的关系。

原型链

JS中对象和对象之间是有联系的,通过prototype对象指向父类对象,在指向Object对象。而通过的方式就是_proto_连接,而_proto_最终指向null

通过四个全局对象来了解原型和原型链

这四个全局对象为:Number()String()Boolean()Object
上述四个对象都可以通过下边两种方法实现:

var n1=1
var n2=new Number(1)
var s1='1'
var s2=new String('1')
var b1=true
var b2=new Boolean(true)
var o1={}
var o2=new Object

上述的两种方法区别在内存上的区别。
我们知道1.toString()会报错,但是这里我们通过n1.toString()返回的就是字符串'1'n1.toString()方法不会报错,但是n1只是通过赋值的方法的来的,并没有.toString()方法。这个时候就是JS通过创建临时对象var temp=new Number(1)在这个临时对象中对n1的值进行.toString()方法,再将得到的返回给n1.toString(),临时对象用完就自动抹杀。
还有一个例子,我们对n1进行n1.xxx=2这是也不会报错,就是用临时方法在heap内存上创建的,但是再取n1.xxx时为undefined。就验证了用完就抹杀,即不存在的原理。
为什么new Number()有.toString()方法呢?我们打印出n2看看他有没有这个属性。

可以看到除了打印出n2的值还有一个__proto__:Number,点开这个属性可以看到萝莉了很多属性,其中就包括.toString(),所以n2可以调用.toString()方法。
__proto__:Number所表示的就是number共有的属性。
此时在图中我们看到n2.__proto__===Number.prototype的结果为true。就是指n2__proto__指向了Number.prototype,即Number的共有属性中去,可以从第一张图中可以看到n2__proto__中还有一个__proto__:Object的隐藏属性。点开就可以看到关于Object的共有属性。

综上:我们可以总结出来,当我们new出来一个对象的时候,再去使用一个方法时,会首先从它自身的构造函数(或者系统自带函数)的原型对象(函数.prototype)中去找,如果没有改属性是就会通过__proto__属性去下一个Object共有属性中去寻找,直到最后为null。可以画图理解为:
上图中prototype对象就是原型,用过__proto__将他们连接就是原型链。
即:对象.__proto__===函数.prototype其中__proto__是每个对象都有的一个属性,而prototype函数才由的属性。
对象具有__proto__,可以成为隐式原型,一个对象的隐式原型指向该对象的构造函数的原型。
综上有:
var n = new Number();
n.__proto__===Number.prototype//true
n.__proto__.__proto__===Object.prototype//true
n.__proto__.__proto__.__proto__===null//true

String()Boolean()同理,而Object则是比其他三种少了一个函数.prototype环节。

易踩坑小知识
var f=false
var f1=new Boolean(false)
if(f){console.log(1)}//无
if(f1){console.log(2)}//2

因为f2可以看做是对象,对象的Boolean值为true。所以只会输出2,没有1

相关文章

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

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

  • 读《javaScript高级程序设计-第6章》之继承

    读这篇之前,最好是已读过我前面的关于对象的理解和封装类的笔记。 一、原型链 原型链最简单的理解就是:原型对象指向另...

  • 原型和原型链的简单理解

    原型 在JS中原型就是prototype对象,用来表示类型之间的关系。 原型链 JS中对象和对象之间是有联系的,通...

  • 2018-01-09 关于javascript原型链的思考 pl

    s 深入理解原型和原型链? 构造函数 理解原型和原型链 new的时候js都干了什么? 一个实现继承的demo 构造...

  • 原型和原型链

    今天发现一张特别好的图(↑↑↑上图↑↑↑),对原型和原型链的理解特别直观友好。 原型和原型链 基础储备:每个 JS...

  • 廖雪峰JS小记

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

  • 原型和原型链理解

    每一个函数对象都有一个属性叫prototype,这个就是原型 每一个对象都有一个__ proto __的属性,指向...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • 对原型链的理解

    1,什么是原型链 简单来说就是对象和构造函数之间连接的一个链条 简称原型链 2,原型链的作用 可以通过原型链继承构...

  • 再来看一次JS继承

    原型链继承 理解原型链的概念 用一张图来理解原型链再合适不过了。 总结概括JS红宝书上对原型链的概念:每个函数都有...

网友评论

      本文标题:原型和原型链的简单理解

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