JavaScript(在有一点点基础上的进阶)

最新推荐文章于 2023-09-08 08:58:23 发布
最新推荐文章于 2023-09-08 08:58:23 发布
阅读量232 收藏
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44750790/article/details/106397592
版权

JS进阶篇

js函数

函数也是一个对象，函数中可以存储一些语句来完成特定的功能。
第一种方式一般不建议使用
第二种方式是最常用的。
第三种方式也可以，但是那样就是一个匿名函数的赋值语句，后面要记得加上分号 ;
,然后调用的时候用 属性名加个括号调用即可。
在这里插入图片描述
函数可以传入形参，利用实参实现函数的灵活性。
基本结构跟java一直，直接使用 return 语句就可以返回一个值。
如果return 后面不跟值，返回一个 undefined 值，如果不写 return 语句，也是返回一个 undefined语句。

立即执行函数：一般只调用一次，调用完之后直接弹出函数栈，不用占用内存。

			//立即执行函数
			(function(){
			alert("1111");	
			})();

枚举对象中的属性

//枚举对象中的属性
			//使用for ... in  语句,对象中有几个属性，就执行几次
			// 语法 ： for (var 变量  in 对象){};
			//变量就是各个属性名
			
			var obj={
				name:'自渡',
				age:18,
				height:180,
				money:'1000w'
				};
			
			for(var n in obj){
			console.log(obj[n]);
			}

在这里插入图片描述

变量声明提前

变量的提前声明：我们使用var 关键字声明的变量，会在所有代码的执行之前被声明。但是如果我们声明式不使用var关键字，则变量不会被声明提前。

函数的声明提前

函数的声明提前：
使用函数声明形式创建的函数function 函数() { },它会在所有的代码执行之前就被创建。所以我们可以在函数声明前调用函数。
使用函数表达式创建时不是声明提前，不能提前调用。

变量作用域

作用域：一个变量的作用范围
在JS中一共有两种作用域：
1.全局作用域：直接在script 标签中的JS代码，都在全局作用域。在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局作用域对象widow，它代表一个浏览器的窗口，由浏览器创建。【在全局作用域中，创建的变量都会作为window对象的属性保存，创建的函数都会作为widow的方法保存】全局作用域的变量都是全局变量，在页面的任意部分都可以访问。
2.函数作用域：调用函数是创建函数作用域，函数执行完后，函数作用域销毁，【每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。】
当函数作用域中有对应的变量中，会在自身的作用域中寻找，如果自身没有，才会去上一级函数作用域中寻找，直到全局作用域，如果找不到就报错。

this对象

解析器在调用函数每次都会想函数内部传递进一个隐含的参数，这个隐含的参数就是this。this指向的是一个对象，这个对象我们也成为函数执行的上下文对象。根据函数的调用方式的不同，this会指向不同的对象。
1.以函数形式调用,this永远都window
2.以方法的形式调用,this代表的就是调用的那个对象
3.以构造函数的形式调用时，this就是新创建的那个对象。

构造多个对象

1.工厂方式：使用工厂方法创建的对象，使用的函数都是Object，所有的对象都是Object类型，就导致我们无法区分出多种不同类型的对象。

			function Create(name,age,address){
				var  obj=new Object();
				obj.name=name;
				obj.age=age;
				obj.address=address;
				console.log("name:"+obj.name+"  age:"+obj.age+"   address:"+obj.address);
				return obj;
			}
			
			var obj1=Create("孙悟空",500,"花果山");
			var obj2=Create("猪八戒",500,"高老庄");
			var obj3=Create("白龙马",500,"堕鹰涧");

2.构造函数：
创建一个构造函数，专门用来创建特定对象的
构造函数就是一个普通函数，创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写
构造函数和普通函数就是构造调用方式的不同
普通函数是直接调用，而构造函数需要使用new关键字

在这里插入图片描述
这里我们可以看出，使用 new 关键字 就是构造函数，有一个对象。
不使用 new 关键字，就是普通函数。

构造函数执行流程:
1.当构造函数被调用了，它就会立即创建一个新的对象。
2.将新建的对象设置为函数中的this，在构造函数中，可以使用this来指代新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回【这个就是构造函数的特点】

