首页 > 其他分享 >JS中构造函数继承问题注意事项总结

JS中构造函数继承问题注意事项总结

时间:2024-08-16 15:56:13浏览次数:8  
标签:name create Object JS Person Student 注意事项 prototype 构造函数

在 JavaScript 中,继承是通过原型链来实现的。当你想要创建一个子类(比如 Student)继承一个父类(比如 Person)时,通常会使用 Object.create 来创建 Student 的原型对象。这背后有一些重要的原因:

1. 共享与独立性

当你执行 Student.prototype = Person.prototype 时,Student 的原型对象与 Person 的原型对象指向同一个对象。这意味着对 Student.prototype 的任何修改都会直接影响到 Person.prototype,反之亦然。这种共享可能会导致意外的副作用。

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

Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name);
};

function Student(name, school) {
    Person.call(this, name);
    this.school = school;
}

// 错误示范:Student.prototype 和 Person.prototype 是同一个对象
Student.prototype = Person.prototype;

Student.prototype.sayHello = function() {
    console.log("Hi, I'm " + this.name + " from " + this.school);
};

const person = new Person("Alice");
person.sayHello(); // 现在会输出 "Hi, I'm Alice from undefined",而不是预期的 "Hello, I'm Alice"

如上所示,当你修改 Student.prototype.sayHello 时,Person.prototype.sayHello 也会被覆盖,因为它们指向同一个对象。这种行为通常是不希望发生的。

2. 保持独立的原型链

使用 Object.create 方法时,你会创建一个新对象,这个对象的原型指向 Person.prototype,而不是直接使用 Person.prototype。这样,Student.prototype 就是一个独立的对象了,它继承了 Person.prototype 的所有属性和方法,但对它的修改不会影响 Person.prototype

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

Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name);
};

function Student(name, school) {
    Person.call(this, name);
    this.school = school;
}

// 推荐方法:使用 Object.create 创建独立的原型对象
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayHello = function() {
    console.log("Hi, I'm " + this.name + " from " + this.school);
};

const person = new Person("Alice");
person.sayHello(); // 输出: "Hello, I'm Alice"

const student = new Student("Bob", "XYZ University");
student.sayHello(); // 输出: "Hi, I'm Bob from XYZ University"

在这个例子中,Student.prototypePerson.prototype 的一个独立副本。Student.prototype 继承了 Person.prototype 的方法和属性,但对 Student.prototype 的任何修改不会影响 Person.prototype

3. 设置 constructor 属性

在使用 Object.create 时,Student.prototypeconstructor 属性会指向 Person,因为 Object.create(Person.prototype) 创建的对象继承了 Person.prototype。因此,你通常需要手动设置 Student.prototype.constructorStudent,以确保它指向正确的构造函数。

Student.prototype.constructor = Student;

这一步虽然不是强制性的,但它可以确保 Student 的实例的 constructor 属性正确指向 Student 而不是 Person,这对于调试和代码的可读性很重要。

4. 总结

  • Object.create 的优势:它创建了一个新对象,这个对象的原型指向 Person.prototype,使得 Student.prototypePerson.prototype 的独立副本。这样修改 Student.prototype 不会影响 Person.prototype
  • 避免副作用:直接使用 Student.prototype = Person.prototype 会让两个构造函数的原型对象共享一个对象,导致修改其中一个时,另一个也会受到影响。
  • constructor 的设置:使用 Object.create 之后,你需要手动将 constructor 指向 Student,以保持正确的构造函数引用。

使用 Object.create 是推荐的做法,因为它提供了更好的代码隔离和继承结构。

标签:name,create,Object,JS,Person,Student,注意事项,prototype,构造函数
From: https://blog.csdn.net/2301_79858914/article/details/141262135

相关文章

  • JS中【Object.defineProperties】知识点介绍
    在JavaScript中,Object.defineProperties()是一个非常强大的方法,用来一次性定义或修改一个对象的多个属性的属性描述符。下面是关于Object.defineProperties()的详细讲解。基本语法Object.defineProperties(obj,props)obj:要定义或修改属性的目标对象。props:一个对......
  • 基于JSP的美食推荐管理系统
    你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。开发语言:Java数据库:MySQL技术:JSP+JavaBeans+Servlet工具:Eclipse、Navicat、Tomcat系统展示首页用户注册界面用户登录界面热门美食界面摘要21世纪的今天,社会对信息科学化的认识不断加深,科学化的......
  • 基于JSP的社区疫情防控管理信息系统
    你好,我是专注于计算机技术研究的学姐。如果你对社区疫情防控管理信息系统感兴趣或有相关需求,欢迎私信交流。开发语言:Java数据库:MySQL技术:JSP+JavaBeans+Servlet工具:MyEclipse,Tomcat系统展示首页用户注册与登录界面个人中心管理员功能模块摘要随着科技进步......
  • 基于JSP的九宫格日志网站
    你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。开发语言:Java数据库:MySQL技术:JSP+JavaBeans+Servlet工具:Eclipse、Navicat、Maven系统展示首页管理员功能模块用户功能模块论坛管理摘要本文详细介绍了基于JSP技术的九宫格日志网站,该系统以B/S结......
  • 基于JSP的足球赛会管理系统
    你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。开发语言:Java数据库:MySQL技术:JSP+JavaBeans+Servlet工具:Eclipse、Navicat、Maven系统展示首页管理员功能模块用户功能模块论坛中心摘要本文详细介绍了基于JSP技术的足球赛会管理系统,该系统以B/S......
  • 基于nodejs+vue美得商城的设计与实现[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着电子商务的蓬勃发展,线上购物已成为人们日常生活的重要组成部分,特别是在家电领域,消费者对于便捷、高效、信息丰富的购物体验需求日益增长。传统的家电销......
  • 基于nodejs+vue每日一课微党课学习管理平台[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在信息化高速发展的今天,党员教育作为党的建设的重要组成部分,面临着如何高效、便捷、创新地传播党的理论知识与实践经验的挑战。传统的党员学习方式受限于时......
  • 基于nodejs+vue漫语在线论坛设计与实现[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和用户对于在线交流需求的日益增长,论坛作为一种重要的网络社交平台,在信息传播、兴趣交流、知识分享等方面发挥着不可替代的作用。......
  • 【Nodejs】四、HTTP协议
    文章来自于李强老师nodejs讲解时的内容总结,记录后便于之后复习使用目录一、概念二、请求报文的组成三、HTTP的请求行四、HTTP请求头五、HTTP的请求体六、响应报文的组成七、创建HTTP服务(重点)7.1操作步骤7.2测试7.3注意事项八、浏览器查看HTTP报文九、......
  • 【Nodejs】五、Node.js 模块化
    一、介绍1.1什么是模块化与模块?将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为模块化其中拆分出的每个文件就是一个模块,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用1.2什么是模块化项目?编码时是按照模......