第四周js学习笔记

最新推荐文章于 2023-04-23 15:25:48 发布

雨中风铃清酒微凉

最新推荐文章于 2023-04-23 15:25:48 发布

阅读量295

点赞数

文章标签： javascript 学习

本文链接：https://blog.csdn.net/caicaizi3/article/details/126815546

版权

1、*****Object面向对象：

1、*****继承：父对象的成员（属性和方法），子对象可以直接使用

为什么继承：代码重用！节约内存空间

何时继承：只要多个子对象公用的属性和【方法】，都要集中定义在父对象之中

2、JS的面向对象是基于原型（爸爸）的

什么是原型：保存一类子对象共有属性和共有【方法】的父对象（原型对象），每个对象天生就有一个原型

1、*获取原型对象：2种

1、对象名.__proto__; - 前提：必须先创建出一个对象，才可以使用此属性找到原型对象

2、构造函数名.prototype; - 构造函数名：Array、Function、Date、RegExp、h52204... - 哪怕没有创建过任何对象也能找到原型

2、*****两链一包：

作用域链：以函数EC的scope chain属性为起点，经过AO逐级引用，形成的一条链式结构，作用：查找变量的，带来了变量的使用规则：优先使用自己的，自己没有找全局，全局没有则报错

闭包：保护了一个可以反复使用的局部变量的词法结构

原型链：每个对象都有一个.__proto__的属性，可以不断的连续.找到爸爸-爷爷-祖祖...形成的一条链式结构

经过尝试，发现最顶层：Object.prototype是对象的原型，所有也就有了一句话：万物皆对象

作用：查找属性和方法，自己没有的属性和方法，可以自动顺着原型链进行查找，所以我们知道为什么人人都可以使用toString

3、获取到原型对象则可以设置共有属性和共有方法

原型对象.属性名=属性值;//共有属性

原型对象.方法名=function(){};//共有方法

自有和共有

自有：保存在对象本地的属性

共有：保存在父（原型）对象的属性，所有的子对象都可以使用

笔试题：

1、*如何判断自有和共有

判断自有：obj.hasOwnProperty("属性名");

返回一个布尔值：true说明是自有，false可能是共有也可能是没有

判断共有：2个条件：

1、不是自有：obj.hasOwnProperty("属性名")==false;

2、自动在原型链检查："属性名" in 对象名;

if(obj.hasOwnProperty("属性名")==false&&"属性名" in 对象名){

//共有

}

完整版：

