专栏首页西安-晁州js原型及原型链解析

js原型及原型链解析

js原型、原型链

这几天闲了看了下js的原型,以下内容为个人理解,如有错误,尽请指正。

首先,明确一点:js中的对象分为普通对象和函数对象,一般我们自定义的可以被new的函数称作函数对象,另外js内置了譬如:Array、Date、Object、Function、Number、String、Boolean、RegExp、Error等这些函数对象:

1、只有函数对象才有prototype属性,该属性指向的俗称“原型”或者“原型对象”,举个栗子:

function Person() {}
console.log(Person.prototype)       // {constructor: Person, __proto__: Object}

2、每个原型或者原型对象还有一个constructor属性,即上面的Person.prototype.constructor,该属性指向该函数的构造,这里指向Person自身,即:

Person.prototype.constructor === Person     // true

3、所有对象,不论普通对象还是函数对象都有一个__proto__属性,该属性指向其构造的原型,使用__proto__将所有对象联系起来,才形成了所谓的原型链,举个栗子:

function Person() {}
const p1 = new Person()

console.log(p1.__proto__ === Person.prototype)    // true, p1是由Person构造的
console.log(Person.prototype.__proto__ === Object.prototype) // true, Person的原型是由Object构造的,因为Person.prototype是一个普通对象,普通对象的构造都是Object
console.log(Person.__proto__ === Function.prototype)    // true, Person是由Function构造的
console.log(Function.__proto__ === Function.prototype)    // true, Function是由自身构造的
console.log(Function.prototype.__proto__ === Object.prototype)    // true, Function的原型是由Object构造的
console.log(Object.__proto__ === Function.prototype)    // true, Object是由Function构造的,类似Person.__proto__
console.log(Date.__proto__ === Function.prototype)    // true, Date是由Function构造的,类似Person.__proto__
console.log(String.__proto__ === Function.prototype)    // true, String是由Function构造的,类似Person.__proto__
console.log(Boolean.__proto__ === Function.prototype)    // true,Boolean是由Function构造的,类似Person.__proto__
console.log(Object.prototype.__proto__ === null)    // true, Object的原型是由null"产生"的,null处于原型链顶端

这个从根本上印证了道德经那句:道(null)生一,一生二,二生三,三生万物。无,名天地之始。

4、一般我们通过.操作符获取一个对象的属性或方法的时候,会首先在当前对象自身上查找该属性或方法,找不到的话会继续顺着__proto__也就是原型链向上查找,直到找到,否则返回undefined,举个栗子:

function Person() {
  this.name = 'Nicholas'
  this.age = 29
  this.job = 'Software Engineer'
  this.sayName = function() {
    console.log(this.name)
  }
}

const person1 = new Person()
const person2 = new Person()

person1.sayName()
person2.sayName()

[[Prototype]]即上面所说的__proto__,由上图可以直接得出如下结论:

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

当我们获取person1.age时,发现person1自身并无age属性,所以会自动向上查找person1.__proto__.age,发现有并为29,则直接返回29,即person1.age === 29

function Person() {
  this.name = 'Nicholas'
  this.age = 29
  this.job = 'Software Engineer'
  this.sayName = function() {
    console.log(this.name)
  }
}

const person1 = new Person()
console.log(person1.age === 29)   // true

同理,查找person1.constructor时会自动查找到Person自身,所以如下是恒等的:

function Person(name) {
    this.name = name
}
var p = new Person('jack')
console.log(p.__proto__ === p.constructor.prototype) // true

下一节的话讲下js中的继承~

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.cnblogs.com/vipzhou复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • js原型和原型链

    每个函数都有一个 prototype 属性 每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型对象pr...

    hss
  • JavaScript原型、原型链及原型链污染

    因为在CTF中时常也会考察原型链污染的问题,以前也一直让我捉襟见肘,一直没有系统的学习了解过JS原型的这些相关概念,因此写下本文,通过不断总结大佬的文章,写出自...

    字节脉搏实验室
  • JS原型与原型链

    JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object,前六种为基本数据类型,...

    WindrunnerMax
  • JS进阶:原型与原型链

    JavaScript中除了基础数据类型外都是对象(引用类型)。但是由于其没有类(ES6 引入了 class,但其只是语法糖)的概念,为了保证对象之间的联系,就有...

    4O4
  • javascript 原型及原型链详解

    我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个原型对象,而这个原型对象中拥有的属性和方法可以被所以实例共享。 fun...

    柴小智
  • JS中的原型和原型链

    2、所有的引用类型都有一个’_ proto _'属性(也叫隐式原型,它是一个普通的对象)。

    ZEHAN
  • JS中的原型和原型链

    JavaScript规定,每一个函数都有一个prototype对象属性,指向另一个对象。prototype对象属性的所有属性和方法都会被构造函数的实例继承。这意...

    Cloud-Cloudys
  • JS原型链笔记

    Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person

    挨踢小子部落阁
  • 理解JS 原型链

    一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把《JavaScript高级程序设计》中相关内容认真读了...

    九旬
  • JS原型链温故

    js的数据类型主要分为基本类型和引用类型。基本类型包括String、Number、Boolean、undefined、null。引用类型包括Object。

    前端_AWhile
  • 【JS】479- 又见原型和原型链

    在前端这块领域,原型与原型链是每一个前端er必须掌握的概念。我们多次在面试或者一些技术博客里面看见这个概念。由此可见,这个玩意对于前端来说有多重要。其实它本身理...

    pingan8787
  • JS完美收官——原型和原型链

    原型和原型链这部分知识会影响到写面试题,或者做一些公共的组件和插件,总之是通用型的一些东西

    法医
  • 原型、原型链和原型继承

    上一小节是从继承的层面,介绍原型继承,但是没有具体说什么是原型。只提到构造函数的 prototype, 那么 prototype 是什么?它的作用又是什么?

    玖柒的小窝
  • JS基础知识总结(三):原型、原型链

    上一篇JS基础知识总结(二)主要了介绍深拷贝、浅拷贝的基础知识,本文将介绍JS原型、原型链的有关内容。

    前端林子
  • 原型,原型链,call/apply

    FinGet
  • 【前端基础进阶】JS原型、原型链、对象详解

    在上面的例子中 o1 o2 o3 为普通对象, f1 f2 f3 为函数对象。 怎么区分,其实很简单,凡是通过 new Function() 创建的对象都是函数...

    super.x

扫码关注腾讯云开发者

领取腾讯云代金券