JavaScript高级复习上(59th)

news2024/12/23 0:19:40

1、类 constructor 构造函数

constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个 constructor()

语法:

// 创建一个学生类
class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
}

类的实例化——创建对象

let Ty = new Student("TY", 22, "CS");
console.log(Ty.uname); // TY

注意:

1、通过 class 关键字创建类, 类名我们还是习惯性定义首字母大写
2、类里面有个 constructor 函数,可以接受传递过来的参数,同时返回实例对象
3、constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
4、生成实例 new 不能省略
5、最后注意语法规范, 创建类:类名后面不要加小括号。生成实例:类名后面加小括号, 构造函数不需要加 function

2、类中添加方法

语法:直接在类中写方法名和括号即可,如下所示。

class Student {
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}

创建实例:

let Ty = new Student("TY", 22, "CS");
Ty.sing(); // Ty会唱歌

注意:
方法之间不能加逗号分隔,同时方法不需要添加 function 关键字。

3、类的继承

1、继承

1、现实中的继承:子承父业,比如我们都继承了父亲的姓。
2、程序中的继承:子类可以继承父类的—些属性和方法。
语法:使用 extends 关键字。

class Son extends Father {
    // class body
}

2、super 关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。

class Person {
    constructor (uname, age) {
        this.uname =uname;
        this.age = age;
    }
}
class Student extends Person {
    constructor (uname, age, major) {
        // super 将子类的参数传递给父类构造函数,减少代码量
        super(uname, age);
        // 子类可以有自己独有的属性
        this.major = major;
    }
}
let rick = new Student("Rick", 22, "数学");

3、super 调用父类普通函数

class Parent {
    sayHi() {
        return "Father: hello";
    }
}
class Child extends Parent {
    sayHi() {
        // super 调用父类普通函数
        console.log(super.sayHi());
    }
}
let man = new Child();
man.sayHi(); // Father: hello

4、super 必须放到子类 this 之前

子类在构造函数中使用 super, 必须放到 this 前面。

class Father {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}
class Son extends Father {
    constructor(x, y, z) {
        super(x, y, z);
        this.z = this.z;
    }
}
let obj = new Son();

4、使用类的注意点

1、在 ES6 中类没有变量提升,所以必须先定义类,才能通过类实例化对象
2、类里面的共有属性和方法一定要加 this 使用
3、类里面的 this 指向问题:constructor 里面的 this 指向实例对象, 方法里面的 this 指向这个方法的调用者

5、构造函数存在的问题

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

虽然构造函数方法很好用,但是存在浪费内存的问题。
在这里插入图片描述
函数内容一样的函数sing(),会在内存中产生两份,占两份空间。 我们希望所有的对象使用同一个函数,这样就比较节省内存,于是就有了构造函数原型对象 prototype

6、构造函数原型对象prototype

1、构造函数通过原型分配的函数是所有对象所共享的。

2、JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。注意这个 prototype 就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

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

关键概念理解:

1、原型是一个对象,我们也称为 prototype 为原型对象。
2、原型的作用:共享方法

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function () {
        console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh.sing === zxy.sing); // true

上述代码将输出 true,因为 sing 方法已被共享。

7、对象原型 __ proto __

1、任何对象身上都会有一个属性 __ proto __,指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __ proto __原型的存在。

2、 __ proto __ 对象原型和构造函数的原型对象 prototype 是等价的,都是对象。

3、方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing, 如果没有sing
这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

4、__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype
在这里插入图片描述

8、constructor 构造函数

1、对象原型__proto__和构造函数原型对象prototype里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。 constructor 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

2、一般情况下,对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法,我们可以 给原型对象采取对象形式赋值,但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时,我们可以在修改后的原型对象中,添加一个 constructor 指向原来的构造函数。

function Human(uname, age) {
    this.uname = uname;
    this.age = age;
}
Human.prototype = {
    // 添加一个 constructor 指向原来的构造函数
    constructor: Human,      //
    sayHi: function () {
        console.log("Hey!");
    },
    eat: function () {
        console.log("Eat something.");
    }
}
let rick = new Human('rick', 35);

