首页 > 编程知识 正文

web前端开发知识总结,前端开发基础知识

时间:2023-05-03 17:52:54 阅读:13874 作者:2189

1. typeof返回的数据类型typeof返回的数据类型包括未定义、字符串、编号、布尔、symbol、对象和函数类型。

2 .检查数组的方式isArray (方法,toString.call )、instanceof Array

3. js中的call、apply、bind方法的不同js中的call apply bind都是用于改变方法上下文(context ),可以从其他对象调用函数

let hxy={ name: 'hxy ',age: 22,say(x,y ) ) console.log (this.name ' : ' this.age xy ); }}let yyw={ name: 'yyw ',age :18 } hxy.say (1,2 ); //实际调用的this.say () this是指hxyhxy.say.apply ) ) yyw,[ 1,2 ] ); 调用apply时,this改变指向,this指向yyw。 相当于yyw.say () hxy.say.call ) yyw,1,2 )。 hxy.say.bind(yyw,1,2 ) ); 执行结果:

在上面的代码中,hxy对象的say方法为yyw,为apply与call、bind的区别

apply和call的作用完全相同,但参数的传递方式不同,如以下函数:所示

letfunc=function(arg1,arg2) { }; 可以通过以下方法调用:

func.call(this,arg1,arg2); func.apply(this,[arg1,arg2] ) func.bind (this,arg1,arg2) ) call按顺序传递参数,apply存储在数组中

bind ) )也用于改变上下文,但他返回不像call或apply那样立即调用的方法

Javascript有一个名为伪数组的对象结构。 特别是调用arguments对象以及getElementsByTagName、document.childNodes等返回NodeList对象的是伪数组。 无法应用Array中的推、pop等方法。

但是,由于可以通过Array.prototype.slice.call将其转换为具有真实数组length属性的对象,因此domNodes可以应用Array下的所有方法。

let arguments=array.prototype.slice.call (arguments ); 定义log方法,以便可以代理console.log方法

功能日志((console.log.apply ) ) console,arguments ); (; log(1; //1 log (1,2 ); //1 2 4 .闭包简而言之,闭包是其他函数的内部变量可读函数

闭包的简单应用:

function f1 () { var n=99; function f2 () { return n; }返回F2; }var result=f1 (; 控制台. log (result ) ); 执行结果返回了f1的变量n

闭包的作用之一是能够读取函数内部的变量,另一个是闭包内的变量始终保持在内存中,闭包内的变量在函数调用后不会自动擦除。 (这也容易发生内存泄漏,使用闭包时请注意及时清除不需要的变量。)

5. js事件机制DOM事件流分为三个阶段:事件捕获阶段、目标阶段和事件鼓泡阶段事件捕获(event capturing)。 通俗地说,用鼠标单击或触发DOM事件时,浏览器会从根节点向里传播事件。 也就是说,单击子元素。 当父元素通过事件捕获方法注册相应的事件时,首先触发事件冒泡(dubbed bubbling):与事件捕获相反,事件的冒泡顺序是从内到外将事件传播到根节点。

dom标准事件流的处理顺序首先捕获,然后冒泡

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width, 初始比例=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title document/title style # parent 文本对齐3360中心; 背景:绿色; line-height: 3; } #child { width: 100px; height: 100px; margin : 0自动; 后台: orange; } /style/headbody div id='parent '父元素div id='child '子元素/div/div script type=' text/JavaScript ' let parent=document document.body.addevent listener (' click ',function (e ) e ) console.log ) ' clickbody ); },false; parent.addeventlistener('click ',function (e ) e ) {console.log ) ' clickparent; },false; child.addeventlistener('click ',function (e ) ) e ) console.log ) clickCLILD ); //e.stopPropagation (; },false; /script/body/html UI接口如下:

点击子元素会发生什么呢?

单击子元素时,事件将冒泡,调用子元素的事件,然后调用父元素的事件。

addEventListener () )的第三个参数是是否采用事件捕获。 如果在此处选择false,则不捕获事件。

如果想阻止事件冒泡,只需调用e.stopPropagation ()。 如果要将方法添加到child的回调方法中:

可以看出事件没有继续在上面传达。

添加事件气泡函数:以测试事件气泡

parent.addeventlistener('click ',function (e ) ) { console.log ) '事件捕获}; },true; 添加此函数的结果为以下:

因为首先执行事件捕获,所以首先执行事件捕获,然后执行事件冒泡。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。