学习前端第三十七天(静态属性静态方法、类检查、错误处理)

ops/2024/10/23 18:23:53/

一、静态属性和静态方法

1、静态属性静态方法

在属性和方法前加上static,创建属于类自己的属性和方法

       class Person {// 加static,属于类自己的static name = "xc";   // 类的name属性static height = 183;  // 类的height属性static age = 20;      // 类的age属性static sayName() {    // 类的sayName方法console.log(this.name)}static sayHeight() {  // 类的sayHeight方法console.log(this.height)}// 不加static,属于类创建的对象的name = "jack";     // 调用类创建的对象里面的属性height = 165;     // 调用类创建的对象里面的属性sayName() {        // 调用类创建的对象里面的方法console.log(this.name)}sayHeight() {        // 调用类创建的对象里面的方法console.log(this.height)}}Person.sayName();    // xcPerson.sayHeight();    // 183new Person().sayName(); // jacknew Person().sayHeight(); // 165

2、继承静态属性静态方法

本质为原型继承,将Admin的原型设置为Person

使用方法:class Admin extends Person { };  类Admin现在可以调用Person里面的方法了

        class Person {static uname = "xc";static age = 20;static sayName() {console.log(this.uname)}username = "jack";sayName() {console.log(this.username)}}class Admin extends Person { };console.log(Admin.age);   // 20Admin.sayName();  //  xc

 

二、类检查

三种检测数据类型的方法

第一种:typeof

以字符串的形式返回数据类型

优点:简单快捷

缺点:只能检测除null外的基本数据类型和function

第二种:instanceof

判断某个对象是否属于一种引用数据类型,返回布尔类型

例: console.log([1, 2, 3] instanceof Array); // true

优点:可以判断出复杂的引用数据类型

缺点:不能检测基本数据类型

第三种:Object.prototype.toString.call()

 console.log(Object.prototype.toString.call(100)) ; // [ object Number ]

优点:能检测出所有数据类型

缺点:IE6下,undefined和null均为Object

三、错误处理

1、try....catch....

try { // 代码... }

catch (err) { // 错误捕获 }

如果 try 中的代码块出错,停止执行try中的代码,仍然继续执行 catch 中的及后面的代码块

仅对运行时的 error 有效,语法错误无效

        try {console.log(ad);say();console.log("....");} catch (error) {  // 错误信息被存在了变量“error”中console.dir(error);console.log(error.name);console.log(error.message);console.log(error.stack);}

name

Error 名称。例如,对于一个未定义的变量,名称是 "ReferenceError"

message

关于 error 的详细文字描述。

还有其他非标准的属性在大多数环境中可用。其中被最广泛使用和支持的是:

stack 

当前的调用栈:用于调试目的的一个字符串,其中包含有关导致 error 的嵌套调用序列的信息。

throw  : 

 // Throw 任意位置中断当前代码执行,抛出错误信息

        console.log(1)

        console.log(2)

        // throw 后面必须是new Error()构建的对象,里面有 name:"";  message:"";  stack:"":

        throw new Error("message hello");

        console.log(3)

        console.log(4)

 

try。。。catch。。和throw结合,自定义什么时候报错,且报错信息是什么

        let age;try {   // 使用try缩小报错影响范围age = prompt("age?")if (+age > 0 && age < 130) {console.log(age + "岁");} else {throw new Error("error age");}console.log("Right age");  // age是否正确决定这行是否执行} catch (error) {console.log(error)}

try后面有个finally代码,一定会执行

        // try...catch(error)...finally...try {throw new Error();} catch (error) {console.log(error); // try中报错时执行} finally {console.log("finally"); // 一定会执行,不管是否报错}

 

全局catch

定义在开头,程序有错误时调用,停止执行当前程序

        window.onerror = function (message, url, line, col, error) {console.log("hello");console.dir(error)};throw new Error("error");console.log("1");console.log("1");

 

2、自定义Error,扩展Error

使用类继承和,自定义什么时候报错,且报错信息是什么,我们可以语义化错误,设置不同的情景错误

        // 自定义Error,设置不同的情景错误,都继承于Errorclass ageError extends Error {name = "ageError";};class phoneError extends Error {name = "phoneError";};class emailError extends Error {name = "emailError";};try {// throw new ageError("年龄错误");// throw new phoneError("手机号码错误");throw new emailError("邮箱号码错误")} catch (error) {console.log(error.name);console.log(error.message);}


http://www.ppmy.cn/ops/41668.html

相关文章

nginx入门_01

1.安装 yum install epel-release -y # 安装yum的扩展包 yum install nginx -y systemctl start nginx.service #启动nginx systemctl enable nginx.service # netstat -lntup # 查看端口占用情况 # 可以看到nginx默认占用了80端口 2.nginx配置 # 注意配置文件的语法格式…

AI学习指南数学工具篇-PCA的应用场景

AI学习指南数学工具篇-PCA的应用场景 在人工智能领域&#xff0c;数据处理是非常重要的一环。对于大量高维数据&#xff0c;我们往往需要进行数据降维来减少计算复杂度&#xff0c;同时利用可视化工具对数据进行分析和理解。主成分分析&#xff08;Principal Component Analys…

2024年华为OD机试真题- 手机App防沉迷系统-(C++)-OD统一考试(C卷D卷)

题目描述: 智能手机方便了我们生活的同时,也侵占了我们不少的时间。“手机App防沉迷系统”能够让我们每天合理的规划手机App使用时间,在正确的时间做正确的事。 它的大概原理是这样的: 1、在一天24小时内,可注册每个App的允许使用时段; 2、一个时段只能使用一个App,举例…

react组件渲染性能优化之函数组件-memo使用

函数组件赋值相同的值视图不会渲染&#xff0c;类组件会&#xff0c;因为函数组件默认就阻止了 import {useState} from react export default function App() {const [counter, setCounter] useState(1)console.log(App组件渲染了);return(<div><h1>{counter}&l…

设计模式--适配器模式

引言 在软件开发中&#xff0c;适配器模式(Adapter Pattern) 是一种结构型设计模式&#xff0c;其核心思想在于将一个接口转换为客户期望的另一个接口&#xff0c;使得原本由于接口不兼容而无法协同工作的类能够一起工作。适配器模式主要用于解决两个类之间的接口不匹配问题&a…

数据结构——二叉树知识点详解!

引言&#xff1a;本篇博客将详细介绍到数据结构中的又一位大将——二叉树。它也是我们目前学到的第一个非线性的数据结构。并且本章将学到的概念居多&#xff0c;希望大家可以理解并牢记。 更多有关C语言和数据结构知识详解可前往个人主页&#xff1a;计信猫 目录 一&#xff0…

实现腾讯地图的接口调用以及微信小程序的地图标注

目录 微信小程序端1. 引入腾讯地图SDK2. 使用地图组件3. 地图页面编写4. 地图标注 Java后端业务逻辑1. 引入腾讯地图Java SDK2. 配置API密钥3. 调用腾讯地图API4. 提供小程序调用的接口 总结 要实现腾讯地图的接口调用以及微信小程序的地图标注&#xff0c;需要分为两个部分&am…

# 从浅入深 学习 SpringCloud 微服务架构(十六)

从浅入深 学习 SpringCloud 微服务架构&#xff08;十六&#xff09; 一、SpringCloudStream&#xff1a;自定义消息通道 1、在子工程 stream_product &#xff08;子模块&#xff09;中,创建 自定义的消息通道类 MyProcessor.java /*** spring_cloud_demo\stream_product…