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

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

端游如何防破解

在2023年这个游戏大年中&#xff0c;诸多热门大作涌现&#xff0c;作为世界级IP哈利哈利波特的衍生游戏——《霍格沃茨之遗》毫无悬念地成为2023年游戏圈的首款爆款作品&#xff0c;斩获了一众玩家的青睐。 在众多光环的加持下&#xff0c;《霍格沃茨之遗》很快被著名游戏破解…

leetcode 热题 100_移动零

题解一&#xff1a; 双指针遍历&#xff1a;将非零的值往数组前端依次放置&#xff0c;将放置之后数组后端多余的位置都置为0&#xff0c;参考下图&#xff08;来源. - 力扣&#xff08;LeetCode&#xff09;&#xff09; class Solution {public void moveZeroes(int[] nums)…

数据可视化原理-腾讯-热力图

在做数据分析类的产品功能设计时&#xff0c;经常用到可视化方式&#xff0c;挖掘数据价值&#xff0c;表达数据的内在规律与特征展示给客户。 可是作为一个产品经理&#xff0c;&#xff08;1&#xff09;如果不能够掌握各类可视化图形的含义&#xff0c;就不知道哪类数据该用…

哪个有名的工具可以安全记事 私密记事本笔记推荐

在这个数字化的时代&#xff0c;我们的生活已经离不开各种记事工具。它们帮助我们记录生活中的点点滴滴&#xff0c;无论是工作上的重要事项&#xff0c;还是个人的私密心情。然而&#xff0c;当我在寻找一个能够安心记录私密事情的工具时&#xff0c;安全性成为了我最关心的因…

CentOs的yum报错: except KeyboardInterrupt, e:

1.报错 File “/bin/yum”, line 30 except KeyboardInterrupt, e: ^^^^^^^^^^^^^^^^^^^^ 2.原因&#xff1a;yum需要用python2编译&#xff0c;如果服务器安装的是python3.6并作为默认编译器的话&#xff0c;就会出现这个错误。 3.解决方法&#xff1a;whereis python 4.修改y…

【测试工具】Fiddler

1.Fiddler简介 Fiddler是位于客户端和服务器端的HTTP代理&#xff0c;能够记录客户端和服务器之间的所有 HTTP请求&#xff0c;是web调试的利器。既然是代理&#xff0c;也就是说&#xff1a;客户端的所有请求都要先经过Fiddler&#xff0c;然后转发到相应的服务器&#xff0c…

JS利用Worker多线程大文件切片上传

在做前端上传时&#xff0c;会遇到上传大文件&#xff0c;大文件就要进行分片上传&#xff0c;我们整理下思路&#xff0c;实现一个分片上传&#xff0c;最终我们要拿到每一个分片的hash值&#xff0c;index 分片索引&#xff0c;以及分片blob&#xff0c;如下&#xff1a; 一…

【Web安全靶场】sqli-labs-master 54-65 Challenges 与62关二分法和like模糊搜索

sqli-labs-master 54-65 Challenges 其他关卡和靶场见专栏… 文章目录 sqli-labs-master 54-65 Challenges第五十四关-联合注入第五十五关-联合注入第五十六关-联合注入第五十七关-联合注入第五十八关-报错注入第五十九关-报错注入第六十关-报错注入第六十一关-报错注入第六十…

【前端素材】推荐优质后台管理系统网页my-Task平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;通常由管理员使用。后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功…

深度解读篇章:剖析构建互联网大厦的基石——TCP/IP协议全貌

&#x1f440;&#x1f440;&#x1f440; 引言 今天&#xff0c;我们一同揭幕的是驱动全球互联网脉搏跳动的核心机密——TCP/IP协议体系。没有它&#xff0c;就不会有现今这般高效便捷的网络生活体验&#xff0c;无论在线教育、远程办公&#xff0c;抑或是电子商务、社交媒体…

Filebeat将csv导入es尝试

一、安装 在docker中安装部署ELKfilebeat 二、主要配置 - type: log # Change to true to enable this input configuration. enabled: true # Paths that should be crawled and fetched. Glob based paths. paths: - /home/centos/pip_v2.csv #源路径 #…

生成式人工智能治理:入门的基本技巧

GenAI 以前所未有的速度调解并扰乱了“一切照旧”&#xff0c;同时带来了令人难以置信的力量&#xff0c;但也带来了不可否认的责任。当然&#xff0c;现代企业非常熟悉技术进步。然而&#xff0c;人工智能的到来&#xff08;和实施&#xff09;无疑引起了相当大的冲击&#xf…