构造函数、实例对象、原型对象、原型链、原型继承

鱼丸子蛋汤

已于 2024-04-17 21:25:37 修改

阅读量530

点赞数 10

分类专栏：基础文章标签：原型模式前端 css javascript html

于 2024-03-19 10:47:37 首次发布

本文链接：https://blog.csdn.net/weixin_52841164/article/details/136833708

版权

基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

构造函数

含义

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

注意

1.创建某一类对象时首字母大写。

2.和 new 一起使用。

new 在执行时会做四件事情：

在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法。
返回这个新对象（所以构造函数里面不需要 return）。

代码示例

<body>
    <script>
        // 1、定义构造函数
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing = function() {
                console.log("我会唱歌");
            }
        }
        // 2、通过构造函数创建对象
        var ldh = new Star('刘德华', 20);
        var zxy = new Star('张学友', 21);
        ldh.sing();
        zxy.sing();
    </script>
</body>

原型

含义

每个函数都有 prototype 属性，称为原型，因为这个属性的值是个对象，所以也称为原型对象。

作用

1.存放一些属性和方法，共享给实例对象使用。

2.在 JavaScript 中实现继承。

举例

const arr = new Array(1,2,3);
arr.reverse();// 翻转
arr.sort();// 排序

为什么 arr 创建好之后可以调用 reverse()，和 sort() 方法？明明根本没有写这些方法。

因为：

1.只要是函数就有 prototype 原型，构造函数 arr 也有 Array.prototype 原型。

2.Array.prototype 原型里本身自己就挂载了许多方法（如 reverse()，sort()）。

3.通过构造函数 Array 生成一个实例 arr，实例 arr 可以使用 Array.prototype 原型挂载的这些方法。

为什么实例 arr 可以使用原型挂载的方法？

因为：

每个实例对象身上都有 _proto_ 属性，它指向原型对象。

console.log(arr._proto_ === Array.prototype);//true
//实例的_proto_和原型等价

原型链

含义

对象都有 _proto_ 属性，该属性指向它的原型对象，原型对象也是对象，也有 _proto_ 属性，于是指向原型对象的原型对象，这样一层层形成的链式结构成为原型链，最顶层找不到则返回 null。

图解 + 代码示例

<body>
    <script>
        // 1、定义构造函数
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
        }
        // 2、给原型对象添加sing方法
        Star.prototype.sing = function() {
            console.log("我会唱歌");
        }

        var ldh = new Star('刘德华', 20);
        ldh.sing();

        // 细节
        // >> 1、只要是对象，就有__proto__属性，指向原型对象
        // >>    我们Star原型对象里面的__proto__原型指向的是 Object.prototype
        console.log(Star.prototype.__proto__ == Object.prototype); // true

        // >> 2、我们Object.prototype原型对象里面的__proto__原型  指向为 null
        console.log(Object.prototype.__proto__); // null
    </script>
</body>

原型继承

实现对象之间继承关系。

通过将一个对象的原型设置为另一个对象来实现继承。这样，子对象就可以继承父对象的属性和方法。在原型继承中，子对象可以通过原型链访问父对象的属性和方法。

// Animal 父对象，Dog 子对象
// 可将 Dog 的原型设置为 Animal 来实现 Dog 对象继承 Animal 对象的属性和方法

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用父对象的构造函数以继承属性
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // 设置Dog的原型为Animal的实例，实现继承
Dog.prototype.constructor = Dog; // 修正原型链

var myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayName(); // 输出：My name is Buddy

构造函数，实例对象，原型对象三者的关系

鱼丸子蛋汤

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
构造函数、实例对象、原型对象、原型链、原型继承

对象都有_proto_属性，该属性指向它的原型对象，原型对象也是对象，也有_proto_属性，于是指向原型对象的原型对象，这样一层层形成的链式结构成为原型链，最顶层找不到则返回null。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，总与new一起使用。3.通过构造函数Array生成一个实例arr，实例arr可以使用Array.prototype原型挂载的这些方法。每个函数都有prototype属性，称为原型，因为这个属性的值是个对象，所以也称为原型对象。2.和new一起使用。
复制链接

扫一扫