原型和原型链的理解

作者&投稿:大叔鲍 (若有异议请与网页底部的电邮联系)
~ 原型也是一个对象,原型对象上的所有属性和方法,都能被子对象 (派生对象) 共享 通过构造函数生成实例对象 时,会自动为实例对象分配原型对象。 而每一个构造函数都有一个prototype属性,这个属性就是实例对象的原型对象。

首先整理一下原型的规则:

1. 所有的引用类型(包括数组,对象,函数)都有隐性原型属性(proto), 值也是一个普通的对象。

2. 所有的函数,都有一个 prototype 属性,值也是一个普通的对象。

3. 所有的引用类型的proto属性值都指向构造函数的 prototype 属性值

要理解原型就要明白构造函数、实例对象、原型之间的关系,我用一张图来表示出他们之间的关系,如下图所示:

构造函数new出来一个对象,而每个对象都有一个constructor属性,该属性指向创建该实例的构造函数,构造函数的prototype属性是这个new出来的实例化对象的原型,实例对象通过__proto__或者object.getPrototype的方法获取原型。

通过上面的图我们可以总结一下原型、实录对象、构造函数之间的关系

1. 实例对象.__proto__===原型

2. 原型.constructor===构造函数

3. 构造函数.prototype===原型

在上面我们梳理了一下实例对象、原型、构造函数之间的关系,下面我用一个例子来直观说明一下。

首先来new出一个对象下所示:

1. 我们创建出一个空对象

2. 再让this指向这个对象

3. 通过this.name进行赋值

4. 去执行构造函数内部的代码

5. 最终返回到this

图一的代码打印出来的结果为:

上图就可以明了的证明构造函数和原型对象之间的关系,那么我们再来看实例和原型对象的关系。依照上面的关系图,实例的内部指针 proto 指向原型对象,构造函数 fn的原型也指向同一个原型对象。

从上面的例子上我们再添加两个打印证明以上的判断,如下图:

然后得到的结果都为true,证实了我们的判断,如下图:

这样两个例子就很明白的说明了实例、构造函数、原型对象三者之间的关系。

那么明白了三者之间的关系我们就来说一下原型链,从一个实例对象向上找有一个构造实例的原型对象,这个原型对象又有构造它的上一级原型对象,如此一级一级的关系链,就构成了原型链。原型链的最顶端就是Object.prototype ;

原型链的形成就是对象的属性和方法,有可能是定义在自身内的,也有可能会定义他的原型对象上。由于原型本身也是对象,又有了自己的原型,所以就会形成。

总的来说它是实现继承的主要方法,基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。


JavaScript之彻底理解原型与原型链
Object.prototype是Object构造函数的原型,处于原型链的顶端,Object.prototype.__proto__已经没有可以指向的上层原型,因此其值为null \/\/总结:Object.__proto__-->Function.prototypeObject.prototype.__proto__-->null7.2Function.__proto__、Function.prototype、Function.prototype.__proto__Function....

原型和原型链的理解
原型链的形成就是对象的属性和方法,有可能是定义在自身内的,也有可能会定义他的原型对象上。由于原型本身也是对象,又有了自己的原型,所以就会形成。总的来说它是实现继承的主要方法,基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。

