JS 原型与原型链(下)

简介: JS 原型与原型链(下)

一:什么是原型链?

原型链的概述:

      原型链顾名思义是一条链型的关系,有下面这一张图来形象化理解:我们知道我们创建的实例化对象都有个属性叫做__proto__(对象原型),这个属性指向的是构造函数的原型对象prototype,既然这个原型对象实质也是个对象,它也有一个对象原型__proto__的属性去指向它的构造函数的原型对象prototype,它的构造函数就是顶级构造函数Object,那同理,Object构造函数的原型对象的__proto__属性又指向谁呢?其指向最顶级null,可以发现,我们的原型对象形成了一条线(链),这就是原型链




原型链的作用:

      层层逐级查找,当我们需要访问对象的某个成员(属性/方法)时,会先在实例化对象本身查找有没有,如果本身没有,但是由于其有__proto__指向其构造函数的原型对象,就回去其原型对象里找,如果还没有,其原型对象也有__proto__指向更高一级的原型对象,以此类推如果再网上还没有,就指向了null,说明没有该成员。说白了就是一个逐级查找的链式结


二:原型的 this 指向问题

   原型对象中的成员的 this 指向的规则我们知道是内容的调用者,谁调用就指向谁,而原型对象的成员的调用者是实例化对象,所以我们的 this 指向也是实例化的对象,与构造函数内部的this指向相同


证明:


    让原型对象中的this赋值给变量that,并调用原型对象中的方法,然后比较that与实例化对象是否相等


    <script>

       function Animal(name,age){

             this.name=name;

             this.age=age;

       }

       var that;

       Animal.prototype.eat=function(){

           console.log('我在吃午饭');

           that=this;

       }

       var dog=new Animal('旺财',5)

       dog.eat()

       console.log(that===dog);

    </script>

结果为true,足以证明原型对象中的this指向的是实例化对象




三:使用原型对象拓展内置对象方法

     我们接触过数组对象,字符串对象等等内置对象,但里面内置好的方法并不全面,例如数组对象中并没有求和的方法.....这些内置方法都是写在其对应构造函数的原型对象里的,对此我们可以采用追加的方式拓展内置对象的方法


内置对象的方法:


   内置对象方法在其构造函数的原型对象中,我们可以直接打印输出查看所有方法


    <script>

        console.log(Array.prototype);

    </script>



拓展内置方法:

     就按照上述方法追加即可,但要注意只能追加,不能用等于号添加对象的方式添加(这种会覆盖掉原有内容造成不可预知的错误,上一篇文章提到过)


    <script>

        Array.prototype.arr_sum=function(){

           var sum=0;

           for(var i=0;i<this.length;i++){

               sum=sum+this[i];

           }

           return sum;

        }

        var arr1=new Array(1,2,3)  //以这种形式创建数组是方便直观理解,可以var arr1=[1,2,3]

        console.log(arr1.arr_sum())

        console.log(Array.prototype);

    </script>

我们可以发现可以调用创建添加好的方法执行数组求和,并且打印Array的原型对象的内置方法,可以看到确实被加了进去




使用原型对象为内置对象添加方法是一种非常好的选择,但是再次提醒注意:只能用点追加添加的形式,不能采用等号赋值的形式!


相关文章
|
1月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
3月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
29 0
|
11天前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
11天前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
12天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
23天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
28 1
|
1月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
22 0
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
29 0
|
1月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
27 0
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26