美文网首页
原型与原型链

原型与原型链

作者: 饥人谷_王捷 | 来源:发表于2018-10-16 00:52 被阅读0次
原型及原型链是什么

JS中的对象,在创建时都会有一个内置属性,即__proto__属性,该属性指向一个对象,事实上可以理解为对另一个对象的引用。而被引用的对象就是原型对象。与之相对的,所有函数也可通过一个内置属性prototype指向原型对象。

var a = new Object()
a.__proto__ === Object.prototype // true

var b = {}
b.__proto__ === Object.prototype // true

当对象是由构造器函数生成的时候,结果也是一样。

function F() {}
var c = new F()
c.__proto__ === F.prototype // true
c.__proto__.__proto__ === Object.prototype // true

在上面的例子中,c.__proto__.__proto__即构成了一个连接到顶层Object.prototype原型对象的链接,这就是原型链。通过以上例子,可以简单的得到

对象.__proto__  === 对象的构造函数.prototype
Function.__proto__  === Function.prototype // true 函数也是一种对象
Function.__proto__.__proto__ === Object.prototype // true

事实上,__proto__prototype只是对象和函数中的两个属性名罢了,它们分别指向一个原型对象,顶层的原型对象就是Object.prototype所指向的对象。因为Object.prototype指向的是一个对象,那么该对象也有一个__proto__属性,又因为Object.prototype是指向顶层原型对象,那么

Object.prototype.__proto__  === null // true
原型的作用

说了这么多,接着说原型的作用。原型存储着一些共有的属性及方法。所有对象(函数也是种对象)都可通过原型链来访问其中的属性。另外,既然__proto__prototype只是代表引用,那么就可以改变它们引用的原型对象。
如果改变原型对象属性,会影响到与之关联的其他对象对其属性的调用,毕竟对于对象都是引用而非拷贝,这需要特别注意。

var x1 = {a:2};
var x2 = Object.create(x1);
x2.a; // 2

在上面的代码中,将x1设置为x2的原型,x2此时就能访问x1对象的属性。
所以只要理解了在对象及函数背后含有指向另一个对象的属性就好理解原型及原型链了。原型是为了方便存放一些公用属性及方法,原型链就是用来指向原型的就好了。

另外,如果原型链中存在相同的属性名时,先链接到的属性会屏蔽后面的相同属性。

var x1 = {a:1};
x1.__proto__.a = 2;

x1.a // 1
delete x1.a // true
x1.a // 2

从上面的例子中可以看到,在对象内部及对象原型设置拥有相同属性名的a,此时调用x1.a得到的是1,当删除自身属性a后,原型中的a就会浮现出来。
可以通过Object.getPrototypeOf(obj)来获取对象的原型。

相关文章

  • 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/xaxczftx.html