构造函数、实例对象、原型对象之间的关系

最新推荐文章于 2024-11-02 12:42:04 发布

小彭的前端成长日记丶

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量97

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/qq_60248719/article/details/128627786

版权

本文通过一个简单的Person构造函数示例，介绍了JavaScript中的构造函数、实例对象以及原型和原型链的概念。作者强调了在实际工作中虽然底层概念可能不常涉及，但理解和掌握它们对于深入学习JS至关重要。

摘要由CSDN通过智能技术生成

这张图是初学js时自己画的，但是在之后的工作中却是极少涉及到这种比较底层的东西，经常会忘记，所以这次写个博客记录一下。

// 首先创建一个构造函数，也是个函数，但是一般首字母大写
function Person(name,age){
  this.name = name
  this.age = age
  this.tell = () => {
    console.log(`我叫${this.name}，今年${this.age}岁`)
  }
}

// new 一个实例出来
const xm = new Person('小明','18')

console.log(xm.__proto__)  // 在浏览器控制台打印可以看到是一个对象，里面只有一个constructor属性，这就是实例对象的原型对象

console.log(xm.__proto__.constructor)  // constructor 构造器

console.log(xm.__proto__.__proto__)  // 原型链 到Object
console.log(xm.__proto__.__proto__)  // 原型链 到null

console.log(xm.constructor)  // 因为原型链的存在，实例对象也可以直接获取它的构造器