• 【JavaEE】JavaScript

    JavaScript

    文章目录


    JS运行通常是在浏览器上~

    ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=E%3A%5CTypora_note%5Cjavaweb%5CJavaweb.assets%5Cimage-

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    组成

    • ECMAScript(简称 ES): JavaScript 语法

    • DOM: 页面文档对象模型, 对页面中的元素进行操作

    • BOM: 浏览器对象模型, 对浏览器窗口进行操作

    书写方式

    行内式
        <input type="button" value="这是一个按钮" onclick="alert('哈哈哈哈哈')" name="" id="">

    • 1
        <input type="button" value="这是一个按钮" onclick='alert("哈哈哈哈哈")' name="" id="">

    • 1

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    内嵌式
    <script>
    alert('hhhhhhh')
script>

    • 1
    • 2
    • 3
    外部式（推荐写法）
    <body>
    <script src="./demo02.js">script>
body>

    • 1
    • 2
    • 3
    alert('我在学js')

    • 1

    输入输出

    输入：prompt

    // 弹出一个输入框
prompt("请输入您的姓名:");

    • 1
    • 2

    输出：alert

    // 弹出一个输出框
alert("hello");

    • 1
    • 2

    输出：console.log

    // 向控制台输出日志
console.log("这是一条日志");

    • 1
    • 2

    变量

    创建
    var name = 'zhangsan';
var age = 20;

    • 1
    • 2
    var name = "guagtouqiang"
console.log(name)
let age = 30
console.log(age)

    • 1
    • 2
    • 3
    • 4

    let比var出现的晚，意味着避免了var这块定义变量的时候的一些缺陷，如果使用let定义变量，此时变量生命周期，作用域，基本上和Java一样。

    JS定义变量的时候，不需要对变量指定类型

    在JS中对于数字只有一种类型，数值类型

    动态类型
    1. 什么是强类型变量，什么是弱类型变量？

    • 强类型变量：意味着不同类型之间变量进行赋值的时候，，需要进行一定的手段，即强制类型转换

    • 弱类型变量：在不同类型之间变量进行赋值的时候，可以直接赋值

    <script>
    a=1
    b='b'
    b=a
    console.log(b)
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1. 什么是动态类型变量，什么是静态类型变量？
    • 动态类型变量：代码在执行过程中，变量类型可以随时发生变化
    • 静态类型变量：意味着定义的时候是什么类型，在运行过程中就是什么类型
    script>
    a=1
    console.log(typeof(a))
    b='b'
    a=b
    console.log(typeof(a))
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    基本数据类型

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    数字类型
    let a = 10
    console.log(typeof(a))
    a = a / 3
    console.log(a)
    console.log(typeof(a))

    • 1
    • 2
    • 3
    • 4
    • 5

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    特殊数字值

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    注意:

    1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity

    2. ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.

    3. 可以使用 isNaN 函数判定是不是一个非数字.

    console.log(isNaN(10));  // false
console.log(isNaN('hehe' - 10));  // true

    • 1
    • 2
    String
    var a = "haha";
var b = 'hehe';
var c = hehe;    // 运行出错

    • 1
    • 2
    • 3
    var msg = "My name is "zhangsan"";    // 出错
var msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引
号. 
var msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号

    • 1
    • 2
    • 3
    • 4
    • 5
    转义字符

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    求长度

    使用 String 的 length 属性即可

    var a = 'hehe';
console.log(a.length);
//4
var b = '哈哈';
console.log(b.length);
//2

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    单位为字符的数量

    字符串拼接

    使用 + 进行拼接

    var a = "my name is ";
var b = "zhangsan";
console.log(a + b);

    • 1
    • 2
    • 3

    数字和字符串也可以进行拼接

    var c = "my score is ";
var d = 100;
console.log(c + d);

    • 1
    • 2
    • 3

    认准相加的变量到底是字符串还是数字

    console.log(100 + 100);     // 200
console.log('100' + 100);   // 100100

    • 1
    • 2
    布尔类型

    表示 “真” 和 “假”

    Boolean 参与运算时当做 1 和 0 来看待

    console.log(true + 1);
console.log(false + 1)

    • 1
    • 2
    undefined未定义数据类型

    如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

    var a;
