JavaScript高级（一）

已于 2022-11-07 18:58:59 修改
阅读量46 收藏
点赞数
分类专栏： JavaScript高级 文章标签： javascript 前端 开发语言
于 2022-10-31 18:27:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47743942/article/details/127620691
版权

JavaScript高级


 
JavaScript高级部分之基础总结，如果有任何问题欢迎讨论或留言
 

1. 数据类型

分类：基本数据类型，引用数据类型

基本数据类型（值类型）：
  String：任意字符串
  Number： 任意数字
  Boolean： true/false
  Undifined： undifined
  Null：null
引用数据类型（引用类型）：
  Object：任意对象
    Function对象：特别对象（可以执行）
    Array对象：特别对象（数值下标，数据有序）

判断数据类型：
  typeof：返回数据类型的字符串表达，可以判断：undifined、数值、字符串、布尔值，不能判断：null和object(null的typeof为’object’)，object和array(array的typeof为’object’)
  instanceof：判断对象的具体类型
  ===：全等，不会自动类型转换，可以判断：undifined、null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //基本数据类型
        var a;
        console.log(a,typeof a==='undifined',a===undefined);//undifined 'undifined' true true
        console.log(undefined === 'undifined');
        a=4;
        console.log(typeof a === 'number');
        a = 'zhangsan';
        console.log(typeof a === 'string');
        a = true;
        console.log(typeof a === 'boolean');
        a = null;
        console.log(typeof a, a===null);//'object' true
        //对象数据类型
        var obj = {
            o1:[1,'abc',console.log],
            o2:function(){
                console.log('o2');
                return function(){
                    return "lisi";
                }
            }
        };
        console.log(obj instanceof(Object), obj instanceof Array);//true false
        console.log(obj.o1 instanceof Array, obj.o1 instanceof Object);//true true
        console.log(obj.o2 instanceof Function, obj.o2 instanceof Object);//true true

        console.log(typeof obj.o2 === 'function');//true

        console.log(typeof obj.o1[2] === 'function');//true

        console.log("--------------------");
        obj.o1[2](4);//4
        console.log(obj.o2()());//'o2','lisi'

    </script>
</head>
<body>  
</body>
</html>

在这里插入图片描述

 

2. 数据类型问题

实例：实例对象
类型：类型对象

undifined和null的区别
   undifined代表定义未赋值，null定义并赋值了，只是值为null

什么时候给变量赋值为null？
  初始赋值，表明将要赋值为对象，结束前让对象成为垃圾对象被垃圾回收期回收

严格区别变量类型与数据类型
数据的类型：
   基本类型
   对象类型
变量的类型（变量内存值的类型）：
   基本类型：保存的是基本类型的数据
   引用类型：保存的是地址值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a;
        console.log(a);
        a = null;
        console.log(a);

        var b = null;//初始赋值为null，表明将要赋值为对象
        b = ['zhansan',18];
        b = null;//设置为null，成为垃圾对象被回收

        var c = function(){

        };
        console.log(typeof c);//'function'
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

3. 数据、变量和内存

什么是数据：
   存储在内存中代表特定信息的‘东东’，本质上是0101…
   数据特点：可传递、可运算
   一切皆数据
   内存中所有操作的目标是数据，包括算术运算、逻辑运算、赋值运算、运行函数等

什么是内存：
   内存条通电后产生的可存储数据的空间（临时的）
   内存产生和死亡：内存条（电路板）通电产生内存空间存储数据断点内存空间和数据都消失
   一块小内存的2个数据：内部存储的数据、地址值
   内存分类：栈（全局变量、局部变量）、堆（对象）

什么是变量：
   可以变化的量，由变量名和变量值组成
   每个变量都对应一块小内存，变量名用来查找对应的内存，变量值是内存中保存的数据

内存、数据、变量三者之间的关系：
   内存是用来存储数据的（临时）空间，变量是内存的标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = 18;
        console.log(age);

        var obj = {name:'Tom'};
        console.log(obj.name);

        function fun(){
            var obj = {name:'Tom'};
        }

        var a = 3;
        var b = a + 2;
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