使用同一个构造函数创建的对象我们成为一类对象，也将一个构造函数成为一个类，也将构造的对象成为该类的实例。

function Person(name,age,agender){
				this.name=name;
				this.age=age;
				this.agender=agender;
				this.sayHello=function (){
					alert(this.name);
				}
			}
			
			var per1 = new Person("自渡",18,"男");
			var per2 = new Person("孙悟空",500,"男");
			console.log(per1.name);
			console.log(per2.name);

在这里插入图片描述

instanceof 函数

可以检查一个对象是不是一个类的实例，是的话就返回true，否则返回false。

function Person(name,age,agender){
				this.name=name;
				this.age=age;
				this.agender=agender;
				this.sayHello=function (){
					alert(this.name);
				}
			}
			
			var  dog=new Object();
			var per1 = new Person("自渡",18,"男");
			var per2 = new Person("孙悟空",500,"男");
			console.log(per1 instanceof Person);
			console.log(dog instanceof Person);

在这里插入图片描述
所有的对象 还是实例 都是 Object的实例
改进一下：原来，我们每执行一次，就调用一次构造函数，就会创建一个sayHello()方法。如果我们调用1w次该构造函数，我们就得创建1w个sayHello方法。【会占用我们大量的内存】
在这里插入图片描述
改进：把sayHello方法取出到外面来，这样就只需要创建一个公用的方法就不用大量占用我们的内存了。【由两个sayHello方法相等的结果是true可得出是同一个方法】
在这里插入图片描述
尽量不要加函数定义在全局作用域中，会污染全局作用域的命名空间，而且定义在全局作用域中也不安全【可能名称覆盖，出现问题】

原型对象

prototype:
如果函数是作为普通函数使用，这个原型对象没有意义
如果函数是作为构造函数使用，它所创建的对象都会有一个隐含的属性，指向该函数的原型对象。我们可以通过实例的 __proto__来访问该属性

在这里插入图片描述
在这里插入图片描述
原型对象的作用：
相当于一个公共的区域，我们可以将共有的内容，都统一设置到原型对象中
，当我们访问对象的属性或者方法时，它会先在我们自身对象中中，如果有则直接使用，如果没有，则会去到原型对象中寻找。
上面的sayhello方法就可以放到原型对象中【不会污染命名空间，更加安全，而且也节省内存】以后我们创建构造函数时，我们可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用为每一个对象添加，也不会影响到全局作用域，就可以使得每个对象都有这些属性和方法了。
原型对象使用：

function Person(age,name){
				Person.prototype.age=18;
				Person.prototype.name="自渡";
				Person.prototype.sayHello=function (){
					console.log(Person.name);
				}
			}
			
			var per = new Person();
			var per1 = new Person();
			console.log(per.age);
			console.log(per1.name);
			per.sayHello();
			per1.sayHello();
			//结果会输出18，我们并没有给Person 对象的实例 per 和 per1 赋值名字和年龄，但是
			//控制台可以打印出来，说明这些是每个对象都共有的

在这里插入图片描述
在这个地方，如果我们再利用 instanceof 去检查是否有对应的属性值的话，因为原型对象中是有的，所以就会显示true。
在这里插入图片描述
所以，这里我们可以利用一个另外的函数来检查
hasOwnProperty()使用该方法，只有该对象本身含有该属性才能够返回true
在这里插入图片描述

原型链

既然我们对于每个对象都可以使用hasOwnProperty()，那么这个方法(对象)它在哪里呢？

答案：存在与原型的原型中，但是原型的原因就没有原型了【禁止套娃】。

			function Person(age,name){
				}
			
			Person.prototype.age=18;
			Person.prototype.name="自渡";
			
			var per = new Person();
			/*
			 原型对象也是对象，所以他也有原型
			 当我们使用一个对象的属性或者方法时，会先在自身中寻找
			 自身如果没有，则去原型对象中寻找，有则使用，没有则到原型对象的原型中去找
			 直到找到Object对象的原型，Object对象没有原型，如果Object中依然没有找到
			 则返回undefined*/
			 //一般两层就没有了
			console.log(per.__proto__.hasOwnProperty("hasOwnProperty"))
			console.log(per.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))
			console.log(per.__proto__.__proto___.__proto__.hasOwnProperty("hasOwnProperty"))

