JavaScript入门到精通（六）

最新推荐文章于 2024-08-26 20:25:07 发布
最新推荐文章于 2024-08-26 20:25:07 发布
阅读量169 收藏
点赞数
分类专栏： JavaScript零基础 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47743942/article/details/127161112
版权

JavaScript基础

本章节的作用域需要重点理解并掌握，万变不离其宗。
 

51. 立即执行函数

匿名函数外加括号表示一个整体，再在其后边加括号，表示立即执行函数，因没有用变量去保存，所以只执行一次

如果前边括号内有形参，则可以在后边括号传递实参

(function(a,b){
    console.log(a);
    console.log(b);
})(123,456);

在这里插入图片描述
 

52. 方法

对象的属性值可以是任何的数据类型，也可以是个函数

如果一个函数作为一个对象的属性保存，称这个函数为对象的方法

调用这个函数就是说调用对象方法

调用对象的方法和调用函数没有本质区别，只是名字不一样

使用for … in 语句来枚举对象中的所有属性
语法：

for(var 变量 in obj){语句…}
例如：for(var n in obj){console.log(n);}

var obj = new Object()

obj.name = "张三";
obj.age = 18;
obj.sayname = function(){ //对象的属性可是函数
    console.log(obj.name);
}
obj.sayname();//调用对象的方法，而fun()称为调函数

for(var n in obj){
    console.log(n);//输出属性
    // console.log(obj.n);//输出属性值为undifined
    console.log(obj[n]);//输出属性值
}

在这里插入图片描述

 

53. 全局作用域

作用域：指一个变量的作用范围

全局作用域：直接编写在script标签中的JS代码
  在页面打开时创建，在页面关闭时销毁
  全局对象window可以直接在页面中调用
  创建的变量都会作为window对象的属性保存
  创建的函数都会作为window对象的方法保存
  创建的全局变量在页面所有位置都可以被调用
 
函数作用域（局部作用域）

变量的声明提前：
   使用var关键字声明的变量会在所有代码执行之前被声明（但是不会被赋值）

函数的声明提前：
   使用函数声明形式创建的函数：function 函数名( ){ }，会在所有代码执行之前被创建，因此可以在函数声明前调用
   利用函数表达式创建的函数，不会被声明提前，因此不能在声明前调用

<!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>
        console.log(window);//全局对象window由浏览器创建

        var a = 10;
        console.log(window.a);//创建的变量作为window对象的属性保存

        function fun(){
            console.log("我是第一个函数");
        }
        window.fun();//创建的函数作为window对象的方法保存

        b = 1;
        console.log(b);//声明变量时不使用var相当于window.b

        console.log(c);//var声明的变量会在所有代码执行之前被声明（但不会被赋值）
        var c = 2;//如果不使用var则会报错ReferenceError

        fun1();//函数声明提前，所有代码执行前被创建
        function fun1(){
            console.log("我是第二个函数");
        }
        
        // fun2();//没有函数声明提前，会报错，但fun2变量已被声明
        var fun2 = function(){
            console.log("我是第三个函数");
        };
        // fun2(); //声明之后才能调用方法
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

54. 函数作用域

函数作用域（局部作用域）：
  调用函数时创建，函数执行完毕后，函数作用域被销毁
  每调用一次就会创建一次函数作用域，它们之间相互独立
  函数作用域中可以访问到全局作用域的变量
  全局作用域中无法访问到局部作用域的变量
  在函数作用域调用变量时先在自身作用域范围查找变量，否则上一级查找

想在函数作用域中访问全局变量可以使用window对象

函数作用域中也有使用var声明提前的特性
函数作用域中也有函数声明提前的特性

在函数中不使用var声明的变量都会成为全局变量，相当于使用window.变量

定义形参就相当于在函数作用域中声明了变量

