js原型和原型链的概念

原型和原型链是JavaScript中重要的概念,理解它们对于理解如何构建对象以及继承特性非常关键。

  1. 原型:

在JavaScript中,每个函数都有一个特殊的属性叫做prototype。这个属性指向一个对象,这个对象作为原型,该函数所创建的所有对象都将继承这个原型对象的属性和方法。

例如:

javascript 复制代码
function Person() {}
 
Person.prototype.name = 'John';
Person.prototype.age = 30;
Person.prototype.job = 'Developer';
 
var person1 = new Person();
console.log(person1.name); // 'John'

在这个例子中,Person函数的prototype属性指向一个包含name,age和job属性的对象。当我们创建Person的新实例person1时,这个实例会从Person.prototype中继承这些属性。

  1. 原型链:

JavaScript中的原型链是一个对象链,用于继承和链式查找属性和方法。当尝试访问对象的属性或方法时,如果这个对象本身没有这个属性或方法,那么JavaScript会在这个对象的原型(一个对象)上查找这个属性或方法。如果原型也不存在这个属性或方法,那么JavaScript会在原型的原型上查找,直到找到这个属性或方法,或者直到找到一个原型是null的对象为止,这个过程就是原型链。

例如:

javascript 复制代码
function Person() {}
 
Person.prototype.name = 'John';
Person.prototype.age = 30;
Person.prototype.job = 'Developer';
 
var person1 = new Person();
console.log(person1.name); // 'John'
 
// 修改原型对象
Person.prototype = {
  name: 'Alice',
  age: 25,
  job: 'Designer'
};
 
var person2 = new Person();
console.log(person2.name); // 'Alice'
console.log(person1.name); // 'John'

在这个例子中,person1和person2都是Person的实例,但是它们的原型链指向的是Person.prototype的不同实例。因此,person1和person2的name属性是从不同的原型链中查找的,得到了不同的值。

注意:当修改原型对象时,已经创建的实例不会受到影响,它们会继续使用原来的原型。

3、实现类的继承

实现类的继承分为两步:

  • 继承构造函数中的属性和方法(构造器继承)
  • 继承对象原型中的属性和方法(原型链继承)

在研究他们之前,我们首先建立两个类

javascript 复制代码
function father() {
    //这些属性在father实例对象上
    this.name = "cry"
    this.age = 50
}
//这些方法在father原型对象上
father.prototype.getName = function () {
    return "父亲叫" + this.name
}
father.prototype.getAge = function () {
    return "父亲他今年" + this.age + "岁了"
}

//子类(姓名,年龄)
function child() {

}

我们首先实现实例对象的继承

javascript 复制代码
function child() {
    //继承第一步,实例对象的属性继承
    father.call(this)//call可以把child的上下文传进Father里进行属性赋值
}
//现在你已经可以访问father的name属性和age属性了
var c1 = new child()
console.log(c1.name, c1.age)
//但是我们还是没有办法访问father原型上的方法
console.error("error",c1.getAge())
相关推荐
北极有牛2 分钟前
cpp学习笔记--常量指针
java·开发语言·算法
半杯咖啡半行码23 分钟前
C++ 编程与 STL 模板:从泛型编程到内存安全详解
开发语言·c++
caoerzhong35 分钟前
JeeWMS 开源 WMS 部署避坑指南:Java 仓库管理系统的环境基线、四类根因与可复现交付
java·开发语言·开源
时间的拾荒人38 分钟前
Qt 界面优化:绘图详解 —— 从基础图形到图片处理
开发语言·qt·面试
MayZork1 小时前
Qt 文件操作:QSaveFile 与 QTemporaryFile(含 QTemporaryDir)实战
开发语言·qt
北冥you鱼1 小时前
Go 语言空接口(interface{})使用场景与最佳实践
开发语言·windows·golang
xh didida1 小时前
Linux -- 基础IO
linux·服务器·开发语言·c++
个 人 练 习 生2 小时前
C++ string 类模拟实现:从底层理解字符串(上)
开发语言·c++·经验分享·学习·程序人生
2601_966949652 小时前
多市场量化策略的数据接口应该如何设计:从数据层架构到策略接入
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
小宋10212 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互