在这里插入图片描述

toString 方法

我们直接打印某个对象，就相当于打印某个对象的toString()方法。
在这里插入图片描述
这个东西跟java相类似，可以覆盖掉toString的方法，输出详细信息。

js垃圾回收（GC）

当一个对象没有任何的变量或者属性对它进行引用，它就成为了垃圾。这种对象过多会占用大量的内存空间，导致程序运行变慢。
在JS中有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们只要将我们不再使用的对象设置为null即可【跟java类似】

三种对象

内建对象：浏览器定义的对象
宿主对象：js运行定义的对象
自定义对象：我们自己定义的对象

数组

数组也是一个对象，它和我们普通对象功能相似，也是用来存储一些值的。不同的是，普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作属性的

			var  arr = new Array();
			arr[0]=12;
			arr[1]="4567";
			arr[10]='1';
			console.log(arr.length)//对于连续的数组，使用length可以获取数组的长度【最大索引加一】
			console.log(arr);
			
			/*如果修改数组的长度length大于原来的长度，则多出部分会空出来，以,代替
			 如果修改的length*/
			
			/*向最后的一个位置添加元素，语法，数组[数组.length]=值*/
			/*使用字面量创建数组
			 arr[]=[];//在中括号里面添加元素，这样创建简单且可直接赋值
			 * 
			 * */
			var brr=[1,23,4,56,7,88,4,3,2];
			console.log(brr);
			console.log(brr.length);

			//使用构造函数来创建数组
			var crr =new Array(1,2,3);
			console.log(crr);

有一点区别就是：
利用第一种创建出来的只是一个元素的数组，利用第二种创建出来的是10个元素的数组。但是没什么用，js中的数组跟java中的linklist一样是可以变动长度的。
在这里插入图片描述

数组特殊的地方 【着实比java灵活很多】

不单单可以存数字，还可以存字符串，布尔值，undefined，null都可以的，还可以是对象，还可以存函数。数组中还可以放数组【无限套娃】。

var obj = new Object();
			obj.name="自渡";
			obj.age=12;
			console.log(obj);
			
			var arr=[1,"2",true,null,undefined,obj];
			console.log(arr[5]);

在这里插入图片描述

数组的属性与一些方法

【离线文档简直就是宝藏，没广告，而且还不用网】
1.push方法：向数组的末尾添加一个或更多元素，并返回新的长度。
2.pop方法：删除并返回数组的最后一个元素
3.unshift方法:向数组的开头添加一个或更多元素，并返回新的长度。【跟push很像，区别就是它是在前面插入元素的】，插入元素后，其他元素会自动调整。
4.shift方法：删除并返回数组的第一个元素【跟pop很像】
在这里插入图片描述
在这里插入图片描述
数组遍历与java无异。【下标越界不会报错，只是输出undefined】
forEach遍历数组：

var arr=['孙悟空','唐僧','沙和尚','自渡'];
			arr.forEach(function(value,index,Array){
				console.log(value);
				console.log(index);
				console.log(Array);
			});

在这里插入图片描述

数组的截取

slice(startindex,endindex);截取从范围[startindex,endindex)
可以用来从数组中提取元素。第二个参数可以省略，直接截取到最后。
所以可以传递一个负值（-1表示最后一个元素，-2表示倒数第二个元素）

删除并添加元素

splice（statrindex,endindex）; 两个参数，第一个是开始的下标，第二个是删除的元素个数

				var arr=['孙悟空','自渡','猪八戒','白龙马'];
				arr.splice(0,2);
				console.log(arr);//表明splice会影响原来的数组
				var result = arr.splice(0,1);//返回被截取掉的数组元素
				console.log(result);

一开始是4个元素，使用该方法后打印数组，发现只剩下两个元素了，表明该方法会影响原来的数组。然后，我们再删除一个数组，用一个result变量来接收，发现返回的是删除后的元素。
在这里插入图片描述
删除并替换对应位置的元素
加粗样式
向指定位置插入数据【我们可以不删，但是替换的时候，把数据插入进去数组里面】
在这里插入图片描述