深入理解JavaScript原型与原型链(GIF预警)
隐式原型__proto__称作隐式原型,所有的对象都具有__proto__属性。对象的隐式原型指向了该对象构造函数的原型对象,保证对象能访问挂载在原型链上定义的属性和方法。p是Person构造函数实例化的对象,所以p.__proto__===Person.prototype为true,保证p可访问Person原型上定义的属性和方法。console.log(p...

原型、原型链和继承~我终于搞定了啊~~
上图中画红色线的部分就是原型链,原型链就是原型中的关系的指向,直到最终结果为null也就是Object.prototype,原型链就结束了,也就是说***是原型链中的终点。 我们可以通过Object.setPrototypeOf(obj,prototype)方法来设置具体内容的原型链,但是如果不是必要建议不要这样做,因为这样做是非常耗性能的。?isPrototypeOf(...

深度理解原型和原型链(看完不懂来打我)
深度理解原型和原型链(看完不懂来打我)Object.prototype.type="x";Function.prototype.type="y";functionA(){};consta=newA();console.log(A.type);console.log(a.type);一道很常见的原型链的面

原型跟原型链区别是什么?有大神可以解释一下吗?请不要百度复制粘贴过来...
原型链一直是个很抽象的概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.基础知识 在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个...

javascript原型,原型链 有什么特点
javascript原型,原型链特点:原型链实现了继承。JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针,指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就...

js中什么是原型对象和原型链
每个 JavaScript 对象内部都有一个指向其它对象的“指针”或者 “引用“, 并通过这种方式在对象之间建立了一种联系,形成了一种链式结构,我的理解这就是所谓的原型链。function F() {} \/\/ F 是一个函数,函数也是对象,而且每个函数都有一个属性叫:"prototype"var o = new F(); \/\/ F....

一文搞懂instanceof实现的原理是什么!
我们拿到instanceof左侧对象的原型链 再拿到instanceof右侧构造函数的显式原型prototype 如果原型链中存在显式原型prototype,instanceof返回true,否则返回false 如果大家对上面的说明看的模糊,那么快去补一补原型和原型链的知识。我们可以简单实现一个instanceof函数,大家就更容易理解了。代码如下:\/***@...

深入分析JS原型链以及为什么不能在原型链上使
在我的理解里,__proto__才是真正的原型链,prototype只是一个壳。如果你使用的是chrome浏览器,那么你可以尝试使用alert(Tom.__proto__.ability.run),你发现这样的写法完全可行,而且事实上当只有原型链上存在ability属性的时候,Tom.ability其实是指向Tom.__proto__.ability的;当然,如果你跑到IE...

东市区18195563026: 如何更加简单的理解JS中的原型原型链概念 -
申胖中宝: 原型是上一辈,原型链就是直系血缘关系,上一辈的很多东西可以遗传到下一辈.这样理解有误差,但是也差不多了.

东市区18195563026: js中什么是原型对象和原型链 -
申胖中宝: 每个 JavaScript 对象内部都有一个指向其它对象的“指针”或者 “引用“, 并通过这种方式在对象之间建立了一种联系,形成了一种链式结构,我的理解这就是所谓的原型链.function F() {} // F 是一个函数,函数也是对象,而且每个函数都有...

东市区18195563026: 原型跟原型链区别是什么?有大神可以解释一下吗?请不要百度复制粘贴过来 -
申胖中宝: 原型32313133353236313431303231363533e59b9ee7ad9431333337393033链一直是个很抽象的概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.基础知识 在JavaScript中,一共有两种类型...

东市区18195563026: 什么叫原型?JavaScript里的原型是什么意思? -
申胖中宝: 原型链,顾名思义,就是某个对象最基础的属性和方法都保存在原型里面,这个和OOP的类有点像,不过JavaScript的原型是可以动态改变的

东市区18195563026: javascript原型,原型链 有什么特点 -
申胖中宝: 特点:原型链实现了继承.<br>原型链存在两个问题:<br>a 包含引用类型值的原型属性会被所有实例共享.<br>b在创建子类型时,无法向超类型的构造函数中传递参数.<br>原型链:每个继承父函数的子函数的对象都包含一个内部属性_proto...

东市区18195563026: 如何理解javascript原型链 -
申胖中宝: js对象是基于原型,最基础的原型是object.当对某一对象取属性的时候,当发现该对象没有该属性时,回去查询该对象的原型,还没有就查询原型的原型,直到object对象没有.而对象的原型,原型的原型……就组成了一个原型链

东市区18195563026: 什么是作用域链,什么是原型链,它们的区别,在js中它们具体指什么 -
申胖中宝: 什么是作用域链,什么是原型链. 作用域是针对变量的,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域 全局作用域==>函数1作用域==>函数2作用域 作用域的特点就是,先在自己的变量范围中查找,如果找不...

东市区18195563026: 面试问js原型怎么理解 -
申胖中宝: 一、基于原型链的继承1.继承属性 JavaScript 对象是动态的属性“包”(指其自己的属性).JavaScript 对象有一个指向一个原型对象的链.当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原...

东市区18195563026: 深入分析JS原型链以及为什么不能在原型链上使 -
申胖中宝: 在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype;如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条).以下将会围绕prototype和__proto__这两个名词解释为什么不能...

东市区18195563026: 在JavaScript的原型链继承方式中,为什么子类在调用父类的构造函数时不能传参数? -
申胖中宝: 以前我在看书时也遇到过这样的问题,找了很多资料都没有明确的解释. 我觉得,并不是语法上不能实现对构造函数的参数传递,而是这样做不符合面向对象编程的规则:对象(实例)才是属性的拥有者. 如果在子类定义时就将属性赋了值,...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网