原型的概念

最新推荐文章于 2022-11-16 20:11:25 发布

我带你们飞

最新推荐文章于 2022-11-16 20:11:25 发布

阅读量292

点赞数

分类专栏：教案文章标签：原型模式

本文链接：https://blog.csdn.net/weixin_47619284/article/details/126551129

版权

教案专栏收录该内容

11 篇文章 1 订阅

订阅专栏

原型

更好的解决方案： prototype

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

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

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

任何函数都具有一个 prototype 属性，该属性是一个对象。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原型</title>
</head>

<body>

</body>
<script>
  // 一、原型的作用：1、节省内存空间  2、实现数据共享（继承）
  // 二、什么是原型？
  // 结论1的推理
  function fn1 () {

  }
  console.log(fn1);
  console.log(fn1.prototype);
  var fn2 = function () { }
  console.log(fn2.prototype);
  // 结论2的推理
  function Person (name) {
    this.name = name;
    // this.age = age;
  }
  console.log(Person.prototype);
  // 四、如何节省内存空间：将公共的属性和方法挂载构造函数的原型对象上
  // 结论3的推理
  Person.prototype.age = 18;
  Person.prototype.eatIceCream = function () {
    console.log(this);
    console.log(this.name + "喜欢吃冰淇淋");
  }
  Person.prototype.eatIceCream()
  var p1 = new Person("小花");
  var p2 = new Person("小丽");
  var p3 = new Person("小红");

  console.log(p1);
  console.log(p2);
  console.log(p1.age);
  console.log(p2.age);
  p1.eatIceCream();
  p2.eatIceCream();
  console.log(p3.age);
  p3.eatIceCream();
  // 结论4：上午得出
  console.log(Person == p1.constructor);//true
  // 结论5的推理
  console.log(Person.prototype.constructor);
  console.log(Person.prototype.constructor == Person);//true
  // 结论6的推理
  console.log(p1);
  console.log(p2);
  console.log(p1.__proto__);
  console.log(p2.__proto__);
  var obj = {}
  console.log(obj);
  console.log(obj.__proto__);
  console.log(window);
  console.log(window.__proto__);
  console.log(p1.__proto__ == Person.prototype);//true

  /*
      五、函数中this的指向
          6、在原型函数中，
            （1）、如果通过原型调用函数，this指向原型对象
            （2）、如果通过实例化对象调用函数，this指向实例化对象
  
   */
</script>

</html>

原型、构造函数、实例对象三者关系
结论：
1、任何一个函数都有一个prototype属性，它本身是一个对象，我们称之为原型
2、构造函数也是函数，也有prototype属性
3、构造函数中原型对象上的属性和方法都可以被构造函数的实例化对象所继承
4、任何一个对象都有constructor属性，实例对象的constructor属性指向构造函数
5、原型也是对象，也有constructor属性，原型对象的constructor属性指向构造函数
6、任何一个对象都有__proto__属性，它是指针，实例化对象的__proto__属性指向构造函数的原型