web学习笔记(二十一)

目录

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();

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【GB28181】wvp-GB28181-pro快速修改登录页面名称(前端)

引言 作为一个非前端开发人员,自己摸索起来比较费劲,也浪费了很多时间 本文快速帮助开发者修改为自己名称的一个国标平台 文章目录 一、 预期效果展示二、 源码修改-前端三、 验证修改效果一、 预期效果展示 二、 源码修改-前端 需要修改的文件位置: 项目工程下web_src目录…

一、深度学习介绍

目录 1、深度学习与机器学习的区别 1.1 特征提取方面 1.2 数据量和计算性能要求 1.3 算法代表 2、深度学习应用场景 1、深度学习与机器学习的区别 1.1 特征提取方面 1.2 数据量和计算性能要求 1.3 算法代表 2、深度学习应用场景

Linux课程四课---Linux开发环境的使用(vim编辑器的相关)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

CP AutoSar之LIN Driver详细说明

本文遵循autosar标准&#xff1a;R22-11 1 简介 本文指定了 AUTOSAR 基础软件模块 LIN 驱动程序的功能、API 和配置。 1.1 范围 LIN驱动程序适用于ISO 17987主节点和从节点。AUTOSAR中的LIN实现偏离了本LIN驱动器规范中所述的ISO 17987规范&#xff0c;但LIN总线上的行为不…

搜维尔科技:CATIA为建筑、基础设施和城市规划提供虚拟孪生力量

超越传统项目交付方法限制的协作 复杂建筑和基础设施项目开发的设计和工程流程需要多个利益相关者和所有项目阶段的密切合作。此外&#xff0c;日益复杂的施工项目要求所有团队都依赖 CATIA 和3D EXPERIENCE 虚拟孪生技术作为“通用语言”&#xff0c;以促进协作并减少阶段之间…

Pytorch添加自定义算子之(5)-配置GPU形式的简单add自定义算子

参考:https://zhuanlan.zhihu.com/p/358778742 一、头文件 命名为:add2.h void launch_add2(float *c,const float *a,const float *b,int n);

开发前端需求时,我们该如何准确预估个人工时

公众号&#xff1a;程序员白特&#xff0c;欢迎一起交流学习 原文作者&#xff1a;掘金-悟空和大王 前言 分享一篇前端开发人员比较感兴趣的话题&#xff0c;如何评估工时。 领导为什么会压工时&#xff1f; 使他的KPI更好看不清楚做这个东西实际要多长时间因为第2点的原因&…

极狐GitLab 使用指南:开启多种导入导出源

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 极狐GitLab 支持从主流的平台将项目导入到极狐GitLab&#xff…

Qt|QTreewidget类下函数qt助手详解说明示例(上)

该系列持续更新&#xff0c;喜欢请一键三连&#xff0c;感谢各位大佬。 QT5.14.2 参考官方QT助手 文章目录 QTreeWidget ClasspropertiesPublic Functions默认构造函数默认析构函数添加根节点void addTopLevelItem(QTreeWidgetItem *item)添加多个根节点void addTopLevelItems…

图神经网络实战——图论

图神经网络实战——图论 0. 前言1. 图属性1.1 有向图和无向图1.2 加权图与非加权图1.3 连通图非连通图1.4 其它图类型 2. 图概念2.1 基本对象2.2 图的度量指标2.2 邻接矩阵表示法 3. 图算法3.1 广度优先搜索3.2 深度优先搜索 小结系列链接 0. 前言 图论 (Graph theory) 是数学…

从代码到内容:使用C#和Fizzler探索Instagram的深处

文章摘要&#xff1a; Instagram是一个流行的社交媒体平台&#xff0c;拥有数亿的用户和海量的图片和视频内容。如果您想要从Instagram上获取一些有用的信息或数据&#xff0c;您可能需要使用爬虫技术来自动化地抓取和分析网页内容。本文将介绍如何使用C#和Fizzler这两个强大的…

Facebook元宇宙大观:数字化社交的未来愿景

近年来&#xff0c;元宇宙&#xff08;Metaverse&#xff09;概念备受关注&#xff0c;被认为是数字化社交的未来趋势。作为全球领先的社交媒体平台之一&#xff0c;Facebook正积极探索元宇宙的发展路径&#xff0c;构想着一个数字化社交的未来愿景。在本文中&#xff0c;我们将…

FLStudio20.8编曲制作软件中文版下载及功能全面介绍

一、主要功能 FL Studio 20.8&#xff0c;作为一款深受音乐制作人和作曲家喜爱的软件&#xff0c;具备多种核心功能&#xff0c;满足从创作到完成的整个音乐制作流程。 音频录制与编辑&#xff1a;用户可以轻松录制外部音频&#xff0c;如乐器演奏、人声等&#xff0c;并在软…

PBM学习——从基础到精通!!!

本专栏着重讲解PBM学习所得,学习笔记、心得,并附有视频素材资料,视频详细目录如下: PBM相关参数解释1 PBM相关参数解释2 PBM相关案例实践1 PBM相关案例实践2 PBM相关案例实践2 PBM相关案例实践3 PBM多相流中次相界面设置1 PBM多相流中次相界面设置2 欧拉多相流曳力1 欧拉多…

opengles 绘制图元 ——glDrawArrays() 相关API介绍 (十)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、opengles3.0 绘制图元介绍二、绘图图元 API 介绍1. glDrawArrays()1.1 glDrawArrays()函数原型1.2 GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN 三者的区别1.3 使用GL_TRIANGLES, G…

苹果App Store上架工具介绍

文章目录 摘要引言正文1. Xcode2. [appuploder](https://www.applicationloader.net/)3. [克魔助手](https://keymob.com/) 4.[ipa guard](https://www.ipaguard.com/)总结参考资料 摘要 苹果App Store作为iOS应用程序的主要分发渠道&#xff0c;上架应用程序需要遵守规定和通…

kafka消费者接收不到消息

背景&#xff1a; 对kafka消息进行监听&#xff0c;生产者发了消息&#xff0c;但是消费端没有接到消息&#xff0c;监听代码 消费端&#xff0c;kafka配置 spring.kafka.bootstrap-serverskafka.cestc.dmp:9591 spring.kafka.properties.sasl.jaas.configorg.apache.kafka.…

动态规划之使用最小花费爬楼梯【LeetCode】

动态规划之使用最小花费爬楼梯 LCR 088. 使用最小花费爬楼梯解法1解法2 LCR 088. 使用最小花费爬楼梯 LCR 088. 使用最小花费爬楼梯 解法1 状态表示&#xff08;这是最重要的&#xff09;&#xff1a;dp[i]表示以第i级台阶为楼层顶部&#xff0c;到达第i层台阶的最低花费。 状…

threejs 大场景下,对小模型进行贴图处理

接上篇小模型的删除☞threeJS 大模型中对小模型进行删除-CSDN博客 针对已有模型&#xff0c;根据数据状态进行贴图处理&#xff0c;例如&#xff1a;机房内电脑告警状态、电脑开关机状态下的不同状态贴图等 示例模型还是以丛林小屋为例&#xff1a;针对该模型中的树干进行贴图…

❤ git操作Github、git操作github

❤ 操作github 一、git操作Github 1、设置用户名和邮件地址 git config --global user.name "nexuslin" git config --global user.email "2455067339qq.com"2、生成本地密钥 ssh-keygen -t rsa -C 2455067339qq.com3、接下来就一直回车&#xff0c;然…