拾遗记2:js原型链

小乔
• 阅读 832

原型(对象属性)

在JavaScript中,每一个函数都有一个对象属性(prototype),其指向另一个对象。

为何要设计prototype对象属性?
JavaScript语言在设计时,其设计师不想将这门语言设计的过为复杂,不想提高语言学习门槛,因此没有引入类。但是其借鉴了new关键字,通过new关键字加构造函数的方式创建实例对象。如果只有构造函数,那么怎么实现多个实例对象之间共享属性和方法呢?为了实现共享,设计师为构造函数添加了prototype属性,该属性指向一个对象,所有实例之间共享的属性和方法就放在这个对象上,不需要共享的属性和方法就放在构造函数里面,实例对象在创建完成之后,将自动引入prototype对象的属性和方法。

function Person(name) {
    this.name = name
}
// 原型上添加一个共享方法
Person.prototype.say = function () {
    console.log(`my name is ${this.name}`)
}
let zs = new Person('zhangsan')
// 实例对象可以访问原型上的共享方法
zs.say()

原型链

在原型中我们得知,所有的构造函数都有一个prototype属性,由此构造函数创建的实例对象都能自动获取prototype上面共享的属性和方法。那么实例对象是如何获取的?实例对象都有实例对象和原型之间的一种链接,也就叫原型链。

function Person(name) {
    this.name = name
}
Person.prototype.say = function () {
    console.log(`my name is ${this.name}`)
}
let zs = new Person('zhangsan')
// 实例对象proto属性指向构造函数的原型
console.log(zs.__proto__ === Person.prototype) // true

由于原型也是一个对象,可以看作是Object的一个实例,因此,其__proto__属性指向Object的原型。

console.log(Person.prototype.__proto__ === Object.prototype) // true

由于所有function都是由Fucntion生成的,也就是所有的函数可以看作是Function的实例对象,因此函数的__proto__指向Function的原型。

console.log(Person.__proto__ === Function.prototype) // true

constructor

在每个函数的原型prototype中都有constructor属性,它保存了对函数的引用。

console.log(Person.prototype.constructor === Person)

// 由于constructor保存了一个引用,因此可以用其实例化一个对象
let lisi = new Person.prototype.constructor('lisi')
lisi.say()
点赞
收藏
评论区
推荐文章
菜园前端 菜园前端
2年前
前端学习重点-原型与原型链
原文链接:什么是原型?每一个函数都包含一个prototype属性,这是一个指针指向"原型对象"(prototypeobject),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性
Souleigh ✨ Souleigh ✨
4年前
Js中 constructor, prototype, __proto__ 详解
本文为了解决以下问题:__proto__(实际原型)和prototype(原型属性)不一样!!!constructor属性(原型对象中包含这个属性,实例当中也同样会继承这个属性)prototype属性(constructor.prototype原型对象)__proto__属性(实例指向原型对象的指针)<br/首先弄清楚几个概念:<br/
Stella981 Stella981
3年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
可莉 可莉
3年前
23.JavaScript原型和原型链
1.原型:prototype,所有的函数都有一个属性prototype,称之为函数原型默认情况下,prototype是一个普通的Object对象默认情况下,prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身functionTest(){}Test.prototype:函数Test的原型Test.pr
Stella981 Stella981
3年前
JavaScript Prototype
定义和用法prototype属性使您有能力向对象添加属性和方法。实例在本例中,将展示如何使用prototype属性来向对象添加属性:<scripttype"text/javascript"functionemployee(name,job,born){this.n
Wesley13 Wesley13
3年前
JS函数高级
原型与原型链所有函数都有一个特别的属性:prototype:显式原型属性所有实例对象都有一个特别的属性:__proto__:隐式原型属性显式原型与隐式原型的关系函数的prototype:定义函数时被自动赋值,值默认为{},即用为原型对象
Wesley13 Wesley13
3年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Stella981 Stella981
3年前
JavaScript 基于原型链的继承
JavaScript对象是动态的属性“包”(指其自己的属性)。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。遵循ECMAScript标准,someObject.Prototype
Stella981 Stella981
3年前
JavaScript面向对象编程的15种设计模式
在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在JavaScript中并没有类这种概念,面向对象编程不是基于类,而是基于原型去面向对象编程,JS中的函数属于一等对象,而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同。ps:本文之讲述面向对象编程的设计模式策略,JavaScript原型的基础请参考阮一峰面向
Wesley13 Wesley13
3年前
ES6面向对象
ES6面向对象js中的面向对象functionUser(name,age){this.namename;//定义属性this.ageage;}//通过原型添加方法User.prototype.showNamefuncti
Stella981 Stella981
3年前
Javascript 构造函数和类
1.构造函数构造函数的名称一般都是首字母大写挂载在this上面的属性为实例属性,实例属性再每个实例间都是独立的原型链属性通过prototype添加,他是所有实例共享的类方法/静态属性只能由构造函数本身访问当实例属性和原型链上的属性重名时,优先访问实例属性,没有实例属性再访问原型属性大多数浏览器的ES5实现之中,每一个对象都有\_\_pr