js 原型链与构造函数与实例之间关系

 

  我们知道每个对象都有__proto__,每个函数都有prototype属性,它们之间是怎样实现原型继承的呢?

 1.对象继承 __proto__属性

   

1
2
3
4
5
6
7
8
9
function Test() {
      this.name = "21";
      this.age = 12;
  }
  Test.prototype.toString = (() => '测试');
  let obj5 = new Test()
  obj5.toString = (() => 'test')
 
  console.dir(obj5.toString())

 

 

 

  每个对象都有一个__proto__属性,__proto__指向一个原型对象(可以理解为父对象),当我们调用一个方法时,如果这个对象没有这个属性,

  就会调用__proto__查找,如果还没查找到继续往上查找,最顶层为null,没找到会报错,这就是原型链。

  

 2.构造函数 prototype属性

  

  prototype属性是函数独有的,它指向函数的原型对象,每个构造函数都可以通过new  创建一个实例对象,所以 Test.prototype  === obj5.__proto__;

  需要注意的是 函数也是对象,也拥有__proto__属性。

3.constructor属性

 

 

  constructor指向该对象的构造函数,当创建一个Test构造函数时,prototype属性会自动生成一个constructor属性指向这个函数,当我们new一个obj5实例对象时,obj5.constructor 会通过原型链查找construtor属性,所以 obj5.constructor === Test;

  Test.prototype.constructor === Test;

   所有函数最终构造函数指向都是Function,Object 的构造函数指向也是Function;Function 的构造函数指向是自身。

4.一些对象类型判断方法

 4.1 typeof

      typeof 可以检测数据的类型,如果数据是Aarry类型时也会返回Object。

 4.2 Object.prototype.toString

     使用 Object.prototype.toString.call(obj) 来识别对象类型,他会返回一个"[object Type]"的东西来告诉你所指对象的类型。

 4.3  instanceof

   用法:   obj5    instanceof   Test;

    主要是通过原型链判断 当前对象是不是某一个构造函数的实例对象。

 tips: 我们在浏览器打印查看对象属性时 [[prototype]]  和__proto__ 意义一样的。   

posted @   风紧了  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
/* 点击爆炸效果*/
/* 鼠标点击求赞文字特效 */ /*鼠标跟随效果*/
点击右上角即可分享
微信分享提示