原型与原型链的理解,秒懂系列,持续更新

190 阅读4分钟

一、基本概念

在系统的学习原型与原型链之前,先学习一些基本的知识作为铺垫。

原型:
        js中的对象是基于原型的。它定义并实现了一个新创建对象所必须包含的属性列表(因 为它是它所创建的对象的原型)。

原型链:

          每个实例化对象都有自己的原型或构造函数,这些原型和构造函数也可能会有自己 的原型或是构造函数,以此类推,这些原型组成一种类似链式的结构,这条链就是原型链。

二、原型_proto_和prototype之间的解读

       想要将原型知识串起来,必须搞明白的东西。

       在js中,我们经常会经常使用和操作对象,对象与原型和原型链密不可分,所以原型与原型链是必须掌握的内容。

        首先,先来了解,原型都有什么。

        _proto_:对象的原型对象

        Prototype:函数对象的子对象,prototype表示该函数的原型。

        最常用的构建对象的方法就是直接创建对象和使用构造函数创建对象,所以,相应的,函数也会加入原型之中,由于函数的加入,导致定义清晰的原型变得容易混淆,这也是原型与原型链的难点之一,突破这个难点,原型与原型链的学习将变得十分轻松,那么该如何突破呢?

        不妨直接使用js为我们提供的内容进行解析。

        创建一个对象和构造函数。


let a={};
function b(){
        console.log("我是构造函数实例化出的对象");
    };

         然后查看他们的原型。

console.dir(a);
console.dir(b);

在浏览器中查看。


       此时,可以明确的看到对象只含有_proto_一个原型,而函数b()不仅含有_proto_原型,还含有一个prototype。

       在js的定义中,函数也是对象,所以,函数也会包含_proto_这个原型对象,而函数本身包含prototype原型,所以函数原型有两个,为_proto_和prototype。

       那么,通过函数(构造函数)实例化的对象呢?

       从概念上理解,原型定义并实现了一个新创建对象所必须包含的属性列表,构造函数实例化的对象包含了构造函数的属性列表,拥有此构造函数的属性列表。

       同样的,函数原型prototype包含了此函数的属性列表,所以将此函数当作构造函数实例化对象时,实例化出来的对象的原型就是函数的prototype。

       来更直观的感受一下,在上面的例子的基础上,使用b()来实例化一个对象。

let c=new b();
console.dir(c);

        看下结果。


       可以清晰的看到在b的原型_proto_中,显示的是consructor:f b()

       Constructor是prototype中含有的一个指针,在函数实例化的对象里,这个指针指向的是实例这个对象的构造函数,那不就是b()的prototype?

       再来查看函数b()的函数原型prototype都有什么。


       明显的看到b()的prototype里的consructor:f b()

       足够清晰了吧,此实例化对象的原型就是b()的prototype,即b.prototype。

       敲黑板的知识点:由函数实例化的对象,此对象的原型是构造函数的prototype。(这个知识点彻底会了,原型和原型链,也就没什么难懂难理解的了,简直就是水到渠成。)

       原型也是对象,所以无论是什么原型,都会带默认的原型,即_proto_:object,从例子中也可以看出。

       那就应该发问了,为什么非得是object????

       就像为什么桌子叫桌子这种问题,只能说,是规定,再委婉一点,就是Object包含了js的对象应该拥有的基本属性列表,自带的,没毛病。

虽然问题没营养,但牵扯到一个小知识点。

那就是:Object对象的原型,是null。

由于我见识短浅,这是为什么我也不知道,有知道的大佬可以在评论区留言~~~~

后续内容可能会在这里更新,可能会开新的文章,看完了留个评价再走,求求了~~~