JavaScript复习——B站_js复原b站-优快云博客

本文链接：https://blog.youkuaiyun.com/xiapi3/article/details/111873973

本文深入讲解了JavaScript的面向对象编程，包括创建对象、继承、多态，以及如何操作DOM元素和使用jQuery简化开发。涵盖了变量作用域、函数、构造函数、Map和Set等关键概念，以及BOM、DOM、事件和浏览器对象的详细实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 简介

一种浏览器脚本语言

ECMAScript时JavaScript的标准，目前已经到6了，但是目前主流浏览器只支持5，所以需要转换工具将6的语法转换成5的

2 QuickStart

html中的<script>中，或者js文件中直接写，然后使用<script>引入。注意：该标签没有自闭合
注意：引入的js编码是否和项目相同，不相同则出现乱码问题。
注释同java一样

3 类型、运算、变量

number：所有的数字，整数、小数、科学计数法等，特殊：NaN（不是数字）、Infinity（无穷大）
字符串：使用单引号或者双引号
布尔：true|false
逻辑运算：&& || ！（无短路运算）
=、==、===（保证类型一样）、>、<、!=
null（空）
undefined（没定义）
数组（任意类型）
对象：{}，键值对行式，逗号分隔

注意：NaN参与逻辑运算都是false，只有isNaN()才会使true
注意：判断小数是否相等时，可以使用差值小于一定值方法判断，不可使用==判断
注意：数组下标越界为undefined

变量：数字、字母、下划线、$组成，不能以数字开头，如果变量以var开头为局部变量，否则为全局变量，注意：var是伪局部变量（作用域会穿透函数！），可以使用let来定义真局部变量。

var/let区别
var：只有两个作用域：全局和函数
let：新增块级作用域
const区别：定义和赋值同时！一旦赋值不可改变，引用数据类型不可改变指向，可以改变指向对象中的属性

typeof可用来判断变量类型

3.1 字符串

转义字符：\

\'
\n
\t
\u4e2d \u#### Unicode编码
\x41 Ascll字符

长字符串：

var a = `abc
mn
ooo`

模板字符串(es6)：

var name = "xiaopi3"
var b = `你好${name}`

字符串方法：

1. indexOf(src,indexFrom)   //从_位置开始往后找src首次出现的位置
2. replace(src,dst) //将src替换成dst
3. charAt(i)   返回第i索引字符
4. indexOf(str)返回第一个子串位置，无-1
5. lastIndexOf(str)
6. split(str)
7. substring(st_i,ed_i)返回索引间字符串
8. toLowerCase()
9. toUpperCase()

注意：对一个字符串的下标取值是只读的，赋值虽然不报错，但是无效

3.2 数组

可以包含任意类型，长度可变，多出来的是undefined，少的直接消失，数组遍历也可以用for of

数组定义：

变长：var arr=new Array();
定长：var arr2=new Array(3); 注意：定长后只能写三个

数组方法：

var arr = [1,2,3,4,5]
// 取值
arr[0]
// 查找元素
arr.indexOf(2)
// 切片，需要返回值
var x = arr.slice(0,2)
// 尾部添加元素
arr.push(9)
// 尾部删除元素
arr.pop()
// 头部添加
arr.unshift(5)
// 头部删除
arr.shift()
// 排序，需要返回值
var x = arr.sort()
// 反转
var x = arr.reverse()
// 拼接
var x = arr.concat([1,2,4])
// 转换成字符串，可指定连接符
var x = arr.join("-")

3.3 对象

赋值：对象名.key=value，key和value都是之前不存在的
删除：delete 对象名.key
继承：对象的继承通过原型

注意：对象中试图获取不存在的属性，不会报错，但是可以用if判断，如果属性不存在，则为false，但要注意value为false的情况，更推荐使用："key" in 对象去判断该对象是否存在key属性，但是要注意该属性有可能是继承得来的，如果需要判断当前对象中是否存在自身本对象的某个属性：对象.hasOwnProperty("key")

对象遍历：可以使用for in

3.4 Map和Set

