js-我对原型,原型链的理解

 function Foo(name)
 {
     this.name=name;
 }
 let f1=new Person('小明');  //通过new操作符构造一个Person实例
 console.log(f1.name) // 小明复制代码

  虽然是简简单单的两行代码,然而它们背后的关系却是错综复杂的,如下图所示:

看到上面的图片,肯定有人看不下去了,说实话,我刚开始看到这张图片,我也不想看了,不过今天我会跟大家讲清楚

1.这里面有几个重要属性,大家一定得明白,prototype,_proto_,constructor,js里万物皆对象,其中,prototype(原型属性)是函数所独有的,_proto_和constructor属性是对象所独有的,因  为函数也是对象,所以函数拥有以上三种属性。

一:prototype(原型属性)

    这个属性是函数独有的,它是函数内部的一个指针,它指向一个原型对象 即 Person.prototype,这是构造函数的原型对象,它是从函数指向对象它的

作用
    就是包含可以由特定类型的所有实例共享的属性和方法,也就是让该函数所实例化的对象们都可以找到公用的属性和方法,再简而言之就是这里面的属性是共享的

 二:_proto_(这是一个隐藏的属性)

由上图大家可以看到: f1._proto_===Foo.prototype Foo()._proto_===Function.prototype

它是从对象指向对象,它指向父级的原型对象,在创建实例对象时,实例在调用属性或者方法时会先去构造函数内部寻 找,如果没找到,实例对象就会去_proto_属性所指向的父级原型对象上寻 找,f1._proto_===Foo.prototype如果还是没有则继续往上找(这就是一条原型链) 即Foo.prototype._proto_===Object.prototype,如果还是没有就继续往上,Object.prototype._proto_===null,直到寻找到原型链的顶端null

 三:constructor(构造函数属性)

这是一个构造函数属性,它指向一个函数:f1.constructor===Foo.prototype.constructor===Foo()

   Foo().constructor===Function();

  1. 总结一下:
  2. 我们需要牢记两点:①__proto__constructor属性是
    对象
    所独有的;② prototype属性是
    函数
    所独有的,因为函数也是一种对象,所以函数也拥有__proto__constructor属性。
  3. __proto__属性的
    作用
    就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到__proto__属性的终点
    null
    ,然后返回undefined,通过__proto__属性将对象连接起来的这条链路即
    我们所谓的原型链

  4. prototype属性的
    作用
    就是让该函数所实例化的对象们都可以找到公用的属性和方法,即f1.__proto__ === Foo.prototype
  5. constructor属性的含义就是
    指向该对象的构造函数
    ,所有函数(此时看成对象了)最终的构造函数都指向
     Function
  6. 初学者可能会在何谓指向上困惑,所谓指向不过就是一个代称或者叫别名也好,比如一个人

     叫默罕默德.思哈尼.阿尔辛曼,这尼玛名字太长了吧,咱管他叫默,这是就叫指向它,两者等价


转载于:https://juejin.im/post/5cb67745e51d456e63760463

你可能感兴趣的:(js-我对原型,原型链的理解)