console.log(a)

    • 1
    • 2

    undefined 和字符串进行相加, 结果进行字符串拼接

    console.log(a + "10");  // undefined10

    • 1

    undefined 和数字进行相加, 结果为 NaN

    console.log(a + 10);

    • 1
    null

    null 表示当前的变量是一个 “空值”.

    var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

    • 1
    • 2
    • 3

    注意

    • null 和 undefined 都表示取值非法的情况, 但是侧重点不同.

    • null 表示当前的值为空. (相当于有一个空的盒子)

    • undefined 表示当前的变量未定义. (相当于连盒子都没有）

    运算符

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • == 比较的是变量的内容
    • ===比较的是内容+数据类型
    let a = 10
let b  = "10"
alert(a == b)

    • 1
    • 2
    • 3

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    let a = 10
let b  = "10"
alert(a === b)

    • 1
    • 2
    • 3

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    条件语句

    if语句

    基本语法格式

    条件表达式为 true, 则执行 if 的 { } 中的代码

    // 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    三元表达式

    是 if else 的简化写法.

    条件 ? 表达式1 : 表达式2

    • 1

    条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.

    注意, 三元表达式的优先级是比较低的.

    switch
    switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    // 用户输入一个整数, 提示今天是星期几
    var day = prompt("请输入今天星期几：>")
    switch (parseInt(day)) {
        case 1:
            console.log("星期一");
            break;
        case 2:
            console.log("星期二");
            break;
        case 3:
            console.log("星期三");
            break;
        case 4:
            console.log("星期四");
            break;
        case 5:
            console.log("星期五");
            break;
        case 6:
            console.log("星期六");
            break;
        case 7:
            console.log("星期日");
            break;
        default:
            console.log("输入有误");
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    循环语句

    while循环
    while (条件) {
    循环体;
}

    • 1
    • 2
    • 3
    continue

    结束这次循环

    吃五个李子, 发现第三个李子里有一只虫子, 于是扔掉这个, 继续吃下一个李子

    var i = 1;
while (i <= 5) {
    if (i == 3) {
        i++;
        continue;
   }
    console.log("我在吃第" + i + "个李子");
    i++;
}
我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    break

    结束整个循环

    吃五个李子, 发现第三个李子里有半个虫子, 于是剩下的也不吃了.

    var i = 1;
while (i <= 5) {
    if (i == 3) {
        break;
   }
    console.log("我在吃第" + i + "个李子");
    i++;
}
我在吃第1个李子
我在吃第2个李子

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    for循环
    for (表达式1; 表达式2; 表达式3) {
 循环体
}

    • 1
    • 2
    • 3

    数组

    创建数组

    使用 new 关键字创建

    // Array 的 A 要大写
var arr = new Array();

    • 1
    • 2

    使用字面量方式创建 [常用]

    var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

    • 1
    • 2

    注意：JS 的数组不要求元素是相同类型

    获取数组元素

    使用下标的方式访问数组元素(从 0 开始）

    var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = '小猫凯迪';
console.log(arr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    如果下标超出范围读取元素, 则结果为 undefined

    console.log(arr[3]);   // undefined
console.log(arr[-1]);  // undefined

    • 1
    • 2

    注意: 不要给数组名直接赋值, 此时数组中的所有元素都没了.

    相当于本来 arr 是一个数组, 重新赋值后变成字符串了.

    var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';

    • 1
    • 2
    新增数组元素
    1. 通过修改length 新增

    相当于在末尾新增元素. 新增的元素默认值为 undefined

    var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);

    • 1
    • 2
    • 3
    • 4

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    2.通过下标新增

    如果下标超出范围赋值元素, 则会给指定位置插入新元素

    var arr = [];
arr[2] = 10;
console.log(arr)

    • 1
    • 2
    • 3

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    此时这个数组的 [0] 和 [1] 都是 undefined

    3. 使用 push 进行追加元素

    代码示例: 给定一个数组, 把数组中的奇数放到一个 newArr 中.

    var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 != 0) {
        newArr.push(arr[i]);
   }
}
console.log(newArr);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    删除数组中的元素

    使用 splice 方法删除元素

    var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    目前这已经用到了数组中的一些属性和方法.

    arr.length, length 使用的时候不带括号, 此时 length 就是一个普通的变量(称为成员变量, 也叫属性)

    arr.push(), arr.splice() 使用的时候带括号, 并且可以传参数, 此时是一个函数 (也叫做方法)

    函数

    语法格式
    // 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.
    function hello() {
    console.log("hello");
}
// 如果不调用函数, 则没有执行打印语句
hello();

    • 1
    • 2
    • 3
    • 4
    • 5

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    • 调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.

    • 函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)

    // 调用函数
