web学习笔记(二十一)

news2024/11/16 11:43:38

目录

1.构造函数创建对象

1.1规则

1.2 new关键字调用构造函数时,函数内部做了什么事情?

1.3总结

2.混合模式创建对象

3.JavaScript 继承---借助构造函数

 4.原型链

4.1原型链实现方法继承

5.完美的组合继承

6.call方法的使用


1.构造函数创建对象

1.1规则

(1)构造函数----函数名的首字母要大写eg:Person

 function Student(name, age, gender, no) {
            this.name1 = name;
            // 前者是新定义的属性名,后者是我们传进来的形参
            //绑定属性  this.属性名=属性值(形参上的变量)
           //属性名和形参的变量可以一致也可以不一致
            this.age1 = age;
            this.gender1 = gender;
            this.no1 = no;
            this.say1 = function () {
                console.log(this.name1 + 'is saying');
            }


        }
         var si=new Student('张三','20岁','大一','男');
         var s2=new Student('李四','22岁','大三','女');
         var s3=new Student('王五','20岁','大一','女');

  (2)函数内部的实现

         函数内的属性和方法前面需要添加this,表示当前对象的属性和方法

         构造函数中不需要return返回结果

 (3)调用函数

       var 实例对象= new 构造函数名() 

1.2 new关键字调用构造函数时,函数内部做了什么事情?

       (1)在函数内部创建一个空对象-----函数内没写,系统帮忙完成的

       (2)让this指向这个空对象

        (3)执行构造函数内部的代码,在对象上添加属性和方法

        (4)把对象返回----函数内没写return,系统帮忙完成的

1.3总结

  • 构造函数用于创建某一类对象,其首字母要大写。
  • 构造函数要和 new 一起使用才有意义。
  • 构造函数约定首字母大写。
  • 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
  • 构造函数中不需要 return 返回结果。
  • 当我们创建对象的时候,必须用new 来调用构造函数。

2.混合模式创建对象

和构造函数创建对象很像,但混合模式创建对象比构造函数创建对象要好一点,以后应用会更多一点

继承-原型继承 --prototype

之前构造函数创建方法都是this.方法,现在我们使用混合函数创造方法都是把方法从对象里面拎出来,然后通过对象.prototype.方法名=function(){}来创建方法,相当于我们把方法放到了一个公共的区域,大家在调用方法时都是调用同一个方法。

<script>
        function Person(name, age) {
            this.name = name;
            this.gae = age;
        }
        Person.prototype.say = function () {
            console.log(this.name + 'is saying');
        }
        Person.prototype.test = function () {
            console.log(this.name + 'is testing');
        }
        var p1 = new Person('张武', 18);
        var p2 = new Person('李四', 20);
        p1.test();
        p2.test();
        // 这两个方法是同一个,相当于开发了同一个系统
    </script>
  • JavaScript 是面向对象的语言,但JavaScript不使用类。
  • 在 JavaScript中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
  • JavaScript基于prototype, 而不是基于类(构造函数名)的。

3.JavaScript 继承---借助构造函数

        继承就是查找属性和方法的一种机制,先从自身(自己的构造函数)来查,如果有就直接用,如果没有,再从它继承的构造函数中查,直到找到为止,如果一直找不到,方法会报错,属性输出undefined,此时只能继承父构造函数中的方法,而不能继承父构造函数原型上的方法,想要继承父构造函数上的继承方法需要使用原型链来继承。

继承者------子类  派生类

被继承者-----父类   超类 基类

继承父类的方法:   父构造函数.call(this,实参1,实参2)

括号内第一个参数是对象,不一定是this,后续可以进行更换。

             Father.call(this, name, age,say)
   //Father.call 是调用了父构造函数   this对象 指向是儿子的实例对象  
// name,age是传的实参,在父亲构造函数中借用name和age属性

继承父类的例子:

 <script>
            //父类
        function Father(name, age) {
            this.name = name;
            this.age = age;
            this.say = function () {
                console.log('saying');
            }

        }
        //子类
        function Son(name, age, no, xueli) {

            // 继承父亲中的属性和方法
            Father.call(this, name, age,say)
            //Father.call 是调用了父构造函数       this对象 指向是儿子的实例对象   
            //name,age是传的实参,在父亲构造函数中借用name和age属性
            this.no = no;
            this.xueli = xueli;
            this.test = function () {
                console.log('testing');
            }
        }
        var s1=new Son('廉颇', '20', '1000','本科');
        console.log(s1.name,s1.age,s1.no,s1.xueli);
    </script>

 4.原型链

        原型链就是在原型上查方法,是一种查找方法的查找机制。先从自己的原型去查找,如果有方法,就是用,如果没有就向继承的父级对象去查,然后一直沿着原型对象一直向上查,找到就使用,找不到就报错

