js高级的原型与原型链个人理解

最新推荐文章于 2024-11-13 17:27:29 发布

2333!!!!!

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量491

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122708892

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js高级的原型与原型链个人理解</title>
</head>
<body>
<script type="text/javascript">
    /*我视频是跳过看的,我觉得和java类很像,下面都是个人理解*/
  /*对于js的原型prototype的object来说在我看来他与java的class类模板就是一个东西
  * */
  /*比如呢:*/
  function Fn(){
    /*他函数的起名大写就相当与是给他创建了一个无参构造函数
    * 这个函数的原型object 就是 Fn这个class模版
    * Fn()就是他的无参构造你也可以有参构造
    * */
  }
  var f=new Fn();/*这种就是用Fn()构造函数的class模板复制一份 在一个新的地址 然后再把这个变量指向这个地址
  这样就形成了一个链子
  后端人理解非常简单
  */
  /*你甚至可以认为Fn()这个构造函数外面包裹着一层虚构的class类他的类名就是Fn*/
  /*只要你理解了这一点就没什么好说的了他们的祖宗总归是Object类*/
  /*prototype与__proto__*/
  /*
  prototype是显式原型
  __proto__是隐式原型
   */
  console.log(Fn.prototype);
  console.log(Fn.__proto__);/**/
  console.log(f.prototype);/*显式原型是无法显示,实例化变量,的原型,的*/
  console.log(f.__proto__);
  console.log(Fn.prototype===f.__proto__);/*因为f的原型是模板 模板是由构造函数来构成的不然他们就是一个空Oject类 Fn本身是一个构造函数他是
  构建了一个类是在背后直接构建的  f是使用了别人构建好的模板再创建了一个空间 所以他是隐式的 但他们的原型可不都是模板 与构造函数
    所以必定相等
    总之你可以是构造函数用prototype 来找他的原型  实例化对象用__proto__ 通过构造函数来找他的原型
  */
  /*理解了上面的描述,视频中这个面试题就很好理解*/
  /*题目1*/
  function A(){
  }
  A.prototype.n=1;
  var b=new A();/*他在这里a的原型中只有n=1,他把模板类 也就是A的原型复制了一份 为b创建了一个实例化对象*/
  A.prototype={
      n:2,   /*这里把a的原型中所用的属性替换成了这个对象 里面有n=2,m3 ,但是我们b已经是复制之前的模板创建好了 的 跟这nm没有关系*/
      m:3   /*m在b中根本没有就是undifined*/
  }
  var c=new A(); /*这时候c才把a的当前原型(模板)拿过来给自己复制一份开辟了一个新地址来实例化所以c中n=2,m=3*/
  console.log(b.n,b.m,c.n,c.m);/*结果必定是1,undifined,2,3*/
/*题目2*/
  function F(){}
  Object.prototype.a=function(){console.log("a()");}
  Function.prototype.b=function(){console.log("b()");}
    var nm=new F();
  nm.a();/*这个能够显示是因为Object是所有类的祖宗类他们都相当于继承了object类中的属性a,函数以及模板他都是对象类(object类)*/
  //nm.b();
  F.a();/*这个同理*/
  F.b();/*这个可以显示也许是因为Function.prototype是本地函数 本地函数只在类模板中可以使用 *只是我认为的***/
  console.log( Function.prototype)
</script>
</body>
</html>