JS原型链的理解

比眉伴天荒 2023-06-08 06:23 24阅读 0赞

java作为面向对象的一门后台开发语言，有类的概念，有继承、封装、多态。但是js是基于对象，没有类，包括es6的class本质上还是对象，和java中的class并不相同。但是想一下在实际开发经常用到`toString这些`方法，为什么可以直接使用而不用每次都去定义，这一切都要归功于原型链

**构造函数**

构造函数其实就是一个普通函数，但是在命名上习惯采用首字母大写的方式，其次调用的时候需要使用new关键字

function Person(name, age) {
        this.name = name
        this.age = age
        this.sayName = function () {
            console.log(this.name);
        }
    }
    var per1 = new Person("CXK", 18);
    var per2 = new Person("huge", 28);
    
    per1.sayName() // CXK
    per2.sayName() //huge

很明显，per1和per2两个实例对象的sayName是不一样的，那意味着每次实例化同一个函数，都会开辟新的内存空间，如果new了无数个对象，那系统开销就十分庞大了，那这时候就需要一个方法，让实例对象在需要的时候沿着某个线索去一个公共区域自己找需要的对象，也就是**原型prototype**

function Person(name) {
      this.name = name;
    }
    
    // 通过构造函数的 Person 的 prototype 属性找到 Person 的原型对象
    Person.prototype.gender = function() {
      console.log("都是男人");
    }
    
    let p1 = new Person("CXK");
    let p2 = new Person("huge");
    
    console.log(p1.gender === p2.gender); // true

可以发现，通过**prototype**实例化的两个对象属性指向了同一块内存地址，为什么会这样呢

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70][]

每个函数都会有一个prototype属性，这是在创建函数的时候js引擎自动创建的，这个属性指向函数的原型对象，那原型对象怎么知道自己是被哪个构造函数初始化的呢，其实原型对象也有一个constructor属性指向了构造函数

Person.prototype.constructor === Person // true

**原型链**

每个对象在被创建的时候会被自动添加一个\_proto\_的属性，这个属性值指向了当前实例对象的构造函数对应的原型对象

p1.__proto__ === Person.prototype // true

假如我们从一个对象中去找一个属性name，如果在当前对象中没有找到，那么会通过\_\_proto\_\_属性往原型对象中找，没有继续原型的原型对象找，一直往上找，期间如果找到了就直接用，没找到就到了Object对象，**Object是JS中所有对象数据类型的基类(最顶层的类)在Object.prototype上没有`__proto__`这个属性**

Object.prototype.__proto__ === null

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0NTEwNDU1_size_16_color_FFFFFF_t_70]: /images/20230531/a2afe1a2e27b4fb093c43526835bc736.png