4. 引用变量赋值问题

引用变量赋值问题：
  2个引用变量指向同一变量，通过一个变量修改对象内部数据，另一变量看到的是修改之后的数据
  2个引用变量指向同一对象，让其中一个变量指向另一个变量，另一个引用变量依然指向前一个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj1 = {name:'Tom'};
        var obj2 = obj1;
        obj2.age = 12;
        console.log(obj1.age);//12
        function fn(obj){
            obj.name = 'Jerry';
        }
        fn(obj1);
        console.log(obj2.name);//Jerry

        var a = {age:18};
        var b = a;
        a = {name:'zhangsan',age:20};
        b.age = 22;
        console.log(b.age, a.name, a.age);//22 'zhangsan' '20'

        function fc(obj){
            obj = {age:24};
        }
        fc(a);
        console.log(a.age);//20
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

【注意】fn函数里面对象属性的赋值和fc函数对象的赋值是不一样的，特别注意20的输出

在这里插入图片描述

 

在这里插入图片描述

 

5. 数据传递问题

问题：在JS调用函数时传递变量参数时，是值传递还是引用传递？
  理解1：都是值（基本值/地址值）传递
  理解2：可能是值传递，也可能是引用传递（地址值）

问题：JS引擎如何管理内存？
1.内存生命周期
   分配小内存空间，得到它的使用权
   存储数据，可以反复进行操作
   释放小内存空间
2.释放内存
   局部变量：函数执行完自动释放
   对象：成为垃圾对象由垃圾回收期回收

【注意】全局变量不会释放，否则无法使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 3;//全部变量a
        function fun(a){//局部变量a，形参 a = a
            a = a + 1;
            console.log(a);
        }
        fun(a);//4,局部变量a
        console.log(a);//3,输出全局变量a

        function fun2(obj){
            console.log(obj.name);
        }
        var obj = {name:"zhangsan"};
        fun2(obj);//"zhangsan"

        console.log("-----------------------");
        var a = 3;
        var obj = {};
        obj = null;
        function fun3(){
            var b = 4;
        }
        fun3();//b是自动释放，b所指向的对象是在后面某个时刻由垃圾回收期回收
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

【注意】此时b已释放，无法输出

 

6. 对象

什么是对象？
  多个数据的封装体
  用来保存多个数据的容器
  一个对象代表现实中的一个事物

为什么要用对象？
   统一管理多个数据

对象由什么组成？
   属性：属性名（字符串，引号一般可以不写）和属性值（任意类型）组成
   方法：一种特别的属性（属性值是函数）

如何访问对象内部数据？
   .属性名：编码简单，但有时不能用
   [‘属性名’]：编码复杂，能通用
   特殊情况不能用.属性名方式：
     1.属性名包含特殊字符：- 空格
     2.属性名不确定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var p = {
            name:"Tom",
            age:12,
            setName:function(name){
                this.name = name;
            },
            setAge:function(age){
                this.age = age;
            }
        }
        console.log(p.name, p.setName);
        p.setName('Jerry');
        
        p['setAge'](18);
        console.log(p.age);

        // p.content-type = "js"; //包含特殊字符
        p['content-type'] = 'js';

        var propName = 'zhangsan';
        var value = 18;
        // p.propName = value;
        p[propName] = value; //属性名不确定

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

7. 函数

什么是函数？
   实现特定功能的n条语句的封装体
   只有函数是可以执行的，其它类型数据不能执行

为什么要用函数？
   提高代码复用
   便于阅读交流

如何定义函数？
   函数声明
   表达式