if(obj.hasOwnProperty("属性名")){

console.log("自有");

}else{

if("属性名" in 对象名){

console.log("共有")

}else{

console.log("没有")

}

2、*修改或删除属性

1、修改和删除自有属性

修改：obj.属性名=新值;

删除：delete obj.属性名;

1、修改和删除共有属性

修改：原型对象.属性名=新值;

删除：delete 原型对象.属性名;

3、*****为老IE的数组添加indexOf方法 - 这道题不是固定的：为某一类人设置一个方法

if(Array.prototype.indexOf===undefined){//我不希望主流浏览器也执行到这些代码，我只希望老IE执行到

Array.prototype.indexOf=function(key,starti){//indexOf的执行原理

starti===undefined&&(starti=0);//说明用户没有传入开始位置，我们就给用户设置为从下标0开始查找

for(var i=starti;i<this.length;i++){//从开始位置处，循环数组后面的每一个文字和用户输入的关键字进行匹配

if(this[i]==key){

return i;//匹配到了返回对应的下标

}

//没匹配到，返回-1

return -1;

}

</script>

4、*****判断x是不是数组？4种方法

1、判断x是不是继承自Array.prototype

Array.prototype.isPrototypeOf(x);

如果返回true，说明是数组，否则不是数组

2、判断x是否是由构造函数Array创建的

x instanceof Array

3、ES5提供了一个API：Array.isArray(x); - 此方法不是人人都有，而且ES5以上的东西，老IE都不支持（别怕，现在的开发流行趋势，不是PC端，而是移动端，IOS（safari）和andriod（chrome））

4、***输出对象的字符串形式：

在Object的prototype原型上放着最原始的toString

原始的toString，默认输出[object 构造函数名]

***多态（override）/重写：子对象觉得父对象的成员不好用，可以在本地定义同名成员，覆盖父对象之中的成员

不专业的理解：同一个函数，不同的人来使用，效果是不同的，其实根本不是同一个函数

我希望借用到函数：跳过爸爸，直接去找爷爷拿toString

Object.prototype.toString.apply(x)==="[object Array]";

5、*实现自定义继承：

1、实现两个对象之间的继承

子对象.__proto__=父对象;

2、直接批量设置继承

构造函数名.prototype=父对象;

时机：先设置好父对象，再创建子对象

2.ES5&ES6：就是在ES3的基础添加了一些新特性、新语法、新API - 简化ES3

1、ES5：

1、保护对象：保护对象的属性和方法

1、四大特性：每个属性都有四大特性

{

"value": 3500, //实际保存属性值的地方

"writable": true,//开关：控制着是否可以被修改

"enumerable": true,//开关：控制着是否可以被for in循环遍历到

"configurable": true//开关：控制着是否可以被删除

}

修改四大特性：

Object.defineProperties(obj,{

"属性名":{四大特性}

})

2、三个级别：

1、防扩展：禁止给对象添加任何新属性

Object.preventExtensions(obj);

2、密封：禁止给对象添加任何新属性，也不能删除属性

Object.seal(obj);

3、冻结：禁止给对象添加任何新属性，也不能删除属性，也不能修改属性

Object.freeze(obj);

不重要的原因：

1、如果你不用面向对象，就不用保护

2、前辈们都没有保护

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2、*****数组的新的API：3组6个：

1、判断：判断数组中的元素是否符合要求

every - 每一个：判断数组中的每个元素【都】要符合要求最后结果才为true，类似于&&，只要有一个不满足，结果则为false

语法：

var bool=arr.every(function(val,i,arr){

console.log(val);//当前元素

console.log(i);//当前元素的下标

console.log(arr);//数组本身

return 判断条件;

})

</script>

some - 有一些：判断数组中的是否【包含】符合要求的元素，只要有一个最后结果则为true，类似||，只要有一个满足，则为true，只有全都不满足，结果才为false

语法：

var bool=arr.some(function(val,i,arr){

return 判断条件; //返回bool值

})

</script>

2、*遍历：对每个元素执行相同或相似的操作

forEach：直接修改原数组

语法：

arr.forEach(function(val,i,arr){

操作;

})

</script>

map：不修改原数组，返回新数组

语法：

var newArr=arr.map(function(val,i,arr){

return 操作;

})

</script>

3、过滤和汇总：

过滤：筛选出原数组之中符合条件的元素组成一个新数组！原数组不变！

语法：

var newArr=arr.filter(function(val,i,arr){

return 判断条件; //返回数组

})

</script>

汇总：讲数组中每一个元素，取出来整合为一个最终结果

语法：

var sum=arr.reduce(function(prev,val,i,arr){

//prev:前一个元素

return prev+val;

},基础值)

//sum=return prev+val+基础值

</script>

以上6个API其实都是简化了同一件事，for循环

强调：此六个API只有数组可以使用

3、Object.create()方法：直接用父对象创建子对象，并且子对象扩展自有属性

语法：

var 子对象=Object.create(父对象,{

"自有属性名":{四大特性},

// ...

})

</script>

4、严格模式：很严格

如何开启："use strict",可以放在任何一个作用域的顶部

1、禁止给未声明的变量赋值 - 解决了全局污染

2、将静默失败升级为了错误

以后如果三阶段学了gulp和webpack，可能打包时就会自动给你生成一个"use strict"，你去把他删掉

5.*****call、apply、bind：不是自己的方法，也可以用到

1、call、apply：【临时替换函数中的this】，借用

差别：call，要求传入函数的实参必须单独参入

aplly，要求传入函数的实参必须是一个数组

语法：要使用的函数.call(使(借)用的对象,实参1,...);

要使用的函数.apply(使(借)用的对象,arr); - apply除了有借用的功能，还会悄悄的打散我们的数组

2、bind：【永久替换函数中的this】，买

语法：var 新函数=要使用的函数.bind(要使用函数的对象)

3件事：

1、创建了一个和原函数功能完全一样的新函数

2、将新函数中的this永久绑定为你指定的对象

3、将新函数中的部分参数永久固定

强调：bind绑定在新函数中的this，无法被call、apply再次替换借走

总结：如果临时调用一个函数，立刻执行时 -- call/apply

如果创建一个函数提前绑定this，不一定希望立刻执行 - bind

个人更推荐：借用，白嫖

使用场景：

1、比较出数组中的最大值和最小值：Math.max/min.apply(Math,arr)

2、得到Object最原始的toString：Object.prototype.toString.call/apply(arr);

3、将类数组对象转为普通数组：var 新数组=Array.prototype.slice.call/apply(类数组对象)

其实ES5还提供了一个数组API，可以直接将类数组对象转为普通数组：var 新数组=Array.from(类数组对象)

ES6：新语法：

0、常量也是ES6提供的

1、*模板字符串：简化字符串拼接，支持在模板字符串之中书写变量

语法：`我的名字叫${name}`

在字符串中实现了一个简单的js环境

2、*let关键字：创建变量以后优先使用let，再考虑var

let 变量名=值;

优点：

1、解决了声明提前

2、添加了块级作用域，一个{}就是一个块

3、如果绑定事件时，用到了let来遍历，那么let会记录住你当前元素的下标 - 你以后再也不需要自定义下标了

3、*箭头函数：简化一切的回调函数

去掉function，()和{}之间添加=>，形参只有一个可以省略()

函数体只有一句话，省略{}

函数体只有一句话，并且是return，省略{}和return

注意：在箭头函数中的this，指向函数体外面的元素

4、for...of：垃圾

for(var v of arr){

v - 直接拿到值

}

1、不能修改原数组

2、不能遍历hash数组和对象

5、*解构赋值

6、Set和Map类型

7、*模块化开发

8、*Promise

9、*Class

二阶段可用可不用，但是三阶段必然会用上

3.DOM

1、什么是DOM：Document Object Model（文档对象模型）

将每一个标签/属性/文本/注释/元素，都看作是一个DOM元素/节点/对象（提供了一些操作元素的属性/方法）

面试题**：

HTML/XHTML/DHTML/XML 分别是什么？

1、HTML - 网页

2、XHTML - 更严格的HTML，HTML5->XHTML->HTML4.01

3、DHTML - 动态的网页：D：Dynamic - 其实并不是新技术、新概念，是将现有技术的整合统称，让我们在离线时，网页也具有动态效果

DHTML：html+css+js（dom）

4、XML - 未知的标记语言，一切的标记由自己定义，数据格式

DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3部分：

1、*核心DOM：【无敌】，既可以操作HTML 又可以操作XML

缺陷：API比较繁琐

2、*HTML DOM：只能操作HTML，API简单，缺陷：比如属性部分，只能访问标准属性，不能访问自定义属性

3、XML DOM：只能操作XML，XML已经淘汰了 - 现在最流行的数据格式是JSON

开发建议：优先HTML DOM，HTML DOM实现不了我们在用核心DOM进行补充

2、DOM树：树根：document - 不需要我们创建，一个页面只有一个document对象，由浏览器的js解释器自动创建

作用：可以通过树根找到页面上的每一个DOM元素/节点/对象，也可以操作它

3、每个DOM元素都有三大属性：

1、elem.nodeType：描述节点的类型

elem:页面元素的id或找到时的名称

document节点：9

element(元素)节点：1

attribute节点：2

text节点：3

以前有用：判断xx是不是一个页面元素 - 因为我教你们方法children，是不会得到文本节点的，但是以前的childNodes会得到文本节点

2、attrNode.nodeValue：描述节点的值

以前有用：先拿到属性节点，再用此属性去获取属性值

3、***elem.nodeName：描述节点的名字

拿到当前元素的标签名，判断xx是什么标签

注意：返回是一个全大写组成的标签名

今天唯一的目的：找元素

4、*通过关系获取元素：

父：xx.parentNode

子：xx.children - 集合：只能找到儿子

第一个儿子：xx.firstElementChild

最后一个儿子：xx.lastElementChild

前一个兄弟：xx.previousElementSibling

后一个兄弟：xx.nextElementSibling

5、*****递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

何时使用：遍历DOM树，专门用于【遍历层级不明确】的情况，既可以遍历层级不明确的DOM树，也可以遍历层级不明确的数据！

如何使用：2步

function 函数名(root){

1、第一层要做什么直接做！

2、判断他有没有下一级，如果有下一级，再次调用此函数，但是传入的实参是他的下一级元素

}

函数名(实际的根)

算法：深度优先！优先遍历当前节点的子节点，子节点遍历完才会跳到兄弟节点

递归的缺点：同时开启大量的函数调用，大量消耗内存，只有一个情况才用：【遍历层级不明确】

递归 vs 循环：

递归：优点：直观、易用

缺点：性能较低，尽量只在层级不明确的时候使用

循环：优点：几乎不占用内存

缺点：难得批爆

6、专门提供了一个遍历层级不明确的DOM树的API：TreeWalker - 这是一个在DOM树上行走的人

2步：

1、先创建出tw：

var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

2、tw对象过后，你会得到一个方法，反复调用nextNode方法找到下一个节点，迟早有一天会等于null，说明没找到，公式

while((node=tw.nextNode())!=null){

node要干什么

}

缺陷：

1、自动的跳过根元素，根元素是不会做任何操作的

2、仅仅只能遍历层级不明确的DOM树，不能遍历层级不明确的数据

7、API直接找元素：

1、根据HTML的特点去找元素

ID：var elem=document.getElementById("id值");

*标签名和*class和name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名");

2、***根据CSS选择器去找元素：

1、单个元素：

var elem=document.querySelector("任意的css选择器");

强调：万一选择器匹配到多个，只会返回第一个

没找到null

2、***多个元素：

var elem=document.querySelectorAll("任意的css选择器");

强调：找到了返回集合，没找到返回空集合

更适合做复杂查找 - 个人更喜欢他

面试题/笔试题：

getXXX 和 querySelectorAll 有什么区别？

返回结果不同的：

1、getXXX：返回的是要给动态集合HTMLCollection

优点：数据始终和DOM树实时挂钩

缺点：每次DOM树进行修改，都会悄悄的再次查找元素，效率相对较低

2、querySelectorAll：返回的是要给静态集合NodeList

优点：每次不会悄悄重新查找，效率较高，而且还支持使用forEach！

总结：我现在【找元素】的方式：

1、直接查找元素：getXXX 和 querySelectorAll

2、通过关系找元素：

3、层级不明确的情况才用递归！

8.通过DOM操作元素

<标签属性名="属性值" style="样式">内容</标签>

强调：页面上获取/设置到的一切数据都是字符串类型

1、元素的内容：

1、*elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题的，可以识别标签

获取：elem.innerHTML

设置：elem.innerHTML="新内容"

2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，有兼容性问题的（老IE不支持），不能识别标签

获取：elem.textContent

设置：elem.textContent="新内容"

老IE：elem.innerText; - 我们第一次见到小三上位，innerText某次浏览器更新后，现在主流浏览器也支持此属性

为什么老IE不将就主流？- 微软的，生活中，PC端只有 windows系统和 MAC系统（土豪），windows系统的使用的人多

3、*input.value：获取或设置表单控件的值 - 只要你做正则验证

获取：input.value

设置：input.value="新值"

2、元素的属性：

1、*获取属性值

核心DOM：elem.getAttribute("属性名");

HTML DOM：elem.属性名;

2、*设置属性值：

核心DOM：elem.setAttribute("属性名","属性值");

HTML DOM：elem.属性名="属性值";

3、删除属性值：

*核心DOM：elem.removeAttribute("属性名");

HTML DOM：elem.属性名="" - 删除不推荐使用HTML DOM，删除不干净属性节点，而有的属性，光有属性名就已经具有功能了

4、判断有没有属性 - 垃圾

核心DOM：elem.hasAttribute("属性名") - 仅仅只能判断有没有这个属性，不能判断出属性值是什么，往往我们自己用获取属性值的操作，获取到了过后再去进行比较运算

HTML DOM：elem.属性名!="";

HTML DOM缺陷：

1、class需要写为className

2、不能操作自定义属性

开发中：优先使用HTML DOM，HTML DOM满足不了再用核心DOM补充

3、元素的样式：

1、*内联样式：优先级最高，一定会覆盖其他的样式

仅仅当前元素可用，不会牵一发动全身

获取样式：elem.style.css属性名;

设置样式：elem.style.css属性名="css属性值";

唯一的缺陷：获取样式时，只能获取到内联样式

2、样式表中的样式 - 学了你也懒得用：

//1、找到你想要操作的样式表

var sheet=document.styleSheets[i];

//2、获取样式表中所有的样式规则

var rules=sheet.cssRules;

//3、找到自己想要操作的样式规则

var rule=rules[i];

//4、要么获取要么设置

console.log(rule.style.css属性名);

rule.style.css属性名="css属性值";

</script>

一切的获取都是为了判断

一切的设置都是修改或添加

扩展：

html5 和 ES5以上的一切东西老IE都不支持，但是也不要怕，其实以后做兼容的情况很少

趋势：手机端

PC就算要做也只做到IE8 win11 - 才出来的系统不稳定

4、创建元素并且渲染DOM树：3步

1、创建空标签：

var elem=document.createElement("标签名");

2、添加必要的属性和事件

elem.属性名="属性值";

elem.on事件名=function(){操作}

3、上树：将js内存中的新标签放到DOM树上

*父元素.appendChild(elem); - 将elem追加到父元素里当最后一个儿子

父元素.insertBefore(elem,已有子元素) - 将elem追加到父元素里，但是会插入在已有子元素的前面，缺点：会影响到其他元素的下标

父元素.replaceChild(elem,已有子元素) - 将elem追加到父元素里，但是会替换在已有子元素的

5、删除元素：elem.remove();

恭喜你：核心DOM已经全部学习完毕，总结：你无敌，DOM到底干了什么事？

增、删、改、查（DOM结构：元素、属性、文本、样式）

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML DOM常用对象：简化【核心DOM】

1、image对象：仅仅只是简化了创建语句

创建：var img=new Image() === var elem=document.createElement("img");

注意：不是人人都有构造函数创建方式

2、form对象：简化了查找元素

查找form元素：var form=document.forms[i];

查找form元素中的表单控件：var inp=form.elements[i];

*专属事件：form.οnsubmit=function(){//提交事件：只会再提交的一瞬间执行

return false;//阻止提交

}

3、*select对象：

属性：1、select.options;//得到select下面所有的option，完全等效于xx.children;