前端学习重点-原型与原型链

菜园前端
• 阅读 245

原文链接:https://note.noxussj.top/?source=helloworld


什么是原型?

每一个函数都包含一个 prototype 属性,这是一个指针指向 "原型对象" (prototype object),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性。

/**
 * 定义一个构造函数(类)
 */
function Person(name) {}

/**
 * 实例属性
 */
Person.prototype.age = 18

/**
 * 实例方法
 */
Person.prototype.eat = function () {
    console.log('我会吃饭')
}

/**
 * 通过 new 关键字实例化出一个 xiaoming 实例
 * xiaoming 继承了 Person 的 age 实例属性和 eat 实例方法
 */
const xiaoming = new Person('a')

/**
 * 通过 new 关键字实例化出一个 libai 实例
 * libai 继承了 Person 的 age 实例属性和 eat 实例方法
 */
const libai = new Person('b')

关系图

前端学习重点-原型与原型链

调试工具图如下

前端学习重点-原型与原型链

原型链

假设一个原型对象等于另一个类型(构造函数)的实例,另一个类型的原型对象又等于另一个类型的实例。就像这样一层层递进,就构成了实例与原型的链条,这个就是所谓的原型链。

function Animal(name) {}
Animal.prototype.name1 = 'xiaoming'

function Cat(name) {}
Cat.prototype = new Animal()
Cat.prototype.name2 = 'libai'

const cat1 = new Cat()
cat1.name = 'xiaohong'

console.log(cat1)

关系图

前端学习重点-原型与原型链

调试工具图如下

前端学习重点-原型与原型链

原型链(扩展)

  • 原型链的本质是链表,原型链上的节点是各种原型对象,例如 Function.prototype 、Object.prototype、Array.prototype ...
  • 原型链通过 proto 属性连接各种原型对象

原型链指向

  • object -> Object.prototype -> null
  • function -> Function.prototype -> Object.prototype -> null
  • array -> Array.prototype -> Object.prototype -> null
  • ...
点赞
收藏
评论区
推荐文章
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
晴空闲云 晴空闲云
2年前
JavaScript中isPrototypeOf函数详解
有时看一些框架源码的时候,会碰到isPrototypeOf()这个函数,那么这个函数有什么作用呢?isPrototypeOf()isPrototypeOf()是Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回true,否则就返回false。这个函数理解的关键是在原型链上,这个据说是JavaScript
Souleigh ✨ Souleigh ✨
3年前
Js中 constructor, prototype, __proto__ 详解
本文为了解决以下问题:__proto__(实际原型)和prototype(原型属性)不一样!!!constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)prototype属性(constructor.prototype原型对象)__proto__属性(实例指向原型对象的指针)<br/首先弄清楚几个概念:<br/
Stella981 Stella981
2年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
可莉 可莉
2年前
23.JavaScript原型和原型链
1.原型:prototype,所有的函数都有一个属性prototype,称之为函数原型默认情况下,prototype是一个普通的Object对象默认情况下,prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身functionTest(){}Test.prototype:函数Test的原型Test.pr
Wesley13 Wesley13
2年前
JS函数高级
原型与原型链所有函数都有一个特别的属性:prototype:显式原型属性所有实例对象都有一个特别的属性:__proto__:隐式原型属性显式原型与隐式原型的关系函数的prototype:定义函数时被自动赋值,值默认为{},即用为原型对象
Wesley13 Wesley13
2年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Stella981 Stella981
2年前
JavaScript原型和原型链——构造函数
一、instanceof:判断引用类型(数组、对象、函数)的变量是由哪一个 构造函数派生出来的。(oinstanceofObject)二、原型规则和示例  1、所有的引用类型(数组、对象、函数),都具有对象特性,可以自由扩展属性(除了"null“以外)。  2、所有的引用类型(数组、对象、函数),都具有\_\_p
Stella981 Stella981
2年前
JavaScript 基于原型链的继承
JavaScript对象是动态的属性“包”(指其自己的属性)。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。遵循ECMAScript标准,someObject.Prototype
Stella981 Stella981
2年前
Javascript 构造函数和类
1.构造函数构造函数的名称一般都是首字母大写挂载在this上面的属性为实例属性,实例属性再每个实例间都是独立的原型链属性通过prototype添加,他是所有实例共享的类方法/静态属性只能由构造函数本身访问当实例属性和原型链上的属性重名时,优先访问实例属性,没有实例属性再访问原型属性大多数浏览器的ES5实现之中,每一个对象都有\_\_pr