最简单的原型链图文解析

355 阅读1分钟

JS中原型链最简单的图解,1分钟理解原型链


所以说null是所有原型链的重点

所以有人说万物皆空,也有人说万物皆对象 原型链绝对不可能出现死循环

四句金言

  1. 只要是构造函数,就有prototype属性,对应自身的原型对象
  2. 只要是原型对象,就有constructor属性,对应自身的构造函数
  3. 只要是对象,就有__proto__属性,对应自身的原型对象
  4. 函数也是对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>最简单的原型链理解</title>
</head>

<body>

    <script>

        // 自定义构造函数
        function Person(name,age){
          this.name = name;
          this.age = age;
        };
        
        // 实例化对象
        var p1 = new Person('张三',20);
        
        // 内置函数 Object
        var obj = new Object; 
        
        // 实例化对象p1的原型链
        console.log(p1); // Person
        console.log(p1.__proto__); // Person.prototype
        console.log(p1.__proto__.constructor); // Person
        console.log(p1.__proto__.__proto__); // Object.prototype
        console.log(p1.__proto__.__proto__.constructor); // Object
        console.log(p1.__proto__.__proto__.__proto__) // null
        
        // Person函数对象的原型链
        console.log(Person.__proto__); // Function.prototype
        console.log(Person.__proto__.constructor); // Function
        console.log(Person.__proto__.__proto__) // Object.prototype
        console.log(Person.__proto__.__proto__.constructor) // Object
        console.log(Person.__proto__.__proto__.__proto__) // null
        
        // 内置函数Object的原型链
        console.log(obj.__proto__); // Object.prototype
        console.log(obj.__proto__.constructor); // Object
        console.log(obj.__proto__.__proto__); // null
        
        
     </script>
</body>

</html> 

通俗的说
__ proto __ 这个属性就是妈妈
实例化对象p1.__ proto __ 就是p1的妈妈,所以p1会继承她妈妈的属性。同理,p1. __ proto __ .__ proto __ 就是p1的妈妈的妈妈(奶奶)所以p1的妈妈会继承p1的妈妈的妈妈(奶奶)的属性,以此类推。
所以p1 会继承他所有原型对象的属性!!