<!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 = 10;
        function fun(){
            var a = 11;
            var b = 20;
            console.log(a);//先自身作用域中查找变量a，没有上一级查找
            console.log(window.a)//使用window对象访问全局作用域的变量
        }
        fun();//函数作用域中可以访问到全局作用域的变量
        // console.log(b);//全局作用域无法访问到函数作用域的变量
        
        function fun1(){
            console.log(a);//变量a声明提前，但值为undifined
            var a = 30;
            fun2();//函数声明提前
            function fun2(){
                console.log("我是函数");
            }
        }
        fun1();

        var c = 3;
        function fun3(){
            console.log(c);
            c = 4;
        }
        fun3();//输出全局的c，为3
        console.log(c);//在函数中不使用var声明的变量都会成为全局变量，输出4

        var e = 5;
        function fun4(e){
            console.log(e);
        }
        fun4();//定义形参相当于声明了变量，但没有赋值，输出undifined，而不是5
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
【注意】在函数中不使用var声明的变量都会成为全局变量，相当于使用window.变量(在没有传参的情况下！！！)

<!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 = 123;
        function fun5(a){
            console.log(a);
            a = 456
            console.log(a);
        }
        fun5(123);//a=123，456
        console.log(a);//a=123
        //在有传参情况下，函数里面有声明a并且传值为123，此时修改a为456
        //修改的是函数作用域里的a，而全局作用域的a为123没改变

        var b = 123;
        function fun3(){
            console.log(b);
            b = 456;
            console.log(b);
        }
        fun3();//a=123,456
        console.log(b);//a=456
        //没有传参情况下，函数里面b为全局变量，全局作用域输出b为修改后的

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

在这里插入图片描述

 

55. debug

完成练习：全局作用域和局部作用域

<!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 = 123;
function fun1(){
    console.log(a);
}
fun1();//a=123

var a = 123;
function fun2(){
    console.log(a);
    var a = 456;
}
fun2();//a=undifined
console.log(a); //a=123

var a = 123;
function fun3(){
    console.log(a);
    a = 456;
}
fun3();//a=123
console.log(a);//a=456

var a = 123;
function fun4(a){
    console.log(a);
    a = 456;
}
fun4();//a=undifined
console.log(a);//a=123

var a = 123;
function fun5(a){
    console.log(a);
    a = 456;
}
fun5(123);//a=123
console.log(a);//a=123
    </script>
</head>
<body>
    
</body>
</html>

浏览器Debug测试：以54. 函数作用域中的注意代码为例
以Google Chrome浏览器：

  1. 打开网页，鼠标右键进入检查，点击上方source

在这里插入图片描述

  1. 在想要看的那一行鼠标左键点击，设置断点，然后刷新页面，点击右边local和global
    在这里插入图片描述
    此时代表，程序执行到断点处，右边可以看到函数作用域里a为123，全局作用域a为123

  2. 点击下一步，继续执行代码

在这里插入图片描述

可以看到光标颜色移动到了下一行，右边函数作用域里a修改为456，因为这个函数是有传参的，此时的a修改的是函数作用域里的a的值，虽然它没有使用var声明

 

56. this

解析器在调用函数每次都会想函数内部传递一个隐含的参数this
this指向一个函数执行的上下文对象
根据函数调用方式的不同，this会指向不同的对象

以函数的形式调用时，this永远是window
以方法的形式调用时，this就是调用方法的那个对象

<!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 fun(){
            console.log(this);
            }

        var obj={
            name:"孙空悟",
            sayName:fun
        };
        fun();//object window,以函数形式调用时，this为window
        obj.sayName();//object obj，以方法的形式调用时，this为调用方法的对象
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

 

57. this补充

可以使用this来进行动态调用输出

var name = "全局";

function fun(){
    console.log(this.name);
}

var obj1 = {
    name:"张三",
    sayName:fun
};

var obj2 = {
    name:"李四",
    sayName:fun
};

obj1.sayName();//当前为obj1调用，this为obj1
obj2.sayName();//当前为obj2调用，this为obj2

在这里插入图片描述

 

58. 工厂方法创建对象

