脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript原型与原型链

JavaScript原型和原型链与构造函数和实例之间的关系详解

 更新时间：2022年07月21日 10:25:01   作者：大莲芒  
这篇文章主要介绍了JavaScript原型和原型链与构造函数和实例之间的关系，每个对象都连接到一个原型对象，并且它可以从中继承属性。所有通过对象字面量创建的对象都连接到object.prototype，它是JavaScript中的标配对象

原型

如图所示：

1.instanceof检测构造函数与实例的关系：

function Person () {.........}

person = new Person ()

res = person instanceof Person

res  // true

2.实例继承原型上的定义的属性：

function Person () {........}

Person.prototype.type = 'object n'

person = new Person ()

res = person.type

res  // object n

3.实例访问 ===> 原型

实例通过__proto__访问到原型 person.proto=== Person.prototype

4.原型访问 ===> 构造函数

原型通过constructor属性访问构造函数 Person.prototype.constructor === Person

5.实例访问===>构造函数

person.proto.constructor === Person

原型链

在读取一个实例的属性的过程中，如果属性在该实例中没有找到，那么就会循着 proto 指定的原型上去寻找，如果还找不到，则寻找原型的原型：

1.实例上寻找

function Person() {}

    Person.prototype.type = "object name Person";
    person = new Person();
    person.type = "我是实例的自有属性";
    res = Reflect.ownKeys(person); //尝试获取到自有属性
    console.log(res);
    res = person.type;
    console.log(res); //我是实例的自有属性（通过原型链向上搜索优先搜索实例里的）

2.原型上寻找

function Person() {}

    Person.prototype.type = "object name Person";
    person = new Person();
    res = Reflect.ownKeys(person); //尝试获取到自有属性
    console.log(res);
    res = person.type;
    console.log(res); //object name Person

3.原型的原型上寻找

function Person() {}

    Person.prototype.type = "object name Person";
    function Child() {}
    Child.prototype = new Person();
    p = new Child();
    res = [p instanceof Object, p instanceof Person, p instanceof Child];
    console.log(res); //[true, true, true] p同时属于Object，Person， Child
    res = p.type; //层层搜索
    console.log(res); //object name Person (原型链上搜索)
    console.dir(Person);
    console.dir(Child);

4.原型链上搜索

  • 原型同样也可以通过 proto 访问到原型的原型，比方说这里有个构造函数 Child 然后“继承”前者的有一个构造函数 Person，然后 new Child 得到实例 p；
  • 当访问 p 中的一个非自有属性的时候，就会通过 proto 作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到 Object 构造函数为止；
  • 原型链搜索搜到 null 为止，搜不到那访问的这个属性就停止：

function Person() {}

  Person.prototype.type = "object name Person";
  function Child() {}
  Child.prototype = new Person();
  p = new Child();
  res = p.__proto__;
  console.log(res);         //Person {}
  res = p.__proto__.__proto__;
  console.log(res);         //Person {type:'object name Person'}
  res = p.__proto__.__proto__.__proto__;
  console.log(res);         //{.....}
  res = p.__proto__.__proto__.__proto__.__proto__;
  console.log(res);         //null

到此这篇关于JavaScript原型和原型链与构造函数和实例之间的关系详解的文章就介绍到这了,更多相关JavaScript原型与原型链内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Lombok实现方式JSR-269

    Lombok实现方式JSR-269

    Lombok的出现帮助开发人员在开发工程中消除了大部分冗余代码:繁琐的get、set方法甚至建造者模式，今天通过本文给大家分享Lombok实现方式JSR-269的相关知识，感兴趣的朋友一起看看吧
    2021-06-06
  • js仿微信抢红包功能

    js仿微信抢红包功能

    这篇文章主要为大家详细介绍了js仿微信抢红包功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 解决layui table表单提示数据接口请求异常的问题

    解决layui table表单提示数据接口请求异常的问题

    今天小编就为大家分享一篇解决layui table表单提示数据接口请求异常的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例

    Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例

    这篇文章主要介绍了Extjs4中tree的拖拽功能简单实例，有需要的朋友可以参考一下
    2013-12-12
  • 利用JS实现窗口最大化和最小化效果

    利用JS实现窗口最大化和最小化效果

    在现代 Web 开发中,JavaScript 提供了多种方法来与浏览器窗口进行交互,包括最大化和最小化浏览器窗口,虽然浏览器通常会限制对窗口尺寸的直接控制,但我们依然可以实现一些常见的行为,本文将探讨如何使用 JavaScript 实现窗口的最大化和最小化效果
    2024-12-12
  • 深入理解JavaScript事件机制

    深入理解JavaScript事件机制

    事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message).接下来通过本文给大家介绍JS事件机制的理解 ，需要的朋友一起学习吧
    2023-04-04
  • js点击页面其它地方将某个显示的DIV隐藏

    js点击页面其它地方将某个显示的DIV隐藏

    今天一朋友问我 点击一按钮弹出一个DIV，然后要求点击页面其它地方隐藏这个DIV
    2012-07-07
  • 微信小程序中视频的显示与隐藏功能

    微信小程序中视频的显示与隐藏功能

    这篇文章主要介绍了微信小程序中视频的显示与隐藏,思路大概是定义一个标记变量，控制视频的播放与暂停，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-10-10
  • 微信小程序中显示倒计时代码实例

    微信小程序中显示倒计时代码实例

    这篇文章主要介绍了微信小程序中显示倒计时，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 详解JS中定时器setInterval和setTImeout的this指向问题

    详解JS中定时器setInterval和setTImeout的this指向问题

    在js中setTimeout和setInterval都是用来定时的一个功能，下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细，有需要的朋友可以参考借鉴，一起来看看吧。
    2017-01-01

最新评论