【二】构造函数和原型

news2024/11/17 16:00:49

ES6(ECMAScript 6.0)之前js没有引入类的概念

在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征

ES6之前创建对象可以通过以下三种方式创建对象:

对象字面量:

var obj ={
    
}

new Object():

var obj=new Object()

自定义构造函数:

function Star(name,age){
    this.name=name;
    this.age=age;
    this.sing=function(){
        console.log("我会唱歌!")
    }
}
var star=new Star("张三",20)
console.log(star.name);
star.sing()   //我会唱歌!

构造函数是一种特殊的函数,主要用于初始化对象,他总是与new一起使用,我们把对象的一些公共的属性和方法抽取出来,然后封装到这个函数里面

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

  1. 在内存中创建一个新的对象

  2. 让this指向这个新的对象

  3. 执行构造函数中的代码,给这个新对象添加属性和方法

  4. 返回这个新的对象

成员即是构造函数包含的属性和函数,而成员又分为:实例成员和静态成员

实例成员

实例成员就是在构造函数内部通过this添加的成员如上面的name、age和sing,实例成员只能通过实例化对象进行访问

var star=new Star("张三",20)
//star.kk=1029  这也是实例成员
console.log(star.name);

静态成员

在构造函数本身上添加的成员

star.sex='男'
console.log(star.sex)  //男

静态成员只能通过构造函数进行访问

 

我们希望所有对象使用同一个函数,这样就比较节省内存,而解决方法就是我们接下来要讲的原型对象prototype(构造函数通过原型分配的函数是所有对象所共享的)

JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有,下面我们看看打印的构造函数:

 

我们可以把哪些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法

以上面代码为例:

Star.prototype.sing=function(){
    console.log("我会唱歌")
}
let star=new Star()
star.sing()

所以一般情况下,我们的公共属性定义到构造函数里面,公共的方法放在原型对象上

每一个对象都有一个属性proto指向我们构造函数的原型对象,但是我们不能通过proto对原型对象中的属性进行赋值

接下来我们来仔细探讨一下构造函数、实例和原型对象之间的关系

function Star(username,age){
      this.username=username;
      this.age=age
    }
    Star.prototype.sing=function(){
      console.log("我会唱歌");
    }
    let star=new Star()
    console.log(Star.prototype);   //输出构造函数上的原型对象
    console.log(star);     //输出对象

上述程序运行结果如下:

 