通过传递属性参数，批量生成对象，更加简单避免重复工作

function createPerson(name,age,gender){
    var obj = new Object();

    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        console.log(this.name);
    };
    return obj;
}

var obj1 = createPerson("张三",18,"男");
obj1.sayName();
var obj2 = createPerson("李四",19,"女");
obj2.sayName();
var obj3 = createPerson("王五",20,"男");
obj3.sayName();

在这里插入图片描述

 

59. 构造函数

使用工厂方法创建的对象，使用的构造函数都是object，导致无法区分多种不同类型的对象

构造函数就是一个普通的函数，不同的是构造函数习惯首字母大写
构造函数需要使用关键字new来调用
执行流程：

  1. 立刻创建一个新的对象

  2. 将新创建的对象设置为函数中this，可以使用this来引用新创建的对象

  3. 逐行执行函数中的代码

  4. 将新建的对象作为返回值返回（浏览器自动返回）

使用同一构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类
通过构造函数创建的对象，称为该类的实例

使用instanceof可以检查一个对象是否是一个类的实例，是返回true，否则false

语法：
对象 instanceof 构造函数

this总结：
当以函数的形式调用时，this是window
当以方法的形式调用时，this是调用者
当以构造函数形式调用时，this是新创建的对象

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function(){
        console.log(this.name);
    };
}
var per = new Person("张三",18,"男");//构造函数使用new进行调用
console.log(per);//Person类

function Dog(){

}
var dog = new Dog();
console.log(dog);//Dog类

console.log(per instanceof Person);//per为Person类的实例
console.log(dog instanceof Dog);//dog为Dog类的实例
console.log(dog instanceof Object);//所有对象都为Object类的实例

在这里插入图片描述
 

60. 构造函数的修改

在上一节，Person构造函数中，为每一个对象都添加了sayName方法
意味着构造函数每执行一次就会创建一个新的sayName方法，
即所有实例的sayName都是唯一的，这样就导致内存空间的浪费

因此可以把sayName方法在全局作用域中定义

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = fun;
}

function fun(){
    console.log(this.name);
}

var per1 = new Person("张三",18,"男");
per1.sayName();

var per2 = new Person("李四",19,"男");
per2.sayName();

console.log(per1.sayName==per2.sayName);//不同对象相同的方法

在这里插入图片描述

 
下一章节将对原型对象、垃圾回收、数组进行归纳总结

