JavaScript中 prototype 原型继承

最新推荐文章于 2024-03-29 08:49:28 发布

原创最新推荐文章于 2024-03-29 08:49:28 发布 · 569 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #面向对象编程 #javascript

本文详细介绍了JavaScript中原型的概念，包括原型对象、constructor属性以及原型继承的工作原理。通过实例展示了如何通过原型链实现子构造函数继承父构造函数的方法，以及Son实例访问Person原型方法的过程。

在这里插入图片描述

原型继承

说到原型继承，那就是要从原型入手，就让我们来简单回顾一下什么是原型吧

原型概述：每个函数身上都有一个原型，我们称之为原型对象
函数的 prototype 属性指向原型对象，原型对象上的 constructor 指回构造函数

那么顾名思义，原型继承那就要从原型下手啦 ! !

function Person() {
  this.uname = '张三', 
  this.age = 22
}
// 原型对象
Person.prototype.sex = '男'
Person.prototype.head = 1
Person.prototype.sayName = function () {
  console.log('hello javascript')
}

function Son() {
    this.eye = 2
}

// 把构造函数 Person 的实例化对象赋值给构造函数 Son 的原型对象，那么在构造函数 Person 原型上添加的属性或者方法， Son的实例对象也是可以访问到的，这正是原型链起到的作用
Son.prototype = new Person()

// 实例化对象
let per = new Son()
console.log(per)

// 可以访问原型对象上添加的属性
per.sayName()

sayName 方法定义在了构造函数 Person 的原型上，而通过构造函数 Son 的实例对象却能够访问得到，那么 sayName 方法相当于定义在了 Son 原型对象的原型对象上，之所以 Son 的实例化对象能够访问得到，那正是原型链的功劳

通过 per.sayName() 可以在控制台看到打印结果 'hello javascript'

上面代码运行，打印 Son 的实例化对象 per ，可以看到如下图，正是 (Son.prototype = new Person()) 让 Son 的原型对象变成了构造函数 Person 的实例对象 new Person(), 而且 Person 的原型对象上也有我们自己定义的属性方法，并且它的 constructor 指回 构造函数 Person

在这里插入图片描述