函数的方法：

call（）和apply（）方法的使用及区别：

/*这两个都是函数对象的方法，需要通过函数对象才能调用
			 当函数对象调用call（）和apply（）方法时函数都会执行
			 在调用call和apply可以将一个对象指定为第一个参数，
			 此时这个对象将会成为函数执行时候的this对象，后面的参数可以传实参
			 call方法可以将实参在对象之后依次传递
			 apply方法需要将实参封装在数组里面依次传递*/
			function fun(){
				console.log("执行了！");
			}
			fun();
			fun.apply();
			fun.call();
			function test(a,b){
				console.log(this)
				console.log("a="+a,"   b="+b);
			}
			
			var  d=new Object();
			test.call(d,2,3);
			test.apply(d,[4,5]);

在这里插入图片描述

函数中的对象

/*在调用函数的时候，会传递两个参数，一个是上下文对象this，一个是封装了实参的argument。s
			 arguments是一个类数组对象，也可以通过索引来操作数据，也可以获得长度
			 在调用函数时，我们所传递的实参都会在argument是中保存起来,
			 即使我们不传形参，我们也可以使用实参
			 里边有一个属性callee，这个属性对应了一个函数对象，就是当前正在执行的函数对象*/
			function fun(){
				console.log(arguments);
				console.log(arguments.length);
				console.log(arguments[2]);
				console.log(arguments.callee==fun);
			}
			fun(1,2,3,4);

在这里插入图片描述

Data对象

在JS中使用Data对象来表示时间。

			var  d = new Date();
			console.log(d.getTime());//获取当前的时间戳，表示从170年1月1日到今天的毫秒数
			/*因为各种事件的进制不同，时是60，但是年是365，要在计算机底层存放事件太难了，
			 所以就在底层存储的是时间戳获取什么当前日期什么的，看文档就可*/
			
			var start = Date.now();
			for(var i=0;i<100;++i)
			{
				console.log()
			}
			var end = Date.now();
			
			console.log(end -start);//中间代码段执行的时间

在这里插入图片描述

Math工具类：封装了数学运算的相关函数和一些常量

在这里插入图片描述

字符串的相关操作方法：

在这里插入图片描述
这种建议自己看文档就好了

