马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

关于javascript中的prototype

[复制链接]
查看2192 | 回复0 | 2019-8-14 23:46:32 | 显示全部楼层 |阅读模式
作为一个致力于前端开发的人员,能够熟练掌握javascript的原理和机制是每个小白的必经之路,这也是最痛楚的。有人说前端功力好不好最主要的就是看对js的掌握能力,有人说十年也啃不完一门javascript。而我们能够知道的是:javascript是每个前端学习的核心技能(想想之后的node.js、vue.js,颤抖吧!!!)
本期主要介绍一下js当中的prototype原型(emmm,不知道你们觉得难不难,反正我当时看了许多博客都一知半解,也许如今也是,以是不足之处,请留言指教。。)

    先了解一下prototype是什么
  1. function Person() {//首先随便定义一个函数                    }
复制代码
    在控制台看看这个函数的prototype有什么
  
235006pl4g0rsppp1y44fm.png


         我们发现里面有两个东西:constructor__protot__,并且constructor指向Person这个函数,而__prototype__展开后有许多方法,并且也存在一个constructor
         (这里的展开我就不贴图了,大家要自己动手才能对知识有更深刻的体会,千万不要做伸手党,只会坑自己的,这点我是深有体会)
        这时间我们会发现,每个函数都有一个prototype属性,prototype包含函数实例共享的方法和属性。(有没有发现这和构造函数有点像呢)
        接下来我们继续,通过Person函数创建两个实例对象
  1. function Person() {         }        Person.prototype.name = "person"//在Person的原型上添加一个name属性        var person1 = new Person()        var person2 = new Person()
复制代码

  
235006hff1zr9ozah3w93v.png


  
           我们发现两个实例化对象中都继续到了name这个属性,以是说当通过new来生成一个类的对象时,prototype对象的属性就会成为实例化对象的属性。
           如今我们大概知道了,在js中,你创建的每一个函数中都会产生一个prototype,这个函数以及它的实例化对象都可以用到prototype中的共享方法。我们也发现除了js本身给出的prototype的方法外,我们也可以在prototype中添加自定义方法。
我们再看一个很有意思的东西
235007si4mf0ihhsi88zlw.png


   
             看看我们发现了什么新大陆哈哈哈,原来我们之前用的数组方法都是从Array原型中来的,正因为js将这些方法写在Array.prototype中,以是我们才能在定义的数组中使用它。你不相信??
      那你可以自己动手试试。
  1. Array.prototype.hahaha ="balabal"   //在Array.prototype中添加一个新属性hahaha        var arr = [];        var arr1 = new Array;   //在控制台中输入arr.hahaha 或 arr1.hahaha ,你看看结果是不是“balabal”
复制代码

       如今知道为什么说prototype是js中的一个重要机制了吧


235007ys8k38yh8yy8k8hv.png


  之前我说自己觉得原型很难,就是因为对prototype和__proto__混淆不清
看图我们可以发现,在Person prototype中存在constructor并且指向其构造函数,而person1 和person2的__proto__都指向其实例化的构造函数Person的原型
   用等式可以如此表示
        Person.prototype == person1.__proto__
        Person.prototype.constructor ==  Person
  1. function Person(){         this.name ="person"        }           var person1 = new Person;       console.log(person1.name)       person1.name="person1"       console.log(person1.name)
  2.      // person   person1
复制代码

  在js查找对象内的属性时,都会遵从一个方法。好比查找person1.name的值,首先会在person1函数内查找,如果有则输出,没有就往上在person1的原型上查找(这就是原型链查找),没有则继续往上,直到达到原型链的顶端Object.prototype
       关于原型差不多就是这些,以后有新的见解也会继续更新的,如果以上哪里有不对的地方,请务必要告诉我,谢谢!







  

来源:https://www.cnblogs.com/xiaowin/archive/2019/08/14/11355404.html
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则