9、构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

10、原型链(重点)

在这里插入图片描述
1.只要是对象就有__proto__ 原型, 指向原型对象
2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
3.我们Object.prototype原型对象里面的__proto__原型 指向为 null

11、JavaScript 的成员查找机制(规则)

1.当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
2.如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象)。
3.如果还没有就查找原型对象的原型(Object的原型对象)。
4.依此类推一直找到 Object 为止(null)。
5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。

12、自己总结的原型链

说起原型链就要先说一下构造函数,什么是构造函数呢,它可以用来创建对象实例,当我们new了构造函数就会创建一个实例,但是构造函数有一个问题就是里面存放的函数方法每new一次就会多开辟一份内存空间,为了解决这个问题构造函数里面有一个属性叫prototype原型对象,专门存放公有的方法,实例对象怎么调用这个方法呢,因为所有对象身上都有对象原型__proto__,就可以通过它来调用,同时对象身上都有一个constructor 属性可以指回构造函数本身,原型链其实就是一个查找的过程,当我们想要查找对象实例身上的属性时先在本身找,找不到再用对象原型__proto__去原型对象prototype上找,再找不到再去原型对象的prototype上找,最终找不到返回最终指向null

13、扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能
注意:数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {}
只能是 Array.prototype.xxx= function(){} 的方式。

14、改变函数内部 this 指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的有 bind()call()apply() 三种方法。

1、call方法

call() 方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。

fun.call(thisArg, arg1, arg2, ...);

参数说明:

1、thisArg:在 fun 函数运行时指定的 this 值
2、arg1,arg2:传递的其他参数
3、返回值就是函数的返回值,因为它就是调用函数
4、因此当我们想改变 this 指向,同时想调用这个函数的时候,可以使用 call,比如继承36

2、apply方法(数组)

apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。

fun.apply(thisArg, [argsArray])

1、thisArg:在fun函数运行时指定的 this 值
2、argsArray:传递的值,必须包含在数组里面
3、返回值就是函数的返回值,因为它就是调用函数
4、因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值

let arr = [-10, 2, 12, 3, 1];
let max = Math.max.apply(Math, arr);
console.log(max); // 12

案例:

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

fn.apply(obj,[1,2]); // this会变成传入的obj,传入的参数必须是一个数组;
fn(1,2) // this指向window

当第一个参数为null、undefined的时候,默认指向window(在浏览器中)

3、bind方法(不会调用)

bind() 方法不会调用函数。但是能改变函数内部 this 指向。

let fn = fun.bind(thisArg, arg1, arg2, ...)

1、thisArg:在 fun 函数运行时指定的 this 值
2、arg1,arg2:传递的其他参数
3、返回由指定的 this 值和初始化参数改造的 原函数拷贝
4、因此当我们只是想改变 this 指向,并且不想调用这个函数的时候,可以使用 bind
5、bind方法和call很相似,第一参数也是this的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
6、改变this指向后不会立即执行,而是返回一个永久改变this指向的函数

unction fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

const bindFn = fn.bind(obj); // this 也会变成传入的obj ,bind不是立即执行需要执行一次
bindFn(1,2) // this指向obj
fn(1,2) // this指向window

4、apply、call、bind三者的区别

1、三者都可以改变函数的this对象指向
2、三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window
3、三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入
4、bind是返回绑定this之后的函数,不会调用函数,apply、call 则是立即执行

15、数组新增方法

迭代(遍历)方法:forEach()、map()、filter()、some()、every()

1、forEach()

forEach 方法用于遍历数组,不对原数组进行修改,没有返回值。

array.forEach(function(Value, index, arr), thisArg);

该方法接收一个函数 function 参数,其中,该函数内又有三个参数:

1、Value:数组当前项的值,最后输出Value就可以实现遍历了
2、index:数组当前项的索引
3、arr:数组对象本身
一般可以省略后面回调函数中后两个参数和 thisArg 参数,即:

array.forEach(function(Value));
<body>
    <script>
        // forEach 迭代(遍历) 数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素' + value);
            console.log('每个数组元素的索引号' + index);
            console.log('数组本身' + array);
            sum += value;
        })
        console.log(sum);
    </script>