es6新特性

Map：相当于键值对集合

var map = new Map([["a",1]["b",4]["c",0]])
// 获取值
map.get("a")
// 赋值
map.set("a",12)
// 删除
map.delete("a")
// 遍历，拿到的是一个键值对，注意：只适用于实现了迭代器的对象，array|{}没有实现，所以不能使用
for(let x of map){}

Set：相当于去重集合

var set = new Set([4,11,1,11,4])
// 添加
set.add(12)
// 删除
set.delete(4)
// 判断包含
set.has(3)
// 遍历
for(let x of map){}

4 严格检查模式

在js代码最开始，第一行，书写：'use strict'可以用作代码检查，前提是编辑器使用es6语法

5 流程控制

判断、循环等都和java一样，特别的：
遍历：

// 如果xxx为数组，则遍历的索引
// 如果为对象，则遍历key
for(var num in xxx){}
// 遍历数组，打印值
for(var num of xxx){}
// 或
xxx.forEach(function(){})

6 函数

定义：

var x = function(){}
// 或
function x(){}

函数参数：
函数内部arguments是一个关键字，表示函数的传入的参数列表。函数参数列表不一定要和传入的参数列表长度相同！！
可变长度参数：...变量（es6）

function f(x,y,...a){console.log(a}

全局函数：全局函数不属于任何一个内置对象。
JS 包含以下 7 个全局函数，用于一些常用的功能：

escape()
unescape()
eval()    执行代码
isNan()
isFinite()
parseFloat()
parseInt()

var s="1+2+3";
eval(s);//只能计算可计算的，数字与字符相加不可计算。
 
setTimeout("func()",1000);系统调用函数，每隔特定事件触发函数

6.1 变量作用域

在函数内定义的变量是独立的，无法穿透到外部，除非使用闭包

作用域提升：在相同作用域下，var定义的变量会被提升到顶部，但是赋值不会，所以会导致一些奇怪的现象。使用let不会，定义处之前的调用都报不存在错误。

所有全局变量都会绑定到window对象上，该对象中的方法和属性可以直接使用。为了防止变量冲突，建议定义一个唯一的全局变量，其他的都定义在这个变量里即可

var all = {}
all.a=123
all.func1=function(){}

6.2 构造函数

构造函数用来构造一个对象，包括属性和方法

function person(name,age){
	this.name=name;
	this.age=age;
	function speak(something){
	...
	}
	this.func=speak;
}
 
var p1=new person("jack",12);
p1.func("asdfads");

7 this

this的指向于调用者有关，谁调用this，this就指向谁

apply：可以修改this的指向，所有函数都有这个方法

// 将需要this指向的目标对象传进去就可以了
fun1.apply(目标对象)

8 常用对象

typeof关键字可以用来判断一个对象的类型：

typeof 123  // 'number'
typeof true  // 'boolean'

8.1 Date

日期类，可以获取当前时间日期，可以设置时间日期

1. getTime()方法，返回 1970 年 1 月 1 日至今的毫秒数。
2. getFullYear() 从 Date 对象以四位数字返回年份。
3. getMonth() 从 Date 对象返回月份 (0 ~ 11)。**需要+1**
4. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
5. getHours() 返回 Date 对象的小时 (0 ~ 23)。
6. getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
7. getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
8. getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。**星期日：0**

new Date(时间戳) // 获取时间戳代表的日期对象

该类没有格式化方式

8.2 JSON

格式：
对象：{}
数组：[]
所有的key都是字符串

对象转json：JSON.stringify(对象)
json转对象：JSON.parse(json字符串)

8.3 Math

Math对象包括以下方法：

PI
abs(x)
cos(x)/sin(x)
exp(x)
floor(x)小于等于的最大整数
ceil(x) 大于等于的最小整数
log(x)
max(x)
min(x)
pow(x,y)
random()
sqrt(x)

8.4 Function

示例：

function say(name,age){
    alert(name+" "+age);
}
say("pp",3);

直接new Function对象：

var sayFunc=new Function("name","age","alert(name+' '+age)");
sayFunc("pp",5);

Function属性：
返回参数个数：sayFunc.length
返回方法：sayFunc.toString() or sayFunc.valueOf()

9 面向对象

9.1 创建对象

对象初始化器

    var m={
        name:"m",
        age:2,
        shout:function(){
            alert(name+" "+age);
        },
        action:function(){
            alert("吃");
        }
    };
 
    alert(m.name);
    m.shout();

构造方法

    function m(name,age){
        this.name=name;
        this.age=age;
        this.shout=function(){
            alert("wo"+this.name+" "+this.age);
        };
        this.action=function(){
            alert("吃");
        };
    }
 
    var m=new m("m",2);
    alert(m.name);
    m.shout();

9.2 对象属性

对象属性
必须new出来才能调用
私有属性
只能用闭包取出来
类属性
类似java静态变量，可以用类名调用

function C(){
    this.objPro="对象属性";
    C.prototype.objPro2="对象属性2";
    var privatePro="私有属性";
}
C.classPro="类属性";
 
alert(C.classPro);
var c=new C();
alert(c.objPro);
alert(c.objPro2);

方法

function C(){
    var privateFunc=function(){
        alert("私有方法");
    };
    privateFunc();
    this.objFunc=function(){
        alert("对象方法");
    };
    C.prototype.objFunc2=function(){
        alert("对象方法2");
    };
}
C.classFunc=function(){
    alert("类方法");
};

9.3 继承

传统继承分为两种：
一种是相当于方法和属性的拷贝，在调用时是直接访问父类方法和属性；
一种是原型的继承，在访问时是调用子类的方法

// 原对象
function Animal(name,age){
    this.name=name;
    this.age=age;
    this.shout=function(){
        alert("我是："+this.name+",今年："+this.age);
    };
    this.action=function(){
        alert("会吃");
    };
}
// 拷贝，new Dog("pp",12)会发现就是拷贝了
function Dog(name,age){
    Animal.apply(this, [name,age]);
}
// 原型
Dog.prototype=new Animal();

原型继承的其他写法：
对象1.__proto__=对象2：对象1继承了对象2，可以调用对象2中的属性和方法，遵循就近原则
如果是函数：func1.prototype.新方法 = 方法体可以给func1新增一个方法

class继承（es6引入）：

class A extends B{
	constructor(name,grade){
		super(name);
		this.grade = grade;
	}
	myGrade(){}
}
// 使用
new A()

9.4 多态

function Animal(){
    this.say=function(){
        alert("我是动物");
    };
}
 
function Dog(){
    this.say=function(){
        alert("我是狗");
    };
}
Dog.prototype=new Animal();
 
function Cat(){
    this.say=function(){
        alert("我是猫");
    };
}
Cat.prototype=new Animal();
 
function say(animal){
    if(animal instanceof Animal){
        animal.say();
    }
}
 
var dog=new Dog();
var cat=new Cat();
say(dog);
say(cat);

9.5 对象增强写法

es6后支持这种方式定义对象，name会获取外部name的值作为对象的值，方法也不用写function了

let obj = {
	name,
	age,
	run(){}
}

10 BOM

浏览器对象：
window______document：文档
|___history ：浏览历史
|___location：地址栏

10.1 Window对象

window是js中默认对象，所有对其引用可以省略
Window.location=url;直接改变浏览器当前地址，相当于跳转

1. alert()   //弹出消息框
2. confirm()   弹出确认对话框
3. prompt()
4. setTimeout("func",ms) //定时执行一次
5. setinterval("func",ms)//执行多次
6. open(url,windowName,paras)  打开JS小个窗口
7. window.onload=... //发生在文档全部下载完毕的时候。
8. window.onresize=... //发生在窗口大小发生变化的时候。
9. close() 关闭当前窗口
10.showModalDialog(url,windowName,paras)   模式对话框，阻塞线程
11.returnValue 对话框返回值
12.dialogArguments 对话框参数

onload事件和onresize事件是标签属性，同时window也支持该事件

10.2 navigator对象

浏览器相关信息，可以被人为修改，不建议使用该对象

10.3 screen对象

获取屏幕相关信息

10.4 location（重要）

代表当前页面的url信息

host // 网址
href // 域名+网址
protocol // 协议 https
location.assign(网址) // 重定向

10.5 document

document.cookie可以获取网页的cookie
服务端可以设置cookie:httpOnly，这样就不能取出来

10.6 history

代表浏览器的历史记录
window.history.go(n)：n为当前页的偏移量，正负零，需要存在浏览历史。
history.back() ：后退
history.forward()：前进

10.7 模态对话框

str=window.showModalDialog("a.html","sss","dialogTop:100;dialogLeft:100;dialogWidth:20;dialogHeigh:5,scroll 1;status:0");
解释：
1–url
2–浏览器传递给对话框的一个对象数据，对话框可以通过window.dialogArguments取得
3–特征参数，由逗号分割

常用特征参数

dialogHeight>=100px
dialogWidth
diaologLeft
diaologTop
center:{yes|no|1|0} yes
help:{yes|no|1|0}   yes
resizable:{yes|no|1|0}  no
status:{yes|no|1|0} yes(modeless)   no(model)
scroll:{yes|no|1|0|on|off} yes

11 DOM

document_________links[]：超链接
|______anchors：锚点
|______images ：所有标记
|______forms ：所有form标记
|_____form elements ：form中所有控件集合

HTML标记对象
任何标记都是DOM对象，具备：nodeName/innerHTML/innerText等属性

常用操作dom的方式：

// 通过id来获取dom节点
var id1 = document.getElementById("id1")
// 获取父节点
var parent = id1.parentElement;
// 获取第一个子节点
var child = parent.childern[0]
// 移除一个节点（自己不能移除自己）
parent.removeChild(id1)
// 插入节点
parent.appendChild(id1)
// 创建节点，创建一个p标签，然后可以将这个标签放到其他标签里
var p = document.createElement('p')
p.id = "pid"
p.innerText = "hello p"
// 自定义赋值标签属性，将p这个元素的属性名为xxx的值赋为yyy
p.setAttribute("xxx","yyy")

12 事件

click事件
除button外，超链接、submit按钮、reset按钮都有click事件，但有内置事件处理，同时也可以添加事件。【自定义事件若返回true则执行默认事件，否则取消】。

鼠标事件
onMouseOver 进入范围触发
onMouseOut 离开范围触发
onMouseMove 移动鼠标触发
onchange 主要针对文本框类标记，textbox textarea select 等，当内容改变，则触发事件。

键盘事件
主要针对与字符输入相关的标记，如文本框
onKeyDown
onKeyUp
onKeyPress

表单提交事件
form上的提交属性：onsubmit
当onsubmit="return false"时，表单提交被拦截！！

对于使用前端做md5加密时，可以设置隐藏域，因为md5加密后密码变长，会在页面密码框中显式看出边长，不利于用户体验。使用隐藏域来，将变长的密码放在隐藏域，然后name=password，显式的密码框不设name，这样是最优的解决方案

13 JQuery

JavaScript方法库

相关文档参考：http://jquery.cuishifeng.cn

可以选择引入静态文件，也可以选择引入CDN

百度的CDN：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

使用格式：$(选择器).动作(函数)

// 绑定到按钮bt
$(#bt).click(function(){alert("click"})

13.1 入口函数

$(document).ready(function(){})
// or
$(function(){})

13.2 操作DOM

<ul id = "test>
	<li class = "js">abc</li>
	<li name = "py">py</li>
</ul>

// 操作里面的文本
// 获取值
var a = $('test li[name=py]').text();
// 设置值
$('test li[name=py]').text("js");
// 操作html
$('test li[name=py]').html(...);
// 操作css
$('test li[name=py]').css({"color":"red"});
// 显隐
$('test li[name=py]').show()
$('test li[name=py]').hide()
// 显隐切换
$('test li[name=py]').toggle()
$(window).width()