原型与原型链

Coly 发布于2019-08-22 11:11 / 1735人阅读

摘要：注是的一个方法，是中唯一一个处理属性但是不查找原型链的函数。如果此时在该显示属性中还没有找到，会继续在的原型的原型中查找，找到直接终止，没有找到一直向上找出，直到到达顶部会终止查找。

知识点：
对象是一个属性的集合，有显示和隐式属性，并且都拥有一个多带带的原型对象[prototype object]，一般用__proto__表示。
当查找一个对象的属性时，JavaScript 会先在显示属性中查找，找不到会向上遍历原型链，直到找到给定名称的属性为止。到查找到达原型链的顶部——也就是 Object.__proto__ ，但是仍然没有找到指定的属性，就会返回 undefined。
注：
hasOwnProperty是Object.prototype的一个方法，是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。
函数中prototype是一个显示的属性，创建实例对象（也就是new）的时候除了创建对象外，还做了另一件有用的事情——自动为创建的新对象设置了原型对象(prototype object)。

例1：

var parent = {
    label:"parent"
}
var child = {
    name:"child"
}
//设置原型
child.__proto__ = parent;

console.log(child.name);      //child
console.log(child.label);     //parent

以上代码中演示了对象属性查找。当访问child.name时，name存在child显示属性中，终止查找返回字符串child。当访问child.label时，先在child的显示属性中查找，没有找到然后在child的原型（child的原型__proto__为parent）中找，在child的原型中找到显示属性label，直接返回字符串parent。如果此时在该显示属性中还没有找到，会继续在child的原型（parent）的原型中查找，找到直接终止，没有找到一直向上找出，直到到达顶部Object.__proto__会终止查找。

例2：

function Parent(){
            
}
Parent.prototype.label = "parent";

var child = new Parent();

console.log(child.__proto__ === Parent.prototype);  //true
console.log(child.label);   //parent

以上代码中，prototype是Parent的显示属性。当实例child(new Parent())的时候，先创建一个新对象，然后吧Parent中的prototype属性赋值到新对象的__proto__属性。当访问child的label属性时，依据对象属性查找的规则，现在child的显示属性中查找，没有找到然后在child的原型（__proto__）中找（也就是Parent.prototype.label），这儿找到了然后直接终止返回字符串parent。

GPU云服务器云服务器原型原型链原型链原型链继承原型链图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91945.html

《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
【5】JavaScript 函数高级——原型与原型链深入理解（图解）

摘要：探索是如何判断的表达式如果函数的显式原型对象在对象的隐式原型链上，返回，否则返回是通过自己产生的实例案例案例重要注意的显示原型和隐式原型是一样的。面试题测试题测试题报错对照下图理解原型与原型链深入理解（图解）原型（prototype）函数的 prototype 属性（图）每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）原型对象中有...

马龙驹 2019-08-23 17:17 评论0 收藏0
JavaScript中的原型与原型链

摘要：前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？国际惯例，让我们先抛出问题：什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧如果文章中有出现纰...

laoLiueizo 2019-08-23 16:58 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0
原型链一：原型与原型链

摘要：说白了，原型就是构造函数用来构造新实例的模板对象。什么是原型链先回答什么是原型。例如这个原型的原型就是这个构造函数的，既这个原型对象。这些原型对象通过像链子一样连起来，就叫做原型链。原型链初步学习这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业的关于原型链的解释请看JavaScript深入之从原型到原型链和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 评论0 收藏0
JavaScript系列--浅析原型链与继承

摘要：综上所述有原型链继承，构造函数继承经典继承，组合继承，寄生继承，寄生组合继承五种方法，寄生组合式继承，集寄生式继承和组合继承的优点于一身是实现基于类型继承的最有效方法。一、前言继承是面向对象（OOP）语言中的一个最为人津津乐道的概念。许多面对对象（OOP）语言都支持两种继承方式:：接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名...

draveness 2019-08-23 18:06 评论0 收藏0