原型里面大部分放的都是方法,构造函数里面放置基本的属性。

constructor:构造器属性,可以通过这个查找出该原型的构造器

4.1原型链实现方法继承

(1)方法一:子构造函数.prototype=new 父构造函数();
  这个方法不太好用,让会儿子的原型上同时拥有了父亲的属性和方法。此时通过.pototype.constructor查找出来子构造函数的this指向为父构造函数。可以通过回指来解决这个问题:子构造函数.prototype.constructor=子构造函数;

(2) 方法二:子构造函数.prototype=Object.create(父构造函数.prototype); 

5.完美的组合继承

就是借助构造函数然后加上原型链,从而形成完美的组合继承。

父构造函数名.call(this,实参一,实参二);

子构造函数名.prototype=Object.create(父构造函数名.prototype);

子构造函数名.prototype.constructor=子构造函数名;

6.call方法的使用

函数名.call方法是函数的内置方法。无参时和直接调用函数的作用一样。

    function text1(){
            console.log('aaa');
        }
        text1();
        text1.call();

有参数时:参数一是对象(必传)。参数二及后面是函数的实参,以逗号分割依次传递。

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

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

相关文章

1、docker入门

文章目录 1、tocker简介2、tocker的安装&环境配置2、配置阿里云镜像3、基本命令1、镜像命令2、docker基本命令3、镜像基本命令4、Docker 容器常用命令 1、tocker简介 新一代的虚拟化技术 2、tocker的安装&环境配置 uname -r1、首先查看liunx的内核 yum update -y2、更…

Nginx----高性能的WEB服务端(四)

一、http 协议反向代理 1、反向代理&#xff1a;缓存功能 ​ proxy_cache zone_name | off; 默认off #指明调用的缓存&#xff0c;或关闭缓存机制;Context:http, server, location #zone_name 表示缓存的名称.需要由proxy_cache_path事先定义proxy_cache_key string; #缓存中…

刚刚:阿里云服务器降价了!2024云服务器优惠价格表曝光!

2024阿里云服务器优惠活动政策整理&#xff0c;轻量2核2G3M服务器61元一年、2核4G4M带宽165元1年&#xff0c;云服务器4核16G10M带宽26元1个月、149元半年&#xff0c;阿里云ECS云服务器2核2G3M新老用户均可99元一年续费不涨价&#xff0c;企业用户2核4G5M带宽199元一年&#x…

如何开展有效的绩效面谈

绩效面谈作为绩效管理的核心环节&#xff0c;其重要性不容忽视。它不仅是评价员工过去一段时间工作表现的环节&#xff0c;更是为下一阶段绩效管理设定目标和方向的环节。然而&#xff0c;许多企业在实施绩效面谈时&#xff0c;往往仅停留在形式上&#xff0c;没有真正地发挥其…

16. QML中的一些粒子特效

1.说明 在使用unity开发游戏时&#xff0c;都会涉及到一些特效的开发。实际上在QML中也提供了一些可以做特效的控件&#xff0c;称之为粒子系统。本篇博客主要记录一些使用粒子做特效的方式。 特效–火焰效果&#xff1a; 2. 案例汇总 2.1 案例1 效果展示&#xff1a; 粒子…

仿牛客网项目---用户注册登录功能的实现

从今天开始我们来写一个新项目&#xff0c;这个项目是一个完整的校园论坛的项目。主要功能模块&#xff1a;用户登录注册&#xff0c;帖子发布和热帖排行&#xff0c;点赞关注&#xff0c;发送私信&#xff0c;消息通知&#xff0c;社区搜索等。这篇文章我们先试着写一下用户的…

风速预测(七)VMD-CNN-BiLSTM预测模型

目录 往期精彩内容&#xff1a; 前言 1 风速 VMD 分解与可视化 1.1 导入数据 1.2 VMD分解 2 数据集制作与预处理 3 基于Pytorch的VMD CNN-BiLSTM 预测模型 3.1 定义VMD CNN-BiLSTM预测模型 3.2 设置参数&#xff0c;训练模型 4 模型评估与可视化 4.1 结果可视化 4.2…

蓝桥杯-常用STL(三)

常用STL &#x1f388;1.映射&#x1f388;2.map的基础使用&#x1f52d;2.1引入库&#x1f52d;2.2构造一个映射&#x1f52d;2.3插入一对映射&#x1f52d;2.4判断关键字是否存在&#x1f52d;2.5遍历映射&#x1f52d;2.6清空 &#x1f388;1.映射 &#x1f50e;映射是指两个…