对象原型([[Protootype]])和构造函数(prototype)原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身
constructor主要用于记录该对象引用与哪个构造函数,它可以让原型对象指向原来的构造函数
很多情况下,我们需要手动的利用constructor这个属性指向原来的构造函数
Star.prototype = {
    movie: function(){
        console.log("我会演电影');
        }
 }//prototype是对象,如果这样赋值就会覆盖原来的对象,这会使得原型上没有了构造函数
 console.log(Star.prototype)

原型对象上没有了构造函数具体影响取决于你在代码中的使用方式。以下是可能的影响:

  1. 丢失原型链:通过将 star.prototype 设置为新的对象字面量,你将丢失默认的原型链。默认情况下,原型链是由构造函数和其原型对象构成的。如果没有了默认的原型对象,那么对象实例将不再具有原型链上的属性和方法的继承能力。

  2. 构造属性丢失:由于新的原型对象没有 constructor 属性,所以对象实例将不再具有指向构造函数的 constructor 属性。当你通过检查对象的构造属性来确定其构造函数时,将无法准确地识别对象的类型。

  3. 对象实例继承变更:新创建的对象实例将继承新原型对象上的属性和方法。在你的示例中,新对象实例将继承 movie 方法。这意味着你可以在新对象上调用 movie() 方法,输出 "我会演电影"。

请注意,由于丢失了默认的原型对象和构造属性,这种设置可能会导致代码的可读性和可维护性下降。通常情况下,最好不要完全替换原型对象,而是通过扩展或修改原型对象来添加或覆盖属性和方法。

以下是一个示例,展示了将 star.prototype 设置为新对象字面量的影响:

function Star(name) {
  this.name = name;
}
​
// 将 star.prototype 设置为新对象字面量
Star.prototype = {
  movie: function() {
    console.log("我会演电影");
  }
};
​
var star1 = new Star("张三");
​
// 对象实例继承了新原型对象上的方法
star1.movie(); // 输出:我会演电影
​
// 丢失了默认的构造属性
console.log(star1.constructor === Star); // false
console.log(star1.constructor); // 输出:[Function: Object]

在上述示例中,star1 对象实例继承了新的原型对象上的 movie 方法,可以调用该方法。但它失去了默认的构造属性,constructor 不再指向 Star 构造函数,而是指向 Object 构造函数。

这时我们需要手动添加constructor指回原来的构造函数

 

 通过原型对象扩展内置对象

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/696134.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端vue入门(纯代码)17

不管何时何地&#xff0c;永远保持热爱&#xff0c;永远积极向上&#xff01;&#xff01;&#xff01; 【19.尚硅谷GitHub案例】 1.静态GitHub搜索案例的静态文件&#xff1a; index.html <!DOCTYPE html> <html lang"en"> <head><meta cha…

RNN其中的X.reshape

假设RNN中的输入为2528&#xff0c;2是batchsize可以理解为有几句话&#xff0c;5是timestep可以理解为有几个词&#xff0c;28是vocab_size。如下就是两个句子&#xff0c;每个句子由5个单词组成。28则为每个单词的词向量&#xff0c;在此略去。 在输入的时候&#xff0c;首先…

力姆泰克电动推杆

LAP梯形丝杠电动推杆 内含长寿命润滑脂&#xff0c;免维护 向下翻动查看更多 力姆泰克电动推杆 高强度/高耐磨材料选择&#xff0c;高精度的零部件加工&#xff0c;先进的壳体设计理念&#xff0c;造就高承载能力&#xff0c;抗冲击&#xff0c;低噪音&#xff0c;长寿命的优…

机器学习9:使用 TensorFlow 进行特征组合编程实践

在【机器学习6】这篇文章中&#xff0c;笔者已经介绍过环境准备相关事项&#xff0c;本文对此不再赘述。本文将通过编程案例来探索特征组合&#xff08;Feature Crosses&#xff09;对模型训练的影响&#xff0c;加深对上一篇文章&#xff08;机器学习8&#xff09;的理解。 经…

C++ DAY2

1.总结类和结构体的区别 1.结构体是一种值类型&#xff0c;而类是引用类型。值类型用于存储数据的值&#xff0c;引用类型用于存储对实际数据的引用 2.结构体中声明的成员变量无法赋予初值&#xff0c;类可以 3.结构体是值类型&#xff0c;它在栈中分配空间&#xff1b;而类是…

青大数据结构【2018】【算法分析】

关键字&#xff1a; 单链表奇偶数拆分、顺序表交集、二叉排序树 右中左的顺序&#xff0c;找出二叉排序树中值大于等于k的所有结点。

2.位带操作

1.位带操作&#xff1a; 2.位带区与位带别名区地址转换&#xff1a; 外设位带别名区地址&#xff1a;AliasAddr0x42000000(A-0x40000000)*8*4n*4&#xff1b;SRAM位带别名区地址&#xff1a;AliasAddr0x22000000(A-0x20000000)*8*4n*4&#xff1b;IO口操作宏定义&#xff1a;…

【Linux】NoSQL之 Redis配置与优化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 NoSQL之 Redis配置与优化 关系数据库与非关系型数据库关系型数据库非关系型数据库关系型数据库和非关系型数据库区别数据存储方式不同扩展方式不同对事务性的支持不同 非关系…

多元回归预测 | Matlab麻雀算法(SSA)优化极限学习机ELM回归,SSA-ELM回归预测,多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab麻雀算法(SSA)优化极限学习机ELM回归,SSA-ELM回归预测,多变量输入模型 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码 %% 清空环境变…

交叉熵损失CrossEntropyLoss

交叉熵损失CrossEntropyLoss 语义分割网络输出tensor的尺寸为【B,C,H,W】,进行多分类&#xff0c;label的尺寸为【B,H,W】。 举例&#xff1a;三分类&#xff1a;output【1, 3&#xff0c;3, 3】&#xff0c;label【1, 3, 3】 验证 import torchoutput torch.tensor([[[[1, 1…

字符集,编码,解码,中文乱码

字符集 ASCII 美国佬用的&#xff0c;1个字节表示那些英文字母啥的就够了 GBK 中国的&#xff0c;两个字节表示2w多汉字也够了 Unicode 万国符&#xff0c;4个字节&#xff0c;用来包含全世界所有的字符。 编码 编码就是将字符集中的数字&#xff0c;如a对应数字97&…

Vue中el与data函数

1、绑定容器&#xff0c;el与$mount的异同 <body><div id"root"><h1>你好&#xff0c;{{name}}</h1></div> </body> <script>const vm new Vue({//el:#root, //第一中写法&#xff0c;new的时候直接写好eldata:{name:…

云 LIS 实验室信息管理系统源码 C#检验系统源码

科技的飞速发展为实验室信息管理带来了新机遇&#xff0c;云计算技术的应用更是为实验室信息管理打开了新的大门。云 LIS 实验室信息管理系统&#xff0c;作为一种新型的信息化管理方案&#xff0c;已经在多个实验室的信息化管理中得到应用&#xff0c;并且具有广阔的应用前景。…

社区团购小程序怎么制作

社区团购小程序开发&#xff0c;有什么功能 商品管理&#xff1a;社区团购小程序提供商品管理功能&#xff0c;可以方便地添加、编辑和删除商品信息。你可以设置商品的价格、库存、规格等&#xff0c;并上传商品的图片和描述&#xff0c;以吸引用户关注。 配送管理&#xff1…

为什么 Midjourney 效果远远好于开源的 Stable Diffusion Model?

midjourney之所以让你觉得效果好&#xff0c;是因为他是一个更接近于应用层的工具&#xff0c;你就聊聊天对对话&#xff0c;他就能给你很好的反馈&#xff0c;内部的调优都封装成黑盒&#xff0c;不太需要你去关心 而stable diffusion更适合爱折腾&#xff0c;懂折腾的专业一…

抖音团购服务商贴牌系统

抖音团购服务商贴牌系统整体指的是抖音为团购服务商提供的一套定制化解决方案&#xff0c;使其能够以自己的品牌形象和标识在抖音平台上进行团购活动。这个系统通常包括以下组成部分&#xff1a; 品牌定制&#xff1a;抖音允许团购服务商根据自身品牌形象和标识进行定制&am…

Bpmn.js流程建模结合业务整合工作流(三)

前两篇文章概述了bpmn的搭建及其基本使用 现在说下流程所需的表单 流程建模之表单设计如下图所示 VForm是一款基于Vue 2/Vue 3的低代码表单&#xff0c;支持Element UI、iView两种UI库&#xff0c;定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。 VForm由…

在SpringBoot中如何整合消息服务组件?

在开发中&#xff0c;消息服务组件在系统架构中扮演着举足轻重的角色。本文将介绍消息服务组件的基本概念&#xff0c;以及如何在SpringBoot中整合常见的消息服务组件&#xff0c;如ActiveMQ、RabbitMQ和Kafka。最后&#xff0c;我们将探讨整合消息服务组件在实际应用场景中的优…

jmeter连接数据库jdbc(sql server举例)

目录 前言&#xff1a; 一、下载第三方工具包驱动数据库 二、连接JDBC Connection Configuration 三、jdbc request 四、查看数据 前言&#xff1a; JMeter是一款强大的性能测试工具&#xff0c;它不仅可以模拟用户行为进行接口测试&#xff0c;还可以通过使用JDBC&#…

libevent(10)使用event处理socket连接

这个例子中&#xff0c;我们通过event处理socket连接&#xff0c;并进行一些简单的数据处理。 代码如下 test_event_server.cpp&#xff1a; #include <iostream> #include <thread> #include <sys/types.h> #include <sys/stat.h> #include <fcnt…