Javascript中原型链的相关知识

最新推荐文章于 2024-10-13 22:28:33 发布

离逝的枫

最新推荐文章于 2024-10-13 22:28:33 发布

阅读量166

点赞数 1

分类专栏： JS 文章标签：原型模式 javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_51130780/article/details/129342846

版权

JS 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

原型链是JavaScript中对象继承的基础，它描述了通过内部proto属性连接的对象间的层次结构。当查找对象属性时，会从实例对象开始，沿着构造函数的原型链向上搜索，直至找到属性或到达Object.prototype。原型链允许共享属性和方法，实现代码复用，但直接修改原型链上的属性可能导致意外的结果，因为实例可以独立拥有属性。使用构造函数的prototype属性可以为所有实例添加方法，实现继承。

摘要由CSDN通过智能技术生成

1.什么是原型链

原型链就是当我们访问一个对象中的相关属性的时候，首先是在该对象中寻找是否含有该对象，如果找到就直接返回，若没找到则就会寻找该对象的隐示原型上去寻找，即为其构造函数的显示原型对象上寻找，若仍未找到，则就会在其构造函数的隐实原型上去寻找，就样一层一层的往上寻找，就会形成一个链式结构，我们称之为原型链。如果找到顶层的Object.prototype仍未找到该属性，则会返回一个undefined

2.原型链的具体展示

我们可以从下面的相关代码中可以看出

一、我们构建了一个构造函数，并且通过给构造函数的原型对象上添加了一个father属性。

二、然后我们通过new一个构造函数的实例对象，然后访问对象上的相关方法以及属性。

三、大致的寻找流程为，首先在child上寻找是否有father，toString等方法或属性，发现没有则通过child的隐示原型对象即构造函数的显示原型对象上去寻找上述的属性或方法，然后发现有facher的属性，然后在通过显示原型的隐示原型对象即object上去寻找，发现找到了即返回。

        function Person(name){
            this.name = name
        }
        Person.prototype.father = '王五'
        var child = new Person('李四')
        console.log(child);
        console.log(child.father);
        console.log(child.toString);

3.原型链的特点及运用

原型链只是用来查找对象上是否有对应的属性或方法，若没有则通过其隐示原型一层一层的查询，不能修改对应的属性，如下代码

在下面的代码中我们通过Person构造函数构造了两个实例对象，并给其中一个添加了father属性。可能你就会认为，没错，child中没有father属性，然后通过原型链去寻找，找到了然后修改了对应的属性值。所以后面的fahter属性都是李四了，然后却不是这样。通过运行我们发现，虽然child的father是李四但是并不是修改了原型对象上的属性，而是给实例对象上添加了一个father属性，其值对应的是李四罢了。

        function Person(){
       
        }
        Person.prototype.father = '王五'
        var child = new Person()
        child.father = '李四'
        var children = new Person()
        console.log(child);
        console.log(child.father);
        console.log(children);
        console.log(children.father);

那么我们该怎么样进行使用原型链呢？我们可以给构造函数的原型对象上添加修改等方法。然后通过实例对象来进行调用，即实例对象的隐实原型这条道路来进行调用，有点类似于java中的set和getter方法

        function Person(name){
            this.name = name
        }
        Person.prototype.setName = function(name){
            this.name = name
        }
        var child = new Person('李四')
        
        var children = new Person('王五')
        children.setName('赵六')
        console.log(child);
        console.log(child);
        console.log(children);
        console.log(children);