[spark] RDD 编程指南(翻译)

Overview 从高层次来看&#xff0c;每个 Spark 应用程序都包含一个driver program&#xff0c;该程序运行用户的main方法并在集群上执行各种并行操作。 Spark 提供的主要抽象是 resilient distributed dataset&#xff08;RDD)&#xff0c;它是跨集群节点分区的元素集合&…

多个版本的Python如何不冲突?

转载文章&#xff0c;防止忘记或删除 转载于&#xff1a;电脑中存在多个版本的Python如何不冲突&#xff1f; - 知乎 (zhihu.com) 如何安装多版本的Python并与之共存&#xff1f; 如果你的工作涉及到Python多版本之间开发或测试&#xff0c;那么请收藏本文&#xff0c; 如果你…

RabbitMQ讲解与整合

RabbitMq安装 类型概念 租户 RabbitMQ 中有一个概念叫做多租户&#xff0c;每一个 RabbitMQ 服务器都能创建出许多虚拟的消息服务器&#xff0c;这些虚拟的消息服务器就是我们所说的虚拟主机&#xff08;virtual host&#xff09;&#xff0c;一般简称为 vhost。 每一个 vhos…

【Java程序设计】【C00331】基于Springboot的驾校预约学习系统(有论文)

基于Springboot的驾校预约学习系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的驾校预约学习系统&#xff0c;本系统有管理员、用户和教练三种角色&#xff1b; 管理员&#xff1a;个人中心、管理员管理、教练…

哈夫曼树的介绍

定义 路径长度&#xff1a;从根结点到该结点所经过的边数。 叶子结点的带权路径长度&#xff1a;叶子结点的权值*路径长度 树的带权路径长度&#xff1a;所有叶子结点的带权路径长度之和 哈夫曼树&#xff1a;带权路径长度最小的树&#xff0c;也称最优二叉树。 构造 反复选…

Scala Intellij编译错误:idea报错xxxx“is already defined as”

今天写scala代码时,Idea报了这样的错误&#xff0c;如下图所示&#xff1a; 一般情况下原因分两种&#xff1a; 第一是我们定义的类或对象重复多次出现&#xff0c;编译器无法确定使用哪个定义。 这通常是由于以下几个原因导致的&#xff1a; 重复定义&#xff1a;在同一个文件…

LNMP架构的源码编译环境下部署Discuz!社区论坛与Wordpress博客

一.编译安装Nginx 1.关闭防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 2.安装依赖包 yum -y install pcre-devel zlib-devel gcc gcc-c make 3.创建运行用户 nginx 服务程序默认 以 nobody 身份运行&#xff0c;建议为其创建专门的用户账户&…

飞天使-学以致用-devops知识点4-SpringBoot项目CICD实现

文章目录 代码准备创建jenkins 任务测试推送使用项目里面的jenkinsfile 进行升级操作 代码准备 推送代码到gitlab 代码去叩叮狼教育找 k8s 创建jenkins 任务 创建一个k8s-cicd-demo 流水线任务 将jenkins 里面构建时候的地址还有token&#xff0c; 给到gitlab里面的webhooks…

MySQL 的数据库操作,利用Spring Boot实现MySQL数据库的自动创建

执行 show databases; 命令可以查看当前数据库的所有数据库。 注意在 MySQL 客户端执行 SQL 语句的时候要带上分号 ; 并按下 enter 键&#xff0c;不然 MySQL 会认为你还没有输入完&#xff0c;会换一行继续等待你输入。 OK&#xff0c;像上面截图中的 information_schema、mys…

2024/02/28

绘制思维导图 将今天的模拟面试内容进行整合并上传作业 1、什么是回调函数? 回调函数是一种作为参数传递给其他函数的函数&#xff0c;在 C 语言中&#xff0c;函数指针允许我们将函数作为参数传递给其他函数&#xff0c;从而实现回调函数的功能&#xff0c;例如线程的创建函…

【Vue】插槽-slot

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Vue ⛺️稳中求进&#xff0c;晒太阳 插槽 作用&#xff1a;让组件内部一些 结构 支持 自定义 插槽的分类&#xff1a; 默认插槽。具名插槽。 基础语法 组件内需要定制的结构部分&…

如何利用HubSpot出海营销CRM实现品牌建设与传播的有效管理?

利用HubSpot出海营销CRM优化客户互动和沟通可以通过以下方式实现&#xff1a; 个性化客户管理&#xff1a; 利用HubSpot的客户管理功能&#xff0c;集中管理客户信息&#xff0c;并根据客户的行为、偏好和历史数据等信息进行个性化分类和标记。这样可以更好地了解客户需求&am…