JavaScript中对象详解（原型和原型链）

最新推荐文章于 2021-12-28 19:42:21 发布

XUPT-前端在逃工程师

最新推荐文章于 2021-12-28 19:42:21 发布

阅读量154

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Dimuzero/article/details/112956902

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文深入探讨了JavaScript中对象的创建方式，包括构造函数和实例化。详细阐述了prototype属性、__proto__属性以及constructor构造函数在原型链中的作用。通过示例展示了如何通过原型链实现属性继承，并揭示了所有原型最终都继承自Object，直至达到null。同时，文中还提到了对象之间的关联和构造函数的复用性。

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

参考学习自

1.构造函数创建对象


//构造函数创建对象
function Person() {
      this.name
      this.age
    }
//实例化对象
var people = new Person()
console.log(people);

在这里插入图片描述

2.对象中的属性

2.1 prototype（原型对象）

每个函数都有一个 prototype 属性函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person1 和 person2 的原型链指向

每一个 JavaScript 对象 (null 除外 ) 在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型 ” 继承 ” 属性

function Person() {
      this.name
      this.age
    }
var p1 = new Person()
console.log(Person.prototype);  
console.log(p1.prototype)		//undefined   只有函数才有prototype

在这里插入图片描述

2.2 proto （隐式原型/原型链）

每一个 JavaScript 对象 ( 除了 null) 都具有的一个属性，叫 __ proto __ ，这个属性会指向该对象的原型。

function Person() {
      this.name = name
      this.age = age
    }
    var p1 = new Person()
    var p2 = new Person()
    console.log(Person.prototype);
    console.log(p1.__proto__);
    console.log(p2.__proto__);

这里不难看出对象函数的prototype 和实例化出来的p1，p2对象他们指向的都是该对象的原型，从原型 ” 继承 ” 属性
在这里插入图片描述
那么原型对象上的原型链所指向的是什么呢？这里我们可以大胆猜测就是Object，因为任何原型对象最后继承的都是Object（对象数据类型）的属性

function Person() {
      this.name
      this.age
    }
    var p1 = new Person()
    var p2 = new Person()
    console.log(Person.prototype.__proto__);
    console.log(p1.__proto__.__proto__);
    console.log(p2.__proto__.__proto__);

在这里插入图片描述
而Object再之上就是指向空null

console.log(Person.prototype.__proto__.__proto__);

在这里插入图片描述

2.3 constructor（构造函数）

可以有无穷个实例对象指向原型对象，所以一个构造函数就可以生成多个实例
每个原型都有一个 constructor 属性指向关联的构造函数

function Person() {
      this.name
      this.age
    }
console.log(Person.prototype.constructor);
console.log(Person === Person.prototype.constructor)