339+
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript从入门到精通（全）
码农研究僧的博客
07-22 2万+
目录前言1. 入门案例2. 语法2.1 变量2.2 函数 前言 运行在浏览器的脚本语言（目标程序以文本格式打开） 用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断 Java运行在JVM当中，JavaScript运行在浏览器的内存当中 完整的javascript由语言基础,BOM,DOM组成 1. 入门案例 script标签javascript代码必须放在script标签中 用户点击以下按钮，弹出消息框 html中嵌入javascript有三种方式 第一种方式： 事件句柄=“js代码
JavaScript框架从入门到精通
热门推荐
cgblpx的博客
06-01 4万+
静态网页和动态网页 动态网页 我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。 日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务
JavaScript入门到精通（完整版! ! !）
yang20000222的博客
05-11 1884
JSON 是从 JavaScript 脚本中演变而来的，并且使用 JavaScript 中的语法来描述数据。与 XML 一样，JSON 也是一种基于文本的格式，文件扩展名为 .json。目前大多数编程语言（例如 PHP、Java、.Net）都支持 JSON，JSON 中有两种基本的结构：对象：由若干键/值对（即 key:value）组成的无序集合，每个对象以左花括号 { 开始，以右花括号 } 结尾，多个键/值对之间使用逗号 , 分隔；
JavaScript：从入门到精通总结六
sunzhanl的博客
09-04 663
JavaScript：从入门到精通总结
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7405
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
SQL Server 2022从入门到精通
weixin_43178406的博客
06-26 2万+
本文主要介绍了SQL Server 2022从入门到精通，希望能对学习数据库，尤其是学习SQL Server的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 本书特色 2.2 本书作者 2.3 本书目录 2.4 适合读者
JavaScript从入门到精通
qq_52699757的博客
05-17 1274
JavaScript从入门到精通
html5 css3 javascript从入门到精通,HTML5+CSS3+JavaScript从入门到精通（微课精编版）
weixin_42309785的博客
06-20 1591
HTML5+CSS3+JavaScript从入门到精通(微课精编版)语音编辑锁定讨论上传视频《HTML5+CSS3+JavaScript从入门到精通(微课精编版)》是2018年8月清华大学出版社出版的图书，作者是前端科技。书名HTML5+CSS3+JavaScript从入门到精通(微课精编版)作者前端科技ISBN9787302502203定价79.80元出版社清华大学出版社...
JavaScript之路：从入门到精通【文末送书】
一键难忘的博客
03-14 4887
JavaScript之路：从入门到精通【文末送书-39】JavaScript，作为一种前端开发语言，已经成为Web开发中不可或缺的一部分。无论是网页动态交互、数据处理、还是移动应用开发，JavaScript都扮演着重要的角色。本文将带您从入门到精通，系统地学习JavaScript的各个方面。
JavaScript从入门到精通(第二版) 基础知识总结
weixin_53370274的博客
11-16 1527
JavaScript从入门到精通第二版 .pdf一、基础二、数据类型三、流程控制四、函数五、js对象与数组六、函数四、函数 一、基础 language 设置所使用的脚本语言及版本 src 设置一个外部脚本文件的路径公交车 type 设置所使用的脚本语言，此属性已代替language属性 defer 此属性表示当html文档加载完毕后再执行脚本语言 设置后，浏览器不必等待脚本语言装载，这样页面加载会更快。 但当有一些脚本需要在页面加载过程中或加载完成后立即执行时， 就不需要使用defer属性。 通过
JavaScript从入门到精通（第2版）PPT.7z
07-14
在“JavaScript从入门到精通（第2版）PPT”这套教学资料中，我们将深入探讨JavaScript的核心概念、语法特性以及实际应用。 1. **基础概念** - **变量与数据类型**：JavaScript支持基本数据类型（如字符串、数字、...
JavaScript从入门到精通（第4版）（示例源码+习题答案）.7z
07-14
"JavaScript从入门到精通（第4版）"是一本旨在帮助初学者掌握这门语言的教材，通过详细的示例源码和习题答案，让学习者能够逐步深入理解JavaScript的核心概念和实际应用。 1. **基础语法**：JavaScript的基础包括...
JavaScript从入门到精通 所有例题程序
01-09
"JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包，旨在帮助初学者通过实践掌握JavaScript的核心概念和技术。 这个资源包中的"sl"实例源程序包含了大量例题，涵盖了JavaScript的基础到进阶...
Html+Css+Javascript从入门到精通.pdf
09-27
### Html+Css+Javascript从入门到精通 #### Web开发基础教程概述 《Html+Css+Javascript从入门到精通》是一本全面介绍了Web前端开发技术的教程。本书旨在帮助读者掌握Web开发的基础知识，并通过实践逐步深入理解...
JavaScript从入门到精通 PDF电子书下载 带书签目录 完整版.part2.rar
12-12
JavaScript从入门到精通 PDF电子书下载 带书签目录 完整版.2(共5)
2024前端面试题-js篇
FormAda的博客
08-22 908
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 385
npm。
layui栅格布局设置列间距不起作用
最新发布
gc_2299的博客
08-26 584
记录layui栅格布局设置列间距不起作用的解决办法
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 849
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
JavaScript入门到精通教程
"JavaScript从入门到精通pdf" 这篇资源是一个详细的JavaScript教程，旨在帮助初学者和进阶者全面掌握这门编程语言。JavaScript最初由Netscape公司开发，是一种基于对象和事件驱动的脚本语言，它在Web浏览器中直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值