专栏首页西安-晁州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中的继承~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vscode下eslint代码规范

    用户1141560
  • nodejs操作excel并配合edatagrid使用

    nodejs读取文件夹下子文件(夹)名称: /** * 查询tmp文件夹下子文件夹名称 */ router.post("/tmpList", functio...

    用户1141560
  • CentOS6.9下安装rabbitmq消息队列

    安装如下步骤: 首先安装erlang yum install erlang 安装rabbitmq rpm包 wget http://www.rab...

    用户1141560
  • [JavaScript进阶]从JavaScript原型到面向对象

    首先给出结论,JavaScript 的本身是支持面向对象的,它本身具备着强大灵活的 OOP 语言能力。但是对于使用过基于类的语言 (如 Java 或 C++) ...

    用户1462769
  • 【JS】479- 又见原型和原型链

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

    pingan8787
  • JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承

    关于原型在JavaScript 进阶教程(1)--面向对象编程这篇文章已经讲过了,今天简单来复习一下。

    AlbertYang
  • ASP.NET Core 3.0 使用gRPC

    gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架。 gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建...

    梁规晓
  • 「技术选型」深度学习软件选择

    深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向,它被引入机器学习使其更接近于最初的目...

    首席架构师智库
  • spring boot 使用及最佳实践

    用户可以通过继承spring-boot-starter-parent来获取默认的依赖。

    WindWant
  • 尚能饭否|技术越来越新,我对老朋友jQuery还是一如既往热爱

    最近在搭建完善自己的博客,需要用到一些页面样式之类的,就特意问了一下女朋友一个问题,关于Web前端开发,jQuery现在过时了嘛?她毅然决然告诉我,那是我们前端...

    浅羽的IT小屋

扫码关注云+社区

领取腾讯云代金券