首页 > 其他分享 >js中两种设置子类原型(prototype)来实现原型式继承的本质区别

js中两种设置子类原型(prototype)来实现原型式继承的本质区别

时间:2024-07-31 18:29:11浏览次数:14  
标签:name Parent 子类 js 实例 Child prototype 属性

在JavaScript中,这两种设置子类(Child)原型(prototype)的方法虽然都能实现继承的基本功能,但它们之间存在一些重要的区别和潜在的陷阱。

1. Child.prototype = Object.create(Parent.prototype);

这个方法使用Object.create()来创建一个新对象,其原型(__proto__)被设置为Parent.prototype。这样做的结果是,Child.prototype会继承Parent.prototype上的所有属性和方法(注意,这里指的是原型链上的继承,而非实例属性或方法的继承),但不包括Parent构造函数内部可能初始化的任何实例属性或方法。

优点

  • 清晰地区分了原型链继承和构造函数实例初始化。
  • 避免了不必要的实例属性或方法被继承(即,只继承了原型上的属性和方法)。
  • 更符合原型链继承的初衷和原理。

示例

function Parent() {  
    this.name = 'Parent';  
}  
  
Parent.prototype.sayHello = function() {  
    console.log('Hello from Parent!');  
};  
  
function Child() {  
    this.age = 10;  
}  
  
Child.prototype = Object.create(Parent.prototype);  
Child.prototype.constructor = Child; // 需要手动修复constructor属性  
  
var child = new Child();  
console.log(child.sayHello()); // Hello from Parent!  
console.log(child.name); // undefined,因为name是Parent实例的属性,不是原型属性

下面通过代码解释一下 Object.create的实现流程

#详解 Object.create 实现逻辑
function create(proto) {
    function F(){}
    F.prototype = proto
    return new F()
}

 

2. Child.prototype = new Parent();

这个方法通过创建一个Parent的新实例,并将其赋值给Child.prototype。这会导致Child.prototype不仅继承了Parent.prototype上的所有属性和方法,还继承了Parent构造函数内部初始化的任何实例属性或方法(如果有的话)。

缺点

  • 如果Parent构造函数内部有对实例属性的初始化(如上例中的this.name = 'Parent';),这些实例属性也会被继承到Child.prototype上,这可能不是你想要的结果,因为原型上的属性或方法应该是被所有实例共享的,而不是每个实例都应该有自己的拷贝。
  • 可能导致不必要的内存消耗,因为每个通过Child构造函数创建的实例都会间接地包含一个Parent实例的所有实例属性(尽管它们通常不会被访问或使用)。

示例(注意,这里展示了潜在的问题):

function Parent() {  
    this.name = 'Parent'; // 这会被继承到Child.prototype上,通常不是期望的  
}  
  
Parent.prototype.sayHello = function() {  
    console.log('Hello from Parent!');  
};  
  
function Child() {  
    this.age = 10;  
}  
  
Child.prototype = new Parent(); // 这将'name'属性也带到了Child.prototype上  
Child.prototype.constructor = Child; // 需要手动修复constructor属性  
  
var child = new Child();  
console.log(child.sayHello()); // Hello from Parent!  
console.log(child.name); // 'Parent',这不是我们想要的,因为name应该是实例属性  
console.log(Child.prototype.name); // 'Parent',这证明了name被继承到了Child.prototype上

综上所述,Object.create(Parent.prototype)是更推荐的方式,因为它更清晰、更准确地实现了原型链继承,避免了不必要的实例属性被继承到原型上。

标签:name,Parent,子类,js,实例,Child,prototype,属性
From: https://blog.csdn.net/j15087159186/article/details/140829463

相关文章

  • js各种实际场景的使用案例合集(全)
    1、两个数组的交集场景1:找出两个数组arr1的activityProdId值存在在arr2中,如果存在则放入新数组arr3中场景条件:arr1=[        {activityProdId:23,name:"06",},        {activityProdId:56,name:"07",},        {activityProdId:78,name......
  • JSON格式说明
    JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999的一个子集。JSON的数据类型主要包括以下几种:对象(Object):在JSON中,对象是一个无序......
  • echarts 地图 geojson 街道级别获取
    echarts地图geojson街道级别获取最近开发遇到需求是要制作echarts地图,原本制作echarts地图也并不难,但是偏偏我要制作街道级别的地图,难就难在如何获取geojson的数据。获取渠道目前遇到的最多的获取geojson的方法是通过阿里的地理工具去获取,https://datav.aliyun.com/por......
  • JS逆向 (简单)
    在该网站输入账户123和密码123F12抓包发生密码被加密成74ce2ba17b2c218246e778fb5e895c95,并且密码字段为pwd点击搜索搜索pwd,并且查看是哪里给他加密的发现此处有用到加密,但不是pwd是hiddenPwd,在这个周围看看发现他把hiddenPwd的值赋值给pwd查看里面password的值......
  • 微信小程序nodejs+vue+uniapp学生选课系统dmkas源码lw包安装
    系统分为学生和管理员,教师三个角色小程序端运行软件 微信开发者工具/hbuiderxuni-app框架:使用Vue.js开发跨平台应用的前端框架,编写一套代码,可编译到Android、小程序等平台。基于微信小程序学生选课系统后台是本系统分为学生,教师,管理员三个角色,学生的主要功能是查看课程介......
  • Medium.com 无效的 Json?
    我试图从Medium.com获取最新的帖子,例如,我转到这里https://medium.com/circle-blog/latest?format=json但是当我复制并粘贴整个内容时JSON到JSONEditorOnline.org时,我收到错误消息Error:Parseerroronline1:])}while(1);</x>{"su^Expecting'STRING',......
  • 在Vue.js中,this.$parent 表示当前组件实例的直接父组件实例
    在Vue.js中,this.$parent表示当前组件实例的直接父组件实例。它允许你从子组件中访问父组件中定义的属性、方法和数据。举个例子,如果你有一个子组件,并且想要从中访问父组件中定义的方法或属性,你可以使用this.$parent来引用它。以下是一个简单的示例来说明这一点:<!--ParentCo......
  • 学习Java的日子 Day60 JSP
    JSP核心技术1.什么是JSPJSP和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术。JSP实际上就是ServletJSP这门技术的最大的特点在于,写jsp就像在写html,但它相比html而言,html只能为用户提供静态数据,而Jsp技术允许在页面中嵌套java代码,为用户提供动态数据......
  • 如何在 FastAPI 中同时接收 JSON 数据和文件上传
    我正在开发一个FastAPI项目,我需要在同一请求中接收JSON数据和文件上传。具体来说,我需要在JSON数据中传递整数数组,同时上传文件。这是我的请求正文的样子:标题(字符串)描述(字符串)评论(字符串)due_date(日期)优先级(字符串)signed_to(数组)整......
  • HBuilderX 开发中使用 Node.js 搭建PDA扫码程序的服务端过程
    以下是使用HBuilderX和Node.js搭建程序服务端的大致步骤: 1. 安装Node.js首先,从Node.js官方网站下载并安装适合您操作系统的版本。在命令提示符中执行node-v,npm-v,检查nodejs版本是否安装完成。配置环境变量。2. 安装Oracle客户端根据您的操作系统,下载并安......