【JS】原型对象与原型链

原型链：

实例对象和原型对象之间的关系，通过__proto__来联系的链（如下图的1,2,3）

 

原型对象：

原型对象（Person.prototype）是 构造函数（Person）的一个实例

 

构造函数：

构造函数就是制造一个对象的函数

 

大家先看一段代码：

<meta charset="UTF-8">
    <script>
        //人的构造函数
        function Person(age){
            this.age=age;
        }
        //给人的原型对象添加一个eat的方法
        Person.prototype.eat=function(){
            console.log("eat food");
        }
        
        
        //学生个构造函数
        function Student(sex){
            this.sex=sex;
        }
        //给学生的原型添加一个sayHi的方法
        Student.prototype.sayHi=function(){
            console.log("hi");
        }
        
        //学生的原型指向了一个新的人对象（继承）
        Student.prototype=new Person(10);
        
        Student.prototype.Study=function(){
            console.log("study");
        }
        
        //实例化了一个学生
        var student =new Student("man");
        
        //这个时候，student是无法调用sayHi这个方法的
        //student.sayHi();
        
        //但是可以调用Study这个方法
        student.Study();

        //但是他可以调用eat这个方法
        student.eat();
        
        console.log(per);
    </script>

如果：

构造函数的原型（Student）对象指向的对象（person）发生了变化，那么之前在原型添加的方法（sayHi），新的实例（student）对象时无法调用的，但是指向的对象方法（person）的方法（eat），新的实例（student）是可以调用的！

 

继承

其实上述的过程就是js实现继承的过程，虽然js不是一门面向对象的语言，但是它可以通过原型实现继承。当个一对象的构造函数指向另外一个实例对象时，这个时候，这个构造函数就继承了指向对象的属性和方法，之后通过这个构造函数创建的对象就有了继承了实例对象的方法！

上代码为例：

Student指向了person（这就是实现了Student继承了Person），之后由student创建的student就有了person的eat的方法！

图一

 

图解：

图二

注释：

紫色的线：student之前的指向

绿色的线：student修改之后的指向

红色的线：person的指向

 

构造函数中prototype：构造函数中原型对象

1. 构造函数中唯一的属性
2. 我们程序员用的
3. 可以看做原型对象的指针
4. 它里边的属性或是方法可以通过实例对象直接调用

原型对象中prototype：实际的原型对象（具体的数据）

1. 实际的原型对象
2. 具体的数据集合
3. 它也是一个对象，里边也有__proto__

实例对象中__proto__

1. 指向该实例对象中的构造函数中的prototype
2. 原型对象的__proto__（经过一系列对象）最终指向object，object__proto__指向null（如图一所示）

 

可以通过修改实例对象的值修改原型对象的值吗？

• 不可以

那么怎么修改原型对象的值呢？

• 直接对象.prototype.value = 值（直接修改）

如果访问对象的这个属性的时候，没有找到该对象的属性，怎么办？

• 由于JS属于动态开发语言，对象没有该属性的时候，会动态的创建该属性！

 

大家有什么细节不懂，可以点这里

简单总结分享，有什么问题欢迎大家和我交流，感谢大家认真阅读和点赞鼓励！