首页 > 编程学习 > 每日总结10

每日总结10

发布时间:2023/1/25 12:42:22

第二周考试

1.this关键字(指向问题)

不管是什么场合,this:它总是返回一个对象。

JS(ES5)里面有三种函数调用形式:

  1. 作为对象方法的调用:函数还可以作为某个对象的方法调用,这时this就指这个上级对象。这是函数的最通常的用法,属于全局调用,因此this就代表全局对象
  2. 作为对象方法的调用:函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
  3. 作为构造函数调用:所谓构造函数,就是通过这个函数,可以生成一个新对象。这时this就指这个新对象。

JS(ES6)里面有一种函数调用形式:

正常调用其形式,其他两种都是语法糖

apply的调用:apply( )是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。

                         因此这时this指的就是这第一个参数。


2. 对象和面向对象

对象:

属性和方法的集合叫做对象(万物皆对象)。

面向对象:

首先就是找对象,找不到就添加,如果该对象不具备所需要的方法或属性,那就给它添加。面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。

创建对象的方式(4种):

new Object、字面量、构造函数、原型


3.事件模型:事件委托、代理?如何让事件先冒泡后捕获?

事件委托:

又叫事件代理,利用事件冒泡,只指定一个事件处理程序管理某一类型的所有事件

原理:

事件冒泡机制,从最深的节点开始,然后从下至上传播事件

作用:

①支持为同一个DOM元素注册多个同类型事件;

②可将事件分为事件捕获和事件冒泡。

代码:addEventListener(event,function,useCapture布尔值)默认为false冒泡,true为捕获attachEvent()//IE8及IE更早版本detachEvent()//移除事件监听//不使用事件捕获window.onload = function(){let oBox = document.getElementById("box");oBox.onclick = function(){alert(1);   //不触发}oBox.onclick = function(){alert(2);   //触发}}//使用事件捕获window.onload = function(){oBox.addEventListener("click",function(){alert(1);   //触发})oBox.addEventListener("click",function(){
alert(2);   //触发})}

事件捕获:

当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。

当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件

事件冒泡:

当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件。

当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件

先冒泡后捕获:

根据w3c标准,应先捕获再冒泡。若要实现先冒泡后捕获,给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。

4.for···in和for···of的区别:(for···in取key,for··of取value)

①从遍历数组角度来说,for···in遍历出来的是key(即下标),for···of遍历出来的是value(即数组的值);

var arr = [99,88,66,77];for(let i in arr){console.log(i);   //0,1,2,3}for(let i of arr){consoel.log(i);   //99,88,66,77}

②从遍历字符串的角度来说,同数组一样。

③从遍历对象的角度来说,for···in会遍历出来的为对象的key,但for···of会直接报错。

var obj = {name:"Bob",age:25};for(var i in obj){
console.log(i)  // name age}for(var i of obj){
console.log(i)   //报错}

5.函数柯里化(卡瑞化、加里化)?

概念:

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

特点: 

①接收单一参数,将更多的参数通过回调函数来搞定;

②返回一个新函数,用于处理所有的想要传入的参数;

③需要利用call/apply与arguments对象收集参数;

④返回的这个函数正是用来处理收集起来的参数。

作用:

能进行部分传值,而传统函数调用则需要预先确定所有实参。如果你在代码某一处只获取了部分实参,然后在另一处确定另一部分实参,这个时候柯里化和偏应用就能派上用场。

用途:

我认为函数柯里化是对闭包的一种应用形式,延迟计算、参数复用、动态生成函数(都是闭包的用途)。

function add(x,y){  //普通函数console.log(x+y);}function curryingAdd(x){  //柯里化函数(闭包)return function(y){console.log(x+y);}}add(1,2)  //3curryingAdd(1)(2)   //3  

 

6.iframe的优缺点有哪些?

优点:

①iframe能够原封不动的把嵌入的网页展现出来;

②如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

③网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

④如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点:

①会产生很多页面不易管理;

②iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

③代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

④很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

⑤iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

7. 查找数组重复项

查找该元素首次出现的位置和最后出现的位置下标是否相同,同时判断新数组中是否不存在该元素,如果都满足则添加进新数组中去。

var arr = [1,2,45,44,45,2,89,1,1,2,1,2,44];Array.prototype.unique = function(){
var arr = this;var box = [];for(var str of arr){
if(arr.indexOf(str) != arr.lastIndexOf(str) && box.indexOf(str) == -1){
box.push(str);}}return box;}console.log(arr.unique());

8.垃圾回收机制

什么是垃圾:

一般来说没有被引用的对象就是垃圾,就是要被清除, 有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。

方法:

①JS具有垃圾自动回收的机制:

周期性执行,找出那些不在继续使用的变量,然后释放其内存。

②标记清除(常见):

当变量进入环境时,将这个变量标记为“进入环境”。当变量离开环境时,则将其标记为“离开环境”。标记“离开环境”的就回收内存。垃圾回收器完成内存清除工作,销毁那些带标记的值并回收他们所占用的内存空间。

③引用计数:

     原理:跟踪记录每个值被引用的次数。

     工作流程:当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样,当垃圾回收器下次再运行时,它就会释放那些引用次数为0的值所占用的内存。

9.数组扁平化

var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]]; 

第一种:function flatten(arr){
var box = [];arr.map(v => {
if(Array.isArray(v)){
box = box.concat(flatten(v))}else{
box.push(v);}})return box;}console.log(flatten(arr)); 第二种(不推荐):function flatten(arr){
return arr.toString().split(",").map(v => {
return Number(v);})}console.log(flatten(arr)); 第三种:function flatten(arr){
console.log(arr.join(","))return arr.join(",").split(",").map(v => {
return parseInt(v);})}console.log(flatten(arr)); 第四种:var arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];function flatten(arr){
return arr.reduce((result,item) => {
console.log(result,item)return result.concat(Array.isArray(item) ? flatten(item) : item);},[]);}console.log(flatten(arr));第五种:console.log([].concat(...arr));function flatten(arr){
while(arr.some(item => Array.isArray(item))){
arr = [].concat(...arr);}return arr;}console.log(flatten(arr));    

10.


本文链接:https://www.ngui.cc/el/2883534.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000