如何调用（执行）函数？
   test( )：直接调用
   obj.teest( )：通过对象调用
   new test( )：new调用
   test.call/apply(obj)：临时让test成为obj的方法进行调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showInfo(age){
            if(age<18){
                console.log("未成年");
            }else if(age>60){
                console.log("过半百");
            }else{
                console.log("刚刚好");
            }
        }
        showInfo(17);
        showInfo(20);
        showInfo(70);

        function fun1(){//函数声明方式
            console.log("fun1");
        }
        var fun2 = function(){//表达式方式
            console.log("fun2");
        };
        fun1();
        fun2();

        var obj = {};
        function test(){
            this.xxx = "hello";
        }
        // obj.test();//不能直接调用，没有这个方式
        test.call(obj);//可以让一个函数成为指定任意对象的方法进行调用，JS语言独有
        console.log(obj.xxx);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

8. 回调函数

什么函数才是回调函数？
   1.你定义的
   2.你没有调用
   3.但最终执行了

常见的回调函数？
   dom事件回调函数
   定时器回调函数
   ajax请求回调函数
   声明周期回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击按钮测试</button>
    <script>
        document.getElementById("btn").onclick = function(){
            alert(this.innerHTML);
        }

        //定时器：超时(延时)定时器、循环定时器
        setTimeout(function(){
            alert("到点了")
        })
    </script>
</body>
</html>

在这里插入图片描述

 

9. IIFE

IIFE：Immediately-Invoked Function Expression
作用：
  隐藏实现
  不会污染外部命名空间
  编写JS模块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        (function (){
        var a = 3;
        console.log(a+3);
        })();
        var a = 4;
        console.log(a);

        (function (){
            var a = 1;
            function test(){
                console.log(++a);
            }
            window.$ = function (){//向外暴露一个全局函数
                return {
                    test:test
                };
            };
        })();
        $().test();   
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

10. 函数中this

函数中this是什么？
   任何函数本质上都是通过对象来调用的，如果没有直接指定则为window
   所有函数内部都有一个变量叫this
   它的值是调用函数的当前对象

如何确定this的值？
   this( )：window
   p.test( )：p
   new test( )：新创建的对象
   p.call(obj):obj

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(color){
            console.log(rhis);
            this.color = color;
            this.getColor = function(){
                console.log(this);
                return this.color;
            };
            this.setColor = function(){
                console.log(this);
                return this.color;
            };
        }
        Person("red");//this为当前window

        var p = new Person("yello");//this为当前new出对象p

        p.getColor();//this为p

        var obj = {};
        p.setColor.call(obj,"black");//this为obj

        var test = p.setColor;
        test();//this为window

        function fun1(){
            function fun2(){
                console.log(this);
            }
            fun2();//this为window
        }
        fun1();

    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

11. 语句分号问题

js一条语的后面可以不加分号

是否加分号是编码风格问题，没有应该不应该，只有喜欢不喜欢

在下面两种情况下不加分号会出现问题：
   小括号开头的前一条语句
   中括号开头的前一条语句

解决办法：在行首加分号

强有力的例子：vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = 3
        ;(function (){

        })();
        /*错误理解
        var a = 3(function (){

        })();
        */
       var b = 4
       ;[1,3].forEach(function (){

       })
       /*错误理解
       var b = 4[3].forEach(function (){

       })
       */
    </script>
</head>
<body>
    
</body>
</html>

句首加了分号，此时没有报错

在这里插入图片描述

