4.JavaScript原型和原型链

4.1 概念介绍

  • 原型和原型对象
    原型也是对象,叫原型对象。所以,原型和原型对象是一回事,只不过有人说的简洁,有人说的是全称。
     
  • 原型链
    原型(原型对象)、构造函数和(对象)实例构成了原型链。原型链的核心就是依赖对象的__proto__指向,当检索依赖对象本身不存在的属性时,就会一层一层地向上去查找创建对象的构造函数,一直找到Object,就没有__proto__的指向了。
     
  • 构造函数
    首字母大写的函数。例如:

    function Person() {
    
    }

     

  • 对象实例
    对象有两种:

    • 函数对象:通过 new Function(); 创建的对象;
    • 普通对象:除了函数对象之外的所有对象;

4.2 概念之间的关系

  • 每一个函数都有一个prototype属性;
  • 每一个JavaScript对象(null除外)都具有一个属性,叫做__proto__,这个属性指向该对象的原型(prototype);
  • 每一个原型都有一个 constructor 属性指向关联的构造函数,

4.3 示例

  1. 使用构造函数创建对象
     

    function Person() {
    
    }
    
    var person = new Person();
    person.name = "Kevin";
    
    console.log(person.name); // "Kevin"

    Person就是一个构造函数,我们使用 new 创建了一个实例对象 person。
     

  2. prototype
    每个函数都有一个prototype属性
     
    每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们说的原型,每一个对象都会从原型“继承”属性。
     

    function Person() {
    
    }
    
    //注意:prototype是函数才会有的属性
    // 而__proto__是对象才会有的属性
    Person.prototype.name = "Kevin";
    var person1 = new Person();
    var person2 = new Person();
    
    console.log(person1.name); // "Kevin"
    console.log(person2.name); // "Kevin"
  3. proto
     

    function Person() {
    
    }
    var person = new Person();
    console.log( person.__proto__ === Person.prototype ); // true
  4. constructor
     

    function Person() {
    
    } 
    console.log( Person === Person.prototype.constructor ); // true

4.4 总结

理解原型和原型链的前提是,弄清楚这里面一共有多少个概念,以及概念和概念之间的关系。

这里面涉及到的概念有:原型原型对象构造函数对象(实例)prototypeprotoconstructor

他们之间的关系是怎样的呢?

  • 首先,当我们创建一个大写字母开头的函数的时候,这个函数就是构造函数
  • 当我们new 一个这个构造函数的实例对象的时候,这个实例就是我们说的对象(实例),它具有 proto 属性;
  • 原型和原型对象是一回事,他们是基于构造函数new出来的对象,也就是函数对象而存在的,它具有prototype属性;
  • 原型和原型对象也有一个contructor属性(或者叫做指针),它指向关联的构造函数。
  • 每一个对象都有一个 proto 属性指向原型对象,这个原型对象还可以有它自己的原型,以此类推,形成了一个原型链。当查找特定属性的时候,先去这个对象里面查找,如果没有找到,那么就去它的原型对象里面找,如果还是没有,再去原型对象的原型对象里面去查找。这个操作被委托在整个原型链上,也就是我们所说的原型链了。

参考链接:
https://www.jianshu.com/p/be7c95714586
https://blog.csdn.net/xiaotao_css/article/details/72782416
https://blog.csdn.net/shuixiou1/article/details/81048816
https://www.cnblogs.com/zhengyeye/p/8986836.html
https://blog.csdn.net/m0_37585915/article/details/80843945
https://www.jianshu.com/p/08c07a953fa0
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
https://blog.csdn.net/lyt_angularjs/article/details/100729591
https://www.cnblogs.com/jianghao233/p/8983176.html
https://blog.csdn.net/m0_37585915/article/details/80843945
https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
https://www.jianshu.com/p/dee9f8b14771
https://www.cnblogs.com/libin-1/p/5820550.html
https://blog.csdn.net/yucihent/article/details/79424506
https://zhuanlan.zhihu.com/p/22787302

张子溪
146 声望9 粉丝

程序员