</body>

2、map()

map() 方法遍历一个数组,首先创建一个新数组,新数组中的每个元素是是调用一次所提供的函数参数后的返回值,然后返回这个新数组。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2

3、filter()

对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组,注意它返回一个新数组。

4、some()

对数组每一项都运行传入的测试函数,如果至少有1个元素返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
console.log(someResult) // true

通俗点:查找数组中是否有满足条件的元素

5、every()

对数组每一项都运行传入的测试函数,如果所有元素都返回 true ,则这个方法返回 true

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false

16、Object.defineProperty()

Object.defineProperty() 定义对象中新属性或修改原有的属性。

Object.defineProperty(obj, prop, descriptor)

参数:

1、obj:必需。目标对象
2、prop:必需。需定义或修改的属性的名字
3、descriptor:必需。目标属性所拥有的特性
Object.defineProperty() 第三个参数 descriptor 说明: 以对象形式 { } 书写。

// descriptor 对象的参数值均为默认值
Object.defineProperty(obj, prop, {
    value: undefined,
    writable: false,
    enumerable: false,
    configurable: false
})

1、value:设置属性的值 默认为 undefined
2、writable:值是否可以重写。true | false 默认为 false
3、enumerable:目标属性是否可以被枚举。true | false 默认为 false
4、configurable:目标属性是否可以被删除或是否可以再次修改特性 true | false,默认为 false

descriptor 对象的参数默认值说明,使用 defineProperty 新增一个对象属性,该属性只读,不可迭代,不可再被修改特性。

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

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

相关文章

【CPP】string 类的模拟实现

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;前言&…

Angular 学习 之 Hello World !

目录 0.前言・前提&#xff08;Angular介绍&#xff09; 前言 前提&#xff08;node.js已经按照&#xff09; 1.安装・查看版本 2.创建・启动Angular工程 2.1.创建工程 2.2.启动工程 2.3.启动之后&#xff0c;浏览器访问&#xff0c;显示的效果 2.4.工程目录结构 3.各…

计算机毕业设计——基于html汽车商城网站页面设计与实现论文源码ppt(35页) HTML+CSS+JavaScript

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

Flutter高仿微信-第29篇-单聊

Flutter高仿微信系列共59篇&#xff0c;从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图&#xff1a; 实现代码&#xff1a; 单聊包含&#xff1a;文本、表情、语音、图片、小视频、…

HTML学生个人网站作业设计——HTML+CSS+JavaScript优分期大学生分期购物商城(7页)

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A…

Vue3【Composition API 的优势、新的组件(Fragment、Teleport、Suspense)、全局API的转移】

文章目录四、Composition API 的优势1.Options API 存在的问题2.Composition API 的优势五、新的组件1.Fragment2.Teleport3.Suspense六、其他1.全局API的转移2.其他改变四、Composition API 的优势 1.Options API 存在的问题 使用传统OptionsAPI中&#xff0c;新增或者修改一…

web前端网页设计与制作:HTML+CSS旅游网页设计——桂林旅游(3页) web前端旅游风景网页设计与制作 div静态网页设计

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…

Flink时间窗口语义

Flink时间窗口语义WarterMarker特点自定义水位线策略周期性水位线生成器&#xff08;Periodic Generator&#xff09;断点式水位线生成器&#xff08;Punctuared Generator&#xff09;在自定义数据源中发送水位线水位线的传递水位线总结窗口&#xff08;Window&#xff09;窗口…

spark-core-源码、Worker启动、sparksubmit提交、Driver启动

sparksubmit源码解析 在提交我们写好的jar包时候&#xff0c;用到submit命令&#xff0c;他的源码解析流程如上图 位于deploy里的SparkSubmit里面&#xff0c;根据main方法一点点run进去&#xff0c;分配我们传的参数&#xff0c;尤其是 val (childArgs, childClasspath, spa…

电脑屏幕亮度怎么调?四种自由调节亮度方式

