JS中的 原型链

基础:
只有构造函数有原型属性 - prototype,它是一个对象
原型对象中有个constructor属性,constructor指向构造函数本身,也只有原型对象具有constructor属性
所有的对象都有 __protp__属性,它也是个对象

1.构造函数
 // 构造函数
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      // 多个对象,会存储多个sayHi方法
      this.sayHi = function () {
        console.log('大家好,我是' + this.name);
      }
    } 

    var s1 = new Student('lilei', 18, '男');
    var s2 = new Student('hmm', 18, '女');

    s1.sayHi();
    s2.sayHi();

    console.log(s1.sayHi === s2.sayHi); // false 两个独立的sayHi方法

我们可以通过构造函数批量创建具有相同属性的对象,但当构造函数内有静态方法的时候,每创建一个实例都会为静态方法在内存中开辟一块空间,而这些方法都是一样的,浪费内存。


image.png

解决方案是将静态方法放在构造函数的原型prototype上,构造函数的原型不会被实例拷贝,所有的实例对象都可以访问构造函数的原型,这样节省了内存空间。

    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    } 

    Student.prototype.sayHi = function () {
      console.log('大家好,我是' + this.name);
    }

    // 通过Student构造函数,创建的对象,可以访问Student.prototype中的成员
    var s1 = new Student('lilei', 18, '男');
    var s2 = new Student('hmm', 18, '女');

    s1.sayHi();
    s2.sayHi();

    console.log(s1.sayHi === s2.sayHi);// true
2.原型链

把构造函数、构造函数的原型、构造函数的实例之前的关系成为原型链


image.png
3.查找规则

实例对象访问一个方法或者属性的步骤
1.在本身对象内查找
2.通过__proto__访问构造函数的原型prototype内查找
3.通过构造函数的原型prototype内的__proto__访问Object构造函数的原型prototype查找,结果是 null

image.png

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Javascript语言的继承机制一直很难被人理解。 它没有"子类"和"父类"的概念,也没有"类"(class)和...
    自娱自楽阅读 1,365评论 0 0
  • 背景介绍 JS中万物皆对象,但是分为两大类,函数对象,普通对象 所有的函数对象都有一个prototype属性,这个...
    没事儿啊阅读 643评论 0 6
  • 先看一下什么是原型链 bar并没有num 属性,它是怎么拿到3的呢 此处的 bar 就是通过原型链找到了值原型链...
    施主画个猿阅读 408评论 0 1
  • 在了解原型链之前,我们首先理解几个概念: JavaScript内置对象 所谓的内置对象 指的是:JavaScrip...
    Mica_马超阅读 633评论 0 2
  • 来源 了解记忆宫殿,你就需要了解一个人,利玛窦(1552年-1610年),记忆宫殿法最早由就是意大利传教士利玛窦传...
    忆荟阅读 233评论 0 0