JavaScript原型与原型链

偏执的太偏执、 2022-12-19 14:24 381阅读 0赞

## 原型 ##

##### 任何一个对象都有原型 #####

1.创建一个对象

function Preson () {
      this.name = 'zs';
      this.age = 18;
    }

2.在Proson的原型上创建一个方法

Preson.prototype.say = function say () {
      console.log('Hello ');
    };

3.验证：创建两个Preson对象的实例，这两个对象都能共享访问到原型上的方法say

//创建一个两个实例  证明原型对象上的方法可以共享
    //其所有属性和方法，都能被构造函数的实例对象共享访问
    let p1 = new Preson();
    let p2 = new Preson();
    //直接调用方法 
    p1.say();      // 输出Hello
    p2.say();     // 输出Hello

4.构造器：constructor

console.log(Preson.prototype.constructor === Preson)   //true  证明相等

#### 结合下图可知Preson.prototype.constructor又指向了Preson对象 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70_pic_center]

## 原型链（结合上图） ##

function Preson () {
    
    }
    //实例
    let p1 = new Preson();
    let p2 = new Preson();

#### .\_\_proto\_\_属性是JS对象中的一个内置属性(所有对象都有)，一般情况下指向的是构造函数的prototype属性 ####

1.比较 所有\_\_proto\_\_这个属性指向的是构造函数的prototype这个属性

console.log(p1.__proto__ === Preson.prototype)  //true

2.理解函数为什么也有\_\_proto\_\_属性(JS方面万物皆对象)

console.log(Preson.__proto__ === Function.prototype);  //true

### 当JS引擎查找对象的某个属性时，先查找对象本身是否存在该属性，如果不存在，就会在原型链上一层层往上查找 ###

##### 示例： #####

Preson.prototype.say = function say () {
      console.log('Hello');
    }
    p1.say(); // 因为 p1.__proto__ === Preson.prototype
    //用一个比较特殊的方法
    p1.toString();
    console.log(p1.__proto__);//这上面没有继续寻祖
    console.log(p1.__proto__.__proto__);  //这上面存在toString这个方法
    console.log(p1.__proto__.__proto__.__proto__); //最终为null

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3cb57ed5d4c643db890bfa593ccdccdc.png