现在的电脑是很方便的&#xff0c;可以说我们日常的生活中离不开电脑了。但是电脑屏幕亮度怎么调呢&#xff1f;这是一个问题&#xff0c;我们应该如何去调节&#xff1f;其实调节的方式有很多&#xff0c;我们根据自己的需求进行调节即可。接下来&#xff0c;为大家介绍四种电…

今日睡眠质量记录82分

昨天回去得比较晚了&#xff0c;不过睡眠质量还不错的&#xff0c;睡得比较沉&#xff0c;睡眠质量记录还不错的&#xff0c;大概有82分左右了。

计算机的发展史

文章目录计算机的发展史一&#xff0c;算盘二&#xff0c;纳皮尔骨筹三&#xff0c;帕斯卡林四&#xff0c;莱布尼茨步进计算器五&#xff0c;差分机六&#xff0c;分析机七&#xff0c;制表机八&#xff0c;微分分析机九&#xff0c;Mark I 计算机十&#xff0c;五代计算机计算…

如何使用CSS创建高级动画,这个函数必须掌握

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势&#xff0c;学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 我们每天都在网上摸鱼&#xff0c;作为前端开发人员&#xff0…

SD-WAN行业经常说CPE、uCPE、vCPE是什么意思,各自有什么区别和应用场景?

我们先来看下传统的硬件终端CPE到底是什么。 CPE&#xff08;CustomerPremisesEquipment&#xff0c;客户端设备&#xff09;是指位于用户端的网络终端设备&#xff0c;用于与运营商对接服务&#xff0c;是网络解决方案的重要组成部分&#xff0c;通常是路由器、防火墙或者路由…

Linux 性能分析命令详解

top 命令 top -1 按数字1可以看到 多个核&#xff0c;每个核的cpu的使用情况 监控工具\平台来收集cpu的使用率 是所有cpu数量的一个总体的使用率 top -E 按大写字母E可以看到不同单位的内存使用情况 KB MB GB TB mem&#xff1a; buffer cache swap buffer是磁盘虚拟出来…

99-104-Hadoop-MapReduce-排序:

99-Hadoop-MapReduce-排序&#xff1a; WritableComparable 排序 排序是MapReduce框架中最重要的操作之一。 MapTask和ReduceTask均会对数据按 照key进行排序。该操作属于 Hadoop的默认行为。任何应用程序中的数据均会被排序&#xff0c;而不管逻辑上是否需要。 默认排序是按…

PID控制原理基本介绍(图解)

PID控制原理基本介绍(图解) 这里先以一个阶跃响应做图解说明: 如下图所示,目标值设定为单位1,随着我们逐渐增大比例系数Kp,可以看到系统相应速度逐渐加快,但是始终存在稳态误差, 如下图所示,引入积分环节后,随着积分控制系数Ki逐渐加大,误差逐渐减小,并最终达…

SSM毕设项目 - 基于SSM的婚纱摄影网站(含源码+论文)

文章目录1 项目简介2 实现效果2.1 界面展示3 设计方案3.1 概述3.2 系统流程3.2.1 系统开发流程3.3 系统结构设计4 项目获取1 项目简介 Hi&#xff0c;各位同学好呀&#xff0c;这里是M学姐&#xff01; 今天向大家分享一个今年(2022)最新完成的毕业设计项目作品&#xff0c;【…

OPNET Modeler 的安装及其相关配置

文章目录前言一、安装包下载1、OPNET Modeler 安装包下载2、Visual Studio 2010 安装包下载二、配置C/C环境变量三、OPNET Modeler 的安装1、安装 modeler_145A_PL1_7116_win2、安装 modeler_docs_28-Jan-2008_win3、安装 models_145A_PL1_27Feb08_win4、安装 OPNET.Modeler.14…

PLC中ST编程的基础知识

程序组织单元&#xff0c;简称POU&#xff1b;完整的PLC程序就是由无数个POU组成的&#xff1b; FB&#xff1a;功能块&#xff0c;也称函数块&#xff0c;执行时产生一个或多个值&#xff0c;一个功能块可以创建多个实例&#xff1b; VAR_IN&#xff1a;输入变量&#xff0c…