彻底理解js的原型链

JavaScript011

彻底理解js的原型链,第1张

本文主要参考了 MDN文档 和 知乎讨论 。

在js中,大部分东西都是对象,数组是对象,函数也是对象,对象更加是对象。 不管我们给数组和函数定义什么内容,它们总是有一些相同的方法和属性 。比如说hasOwnProperty(),toString()等:

这说明一个对象所拥有的属性不仅仅是它本身拥有的属性,它还会从其他对象中继承一些属性。当js在一个对象中找不到需要的属性时,它会到这个对象的父对象上去找,以此类推,这就构成了对象的原型链 。理解js的原型链对使用js的对象非常有帮助。

让我们通过一个例子由浅到深地理解原型链:

这是我们经常使用的创建对象的方式,将共同的方法放到Foo.prototype中,所有实例都共有这个方法了。

这是怎么实现的呢?我们看下面这张图的第一行:

我们定义的show函数在Foo.prototype中,当我们执行f1.show()时,js发现f1本身没有show这个属性,所以它就到f1的原型(也就是__proto__指向的对象)去找,找到了就可以调用。

图片第一行告诉了我们4点:

我们先看看Foo的原型吧!Foo是一个函数,它的构造函数是js内部的function Function(),Function的prototype指向了一个对象Function.prototype,因此Foo的__proto__就指向了Function.prototype,如图。

我们继续深入下去,Function.prototype这个对象,它就是一个普通的对象,它的构造函数是js内置的function Object(),function Object()的prototype指向Object.prototype,因此Function.prototype.__proto__就指向Object.prototype,这个对象中定义了所有对象共有的属性,比如我们之前说的hasOwnProperty()和toString()等。

Object.prototype就是原型链的终点了,它的__proto__是null,js查找属性时,如果到这里还没有找到,那就是undefined了。

到这里就不难理解为什么我们说在js中,函数也是对象了,它就是继承自对象的!

如果如有疑问,欢迎指出!

1.、js的对象可以分为函数对象和普通对象,每个对象都有 proto 属性,但是只有函数对象才有prototype属性(prototype=原型对象)

2、Object是最高级的函数对象,Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象,我们自己手写的function是再低一级的函数对象

3、 proto 是一个对象,它指向某一个prototype,并且有2个属性:constructor和 proto

先来看第一种写法

我们声明了一个构造函数Person,并为它的2个实例都定义了sayName方法

如果我们希望所有的实例都有sayName方法,减少重复的定义

可以像下面这么写:(第二种写法)

我们在构造函数Person中定义了一个数据成员和一个函数成员

每当我们创造一个新的Person实例时,都会在内存中单独为它分配私有的空间

也就是说,p1和p2都有自己的name属性和sayName方法

这个name属性和sayName方法是实例自己私有的

在控制台直接打印p1得到如下结果:(第一、第二种写法是等价的)

再来看第三种写法:

这样的话,每个Person实例依然都会有name属性和sayName方法

不同的地方在哪呢?

在控制台直接打印p1得到如下结果:

不难发现,当前这种写法是将sayName定义在Person的原型对象上的

也就是说,sayName方法不再是每个Person实例私有的,而是所有Person实例共享的

这样做 既不影响每个实例打印/输出自己的name值,又可以节省内存

还是相同的例子

当我们在程序中调用 p1.sayName方法时,编译器会 沿着原型链(自底向上) 地寻找原型对象上是否有这个方法

如上图所示,编译器会先从p1自身(最外层)开始找

然后去 p1. proto (即Person的原型对象 = 外层红色方框)里面找

最后再到 p1. proto . proto (即Object的原型对象 = 内层红色方框)里面找

js对象是由构造方法创建的,构造方法有个原型prototype,那么对象和原型之间的关系就叫做原型链。例如用原型给对象定义方法obj.prototype.funName = function(){alert("我是原型的方法")}对象可以直接从原型中调用这个方法obj.funName()更多JS深层知识可以进群前面是二九6中间是5九一后面是二九零,每天分享JS深层技术。