339+
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript高级程序设计
06-02
javascript高级程序设计学习笔记，共100+页，记录了js的方方面面，比较适合于自学。
JavaScript 高级教程
apollo_miracle的博客
12-27 1741
JavaScript 简介 JavaScript 历史 本节为您讲解 JavaScript 和客户端脚本的起源。 JavaScript 实现 完整的 JavaScript 实现是由以下 3 个不同部分组成的：ECMAScript、文档对象模型、浏览器对象模型。 ECMAScript 基础 ECMAScript 语法 Java 和 ECMAScript 有一些关键的语法特性相同，也有一...
JavaScript高级语法
CV工程师
08-05 880
Exception JSON AJAX WebStorage Closure
javaScript高级
dai_jiaxing的博客
04-26 1178
个人整理的一些js高级语法，有对BOM、DOM、事件、Ajax、对象详解(建议PC网页观看) ヾﾉ≧∀≦)o
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 2909
JavaScript高级 学习笔记总结
程序员推荐JavaScript高级程序设计
leenhem的博客
05-26 1066
Nicholas C. Zakas（尼古拉斯•泽卡斯）世界顶级Web技术专家，现为雅虎公司界面呈现架构师，负责My Yahoo!和雅虎首页等大访问量站点的设计。尼古拉斯拥有丰富的Web开发和界面设计经验，曾经参与许多世界级大公司的Web解决方案开发。他还是High Performance JavaScript一书的作者，并与他人合作撰写了Professional Ajax和Even Faster Web Sites。尼古拉斯拥有梅里马克学院计算机科学学士学位和埃迪柯特学院的MBA学位。他的个人网站是www.
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5176
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
JavaScript高级知识总结（高级篇）
王春燕的博客
05-02 7115
目录 一、深入基础 1.1数据类型 1.分类： 2.判断： 3.undefined与null的区别？ 4.严格区别变量类型与数据类型？ 1.2数据变量与内存 1.什么是数据？ 2.什么是内存？ 3.什么是变量？ 4.内存，数据，变量三者之间的关系 5.var a = xxx; a内存中到底保存的是什么？ 6.关于引用变量的赋值问题： 7.在js调用函数时传递变量参数时，是值传递还是引用传递？ 8.js引擎如何管理内存 1.3对象 1.什么是对象？ 2.为什么用对象？
10个JavaScript常见高级知识点
技术专家
11-23 2310
给大家分享的是一篇干货知识《10个JavaScript常见高级知识点》，主要针对初级前端和想要面试找工作的同学，想要学好前端，除了要掌握JavaScript的基础知识外，还需要掌握一些高级的知识点。
javascript高级程序设计pdf(JavaScript高级程序设计PDF版)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-10 915
javascript入门书籍推荐 javascript权威指南 第六版 javascript高级程序设计 第三版 都是干货啊javascript高级程序设计!经典中的经典《javascript权威指南》 《javascript入门经典》第五版完整版 求《JavaScript高级程序设计(第3版)》PDF下载...
JavaScript高级（详细总结）
挣钱买房买车的博客
08-19 1520
JavaScript高级（详细总结）
Javascript高级技巧分享
10-26
主要介绍了Javascript高级技巧,需要的朋友可以参考下
高级JavaScript
02-14
高级JavaScript
JavaScript高级
07-13
JavaScript高级
javascript高级教程.pdf
05-26
javascript高级教程
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1308
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 195
封装音频播放功能的工具方法，js，es6，前端，工程化
vue3引入element-plus完整步骤
zzx262625的博客
05-06 430
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
TypeScript — 泛型
最新发布
一只想躺平却不敢躺平的小菜鸟
05-09 133
TypeScript —— 泛型
JavaScript 高级语法
07-15
JavaScript作为一门动态、弱类型的脚本语言，具有一些高级语法和特性，下面是一些常见的JavaScript高级语法： 1. 闭包（Closures）：内部函数可以访问外部函数作用域中的变量。通过闭包，可以创建私有变量和方法。 2. 箭头函数（Arrow Functions）：是一种更简洁的函数声明方式，可以使用箭头（=>）来定义函数。 3. 解构赋值（Destructuring Assignment）：允许你从数组或对象中提取数据并赋值给变量。 4. Promise和异步编程：Promise是处理异步操作的一种方式，可以避免回调地狱（callback hell）。 5. Generator函数：是一种特殊的函数，可以暂停和恢复执行。它们可以用于处理异步操作、迭代器等场景。 6. 类（Classes）：ES6引入了类的概念，使得面向对象编程更加直观和易于理解。 7. 模块化（Modules）：ES6提供了模块化的支持，可以将代码拆分为多个文件，并通过导入和导出来组织代码结构。 8. 可选链操作符（Optional Chaining）：允许在访问对象属性或调用方法时，避免因为中间某个属性不存在而抛出错误。 这只是JavaScript高级语法的一小部分，还有很多其他的特性和语法糖，可以根据具体需求进行学习和应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值