豌豆二锅头
关注
专栏目录
JavaScript—进阶篇
weixin_44595042的博客
03-10 2681
JavaScript—进阶（笔记）第1章 系好安全带,准备启航1-1 让你认识JS 简介： 做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的。 课程须知： 您至少掌握HTML+CSS基础知识 学习内容： 通过JavaScript学习，掌握基本...
前端基础进阶-JavaScript核心（DOM操作）
qq_43293778的博客
02-23 865
目录 目标 1、DOM简介 1.1 什么是DOM 1.2 DOM树 2、获取元素 2.1 如何获取页面元素 2.2 根据ID获取 2.3 根据标签名获取 2.4 通过HTML5新增的方法获取 2.5 获取特殊元素（body，html） 获取body元素 获取html元素 3、事件基础 3.1 事件概述 3.3 执行事件的步骤 3.4 分析事件三要素 4、操作元素 4.1 改变元素内容 innerText 和 innerHTML的区别 4.2 常用元素的属性操作 案例
JavaScript系列之apply方法原生实现
weixin_44017013的博客
04-12 165
首先来了解apply的用法: function fn(name){ console.log(`${name} ${this.msg}`) } const obj = { msg: 'Hello World' } fn.apply(obj, ['Ksmith']) // Ksmith Hello World 原生实现 Function.prototype.apply = function(context = window, args) { // 第二参数如果不是一个对象的话 if (!
二叉树的三种遍历方式
weixin_43484977的博客
12-01 1137
二叉树可以前中后三种遍历方式： 前序遍历： 前序遍历首先访问根结点然后遍历左子树，最后遍历右子树。在遍历左、右子树时，仍然先访问根结点，然后遍历左子树，最后遍历右子树。 若二叉树为空则结束返回，否则： （1）访问根结点。 （2）前序遍历左子树。 （3）前序遍历右子树 。 ABDECF 中序遍历： 中序遍历首先遍历左子树，然后访问根结点，最后遍历右子树。若二叉树为空则结束返回，否则： （1）中序遍...
JavaScript 参考教程
XmagicX的专栏
10-30 1631
JavaScript 参考教程by Micro文档对象现在我们将开始讨论更“实际”的话题——文档对象(DOM)。文档对象是指在网页文档里划分出来的对象。在 JavaScript 能够涉及的范围内有如下几个“大”对象：window, document, location, navigator, screen, history 等。下面是一个文档对象树，你可以看到对象下包含对象的“壮观”情
JavaScript进阶
最新发布
m0_58430841的博客
09-08 188
/1. 可以用Error构造函数收到抛出一个错误// throw 语句抛出错误throw new Error("err1 是一个错误语句");// 实例化一个错误对象，参数是错误显示内容//2. 测试try{err1() // 调用错误函数//err1 是一个错误语句。
JavaScript进阶（二）-- DOM基础
bug 消灭师的博客
04-20 1287
JavaScript进阶 -- DOM 节点
JavaScript进阶DOM
a11693651的博客
04-17 481
JavaScript进阶-DOM
JavaScript进阶班之DOM技术(四)
热门推荐
Augenstern_QXL的博客
04-03 4万+
✍、JavaScript进阶班之DOM技术(四)
腾讯首发Linux内核源码《嵌入式开发进阶笔记》差距差的不止一点点哦
j简说Linux的博客
09-09 759
Linux内核是一个操作系统（OS）内核，本质上定义为类Unix。它用于不同的操作系统，主要是以不同的Linux发行版的形式。Linux内核是第一个真正完整且突出的免费和开源软件示例。Linux 内核是第一个真正完整且突出的免费和开源软件示例，促使其广泛采用并得到了数千名开发人员的贡献。Linux 内核由芬兰赫尔辛基大学的学生 Linus Torvalds 于 1991 年创建。随着程序员调整其他自由软件项目的源代码以扩展内核的功能，它迅速取得了进展。
【JavaScript入门笔记05 函数进阶Ⅱ setTimeout 和 setInterval】
m0_49551563的博客
07-30 1232
Javascript 学习笔记，setTimeout 和 setInterval，"new Function" 语法，函数对象，NFE
【学习笔记】「Web APIs」JavaScript进阶
weixin_44802075的博客
08-27 351
前言 1.1 JS的组成 1.2 JS基础阶段及Web APIs阶段 2.1 API 2.2 Web API 2.3 API和Web API总结 一、DOM 1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 1.2...
JavaScript 进阶 40 -- Promise 白话讲解Promise
宁静致远
03-12 222
ES6原生提供了 Promise 对象。 当一个异步任务的执行需要依赖另一个异步任务的结果时，我们一般会将两个异步任务嵌套起来，这种情况发生一两次还可以忍，但是发生很多次之后，这就是所谓的回调地狱，代码层层嵌套，环环相扣，逻辑稍微复杂一些，程序就会变得难以维护。 Promise，一定程度上解决了JavaScript的流程操作问题。Promise的用处，实际上是在于多重异步操作相互依赖的情况下，对于逻辑流程的控制。 先直接打印出来看看，console.dir(Promise) 直观的看到 ，Pro
js实现多选，全选，反选的功能
weixin_44750790的博客
06-01 5904
JS实现多选和单选等功能的同步选择
利用js实现网页开关灯
weixin_44750790的博客
06-07 3098
网页开关灯的操作是怎么做的？
利用js加密（MD5）密码
weixin_44750790的博客
05-27 2407
在前端给密码加密
JS实现小电视播放图片(自动播放)
weixin_44750790的博客
06-02 1083
如何利用JS来实现小电视中图片的自动播放呢？
JS定时器的两种方法及使用
weixin_44750790的博客
06-03 936
JS里面两种定时器，及他们的特点，与特定的应用方式
JavaScript入门指南：基础知识与进阶
"这是一份JavaScript基础教程，旨在为初学者提供JavaScript的入门知识，但不涉及动态网页的高级技术，如动态定位、动画或事件处理。教程采用参考教程的形式，既有系统的结构，也具备教学性质。教程适用于已经了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值