构造函数、实例、原型三者之间的关系

最新推荐文章于 2024-10-02 05:39:15 发布

悟空.........

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量57

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/ndjjddj/article/details/129986331

版权

本文介绍了JavaScript中构造函数、实例和原型之间的关系，包括prototype属性、constructor属性以及__proto__指针。通过示例展示了如何创建构造函数、实例化对象，并阐述了原型上的属性和方法如何被实例继承。同时，讨论了在不同情况下this的指向问题。

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

前言

理解三者之前的关系

`提示：以下是本篇文章正文内容，下面案例可供参考
![在这里插入图片描述](https://img-blog.csdnimg.cn/e353185e0d73462ba5cb90e7be4c91dc.jpeg

一、构造函数、实例、原型三者之间的关系

原型函数中的this指向

 /*
      构造函数、实例、原型三者之间的关系
      
      1、任何函数都有prototype属性，他本身就是一个对象     
      2、构造函数也是函数，也有prototype属性，我们称之为原型
      3、构造函数原型上的属性和方法可以被实例化对象所继承（重点）
      4、任何对象都有constructor属性，实例化对象的constructor属性指向构造函数
      5、原型也是对象也有constructor属性，原型对象的constructor属性指向构造函数      
      6、任何对象都有__proto__属性，它本身是个指针，实例化对象的__proto__属性指向的是构造函数的原型
    */
  /* 
      原型函数中的this指向
        1、实例化对象调用，指向的是实例化对象
        2、原型对象调用，指向的是原型对象
    */

对构造函数、实例、原型三者之间的关系的进行验证的打印及其打印结果

1、任何函数都有prototype属性，他本身就是一个对象
var fun = function () { }
console.log(fun.prototype);
在这里插入图片描述

2、构造函数也是函数，也有prototype属性，我们称之为原型
function Ufo(name, size, fly) {
this.name = name
this.size = size
this.fly = fly
}
var ufo = new Ufo(‘ufo’, 10, function () { console.log(‘可以旋转’); })
console.log(Ufo.prototype);

在这里插入图片描述
3、构造函数原型上的属性和方法可以被实例化对象所继承（重点）
Ufo.prototype.catchPeople = function () {
console.log(this);
console.log(‘抓娃娃’);
}
4、任何对象都有constructor属性，实例化对象的constructor属性指向构造函数
console.log(Ufo.constructor);
在这里插入图片描述
5、原型也是对象也有constructor属性，原型对象的constructor属性指向构造函数

6、任何对象都有__proto__属性，它本身是个指针，实例化对象的__proto__属性指向的是构造函数的原型