hello();
// 定义函数
function hello() {
    console.log("hello");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    function helloSb(num, name) {
        console.log(num + "hello" + name)
        return 1
    }
    // hello()
    let a = helloSb(1, "sb")
    console.log(typeof(a))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    参数个数

    实参和形参之间的个数可以不匹配. 但是实际开发一般要求形参和实参个数要匹配

    1. 如果实参个数比形参个数多, 则多出的参数不参与函数运算
    sum(10, 20, 30);    // 30

    • 1
    1. 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined
    sum(10);    // NaN, 相当于 num2 为 undefined.

    • 1

    JS 的函数传参比较灵活, 这一点和其他语言差别较大. 事实上这种灵活性往往不是好事

    函数表达式

    另外一种函数的定义方式

    var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    此时形如 function() { } 这样的写法定义了一个匿名函数, 然后将这个匿名函数用一个变量来表示. 后面就可以通过这个 add 变量来调用函数了.

    JS中的`arguments`是一个特殊的对象，在函数内部可以访问到。它包含了函数被调用时传递的所有参数。

`arguments`对象类似于一个数组，但它并不是一个真正的数组。它可以用类似于数组的方式访问函数参数的值，例如`arguments[0]`表示第一个参数，`arguments[1]`表示第二个参数，以此类推。

`arguments`对象还有一个`length`属性，用于获取传递给函数的参数数量。

此外，`arguments`对象还有一些附加的方法和属性，例如`arguments.callee`表示当前正在执行的函数自身，`arguments.caller`表示调用当前函数的函数，但在严格模式下，访问`arguments.callee`和`arguments.caller`会导致错误。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    JS 中函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值

    作用域

    某个标识符名字在代码中的有效范围.

    在 ES6 标准之前, 作用域主要分成两个

    • 全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.

    • 局部作用域/函数作用域: 在函数内部生效.

    // 全局变量
var num = 10;
console.log(num);
function test() {
    // 局部变量
     var num = 20;
    console.log(num);
}
function test2() {
    // 局部变量
    var num = 30;
    console.log(num);
}
test();
test2();
console.log(num);
// 执行结果
10
20
30
10

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    创建变量时如果不写 var, 则得到一个全局变量.

    function test() {
 num = 100;
}
test();
console.log(num);
// 执行结果
100

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    另外, 很多语言的局部变量作用域是按照代码块(大括号)来划分的, JS 在 ES6 之前不是这样的.

    if (1 < 2) {
 var a = 10;
}
console.log(a)；

    • 1
    • 2
    • 3
    • 4
    作用域链

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.

    var num = 1;
function test1() {
    var num = 10;
    function test2() {
        var num = 20;
          console.log(num);
   }
    test2();
}
test1();
// 执行结果
20

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找.

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    对象

    基本概念

    对象是指一个具体的事物.

    “电脑” 不是对象, 而是一个泛指的类别. 而 “我的联想笔记本” 就是一个对象.

    在 JS 中, 字符串, 数值, 数组, 函数都是对象.

    每个对象中包含若干的属性和方法.

    • 属性: 事物的特征.

    • 方法: 事物的行为.

    例如, 你有一个女票.

    她的身高体重三围这些都是属性.

    她的唱歌, 跳舞, 暖床都是方法.

    对象需要保存的属性有多个, 虽然数组也能用于保存多个数据, 但是不够好.

    例如表示一个学生信息. (姓名蔡徐坤, 身高 175cm, 体重 170斤)

    var student = [‘蔡徐坤’, 175, 170];

    但是这种情况下到底 175 和 170 谁表示身高, 谁表示体重, 就容易分不清

    JavaScript 的对象 和 Java 的对象概念上基本一致. 只是具体的语法表项形式差别较大.

    创建对象
    1.使用字面量创建对象[常用]
    var a = {};  // 创建了一个空的对象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170t,
    sayHello: function() {
        console.log("hello");
   }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    • 使用 { } 创建对象

    • 属性和方法使用键值对的形式来组织.

    • 键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无

    • 键和值之间使用 : 分割.

    • 方法的值是一个匿名函数.

    使用对象的属性和方法:

    // 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 () 
student.sayHello();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    2.使用new Object创建对象
    var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    注意, 使用 { } 创建的对象也可以随时使用 student.name = “蔡徐坤”; 这样的方式来新增属性.

    3.使用构造函数创建对象

    前面的创建对象方式只能创建一个对象. 而使用构造函数可以很方便 的创建 多个对象.

    function Prople(name,height,weight){
        this.name= name
        this.height = height
        this.weight  =weight
        this.Say = function(){
            console.log(name + "fuck you")
        }
    }
    let ikun = new Prople("ikun", 1, 1)
    let cxk = new Prople("cxk", 2, 2)
    let xhz = new Prople("xhz", 3, 3)
    console.log(ikun)
    ikun.Say()
    console.log(cxk)
    cxk.Say()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    例如: 创建几个猫咪对象

    var mimi = {
    name: "咪咪",
    type: "中华田园喵",
    miao: function () {
        console.log("喵");
   }
};
var xiaohei = {
    name: "小黑",
    type: "波斯喵",
    miao: function () {
        console.log("猫呜");
   }
}
var ciqiu = {
    name: "刺球",
    type: "金渐层",
    miao: function () {
        console.log("咕噜噜");
   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    此时写起来就比较麻烦. 使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程.

    基本语法
    function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    使用构造函数重新创建猫咪对象

    function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function () {
        console.log(sound); // 别忘了作用域的链式访问规则
   }
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
console.log(mimi);
mimi.miao();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    new关键字

    new 的执行过程:

    1. 先在内存中创建一个空的对象 { }

    2. this 指向刚才的空对象(将上一步的对象作为 this 的上下文)

    3. 执行构造函数的代码, 给对象创建属性和方法

    4. 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)

    new关键字文档

    对象
    JavaScript的对象和Java的对象的区别
    1.JavaScript 没有类的概念

    对象其实就是 “属性” + “方法” .

    类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”

    在 JavaScript 中的 “构造函数” 也能起到类似的效果.

    而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象

    在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.

    2.JavaScript对象不区分"属性"和"方法"

    JavaScript中的函数是"一等公民"，和普通的变量一样.存储了函数的变量能够通过()来进行调用执行.

    3.JavaScript对象没有private/public等访问控制机制.

    对象中的属性都可以被外界随意访问，

    4.JavaScript对象没有"继承"

    继承本质就是"让两个对象建立关联”.或者说是让一个对象能的够重用另一个对象的属性方法
    JavaScript中使用"原型"机制实现类似的效果，

    class关键字
    class People {
        constructor(name, height, weight) {
            this.name = name
            this.height = height
            this.weight = weight 
        }

        Say(){
            console.log(this.name + "唱跳rap篮球")
        }
    }

    let ikun = new People("ikun",175,75)
    console.log(ikun)
    ikun.Say()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    static变量
    class People {
        constructor(name, height, weight) {
            this.name = name
            this.height = height
            this.weight = weight
        }

        Say() {
            console.log(this.name + "唱跳rap篮球")
        }
        static other = "other"
    }

    let ikun = new People("ikun", 175, 75)
    console.log(ikun)
    ikun.Say()

    alert(People.other)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    class People {
        constructor(name, height, weight) {
            this.name = name
            this.height = height
            this.weight = weight
        }

        Say() {
            console.log(this.name + "唱跳rap篮球")
        }
        static other = "other"
        static Sum(){
            return 100;
        }
    }

    let ikun = new People("ikun", 175, 75)
    console.log(ikun)
    ikun.Say()

    alert(People.other)
    alert(People.Sum())

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    但是这里不能ikun.Sum(),因为Sum()没有定义

    继承
    class People {
        constructor(name, height, weight) {
            this.name = name
            this.height = height
            this.weight = weight
        }

        Say() {
            console.log(this.name + "唱跳rap篮球")
        }
        static other = "other"
        static Sum(){
            return 100;
        }
    }

    let ikun = new People("ikun", 175, 75)
    console.log(ikun)
    ikun.Say()

    alert(People.other)
    alert(People.Sum())

    class Student extends People{
        constructor(name, height, weight,number){
            super(name,height,weight)
            this.number = number
        }
    }

    let student = new Student("cxk",188,70,22202012)
        console.log(student)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    class People {
        constructor(name, height, weight) {
            this.name = name
            this.height = height
            this.weight = weight
        }

        Say() {
            console.log(this.name + "唱跳rap篮球")
        }
        static other = "other"
        static Sum() {
            return 100;
        }
    }

    let ikun = new People("ikun", 175, 75)
    console.log(ikun)
    ikun.Say()
      
    alert(People.other)
    alert(People.Sum())

    class Student extends People {
        constructor(name, height, weight, number) {
            super(name, height, weight)
            this.number = number
        }
        Say() {
            alert(this.name)
        }
    }

    let student = new Student("cxk", 188, 70, 22202012)
    console.log(student)
    student.Say()


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    至此，前端三件套的基本知识到此完结，接下来还会更新JavaScript的webAPI，敬请期待~

  • 相关阅读:
    Oracle解析exp、imp及常见的问题
    我的idea安装的几个插件
    1024程序员节 | 电脑软件：SmartSystemMenu(窗口置顶工具)介绍
    java毕业设计晨曦文学社在线投稿系统的设计与实现mybatis+源码+调试部署+系统+数据库+lw
    vue init webpack xxx报错timeout
    Python 中的 tqdm() 方法
    设计模式——备忘录模式(memento)
    第三讲 Gradient Tutorial梯度下降与随机梯度下降
    RK3588S上从训练Minist到部署Minist仓库介绍
    LLM大模型4位量化实战【GPTQ】
  • 原文地址：https://blog.csdn.net/m0_73075027/article/details/133469359