JavaScript高级[通俗易懂]
JavaScript 通俗易懂 高级
2023-06-13 09:12:01 时间
大家好,又见面了,我是你们的朋友全栈君。
一、高级函数
1、函数回调
函数回调的本质:在一个函数中,当满足一定的条件,回调函数会当作调用函数的参数传入
下面这个例子,faa作为回调函数,fbb作为调用函数。在JavaScript中内置的调用函数已经给我们写好了,我们只需写好fbb(回调函数)就好,就算你不写也不出错。
<script>
function faa(data) {
console.log('执行faa函数');//判断函数是否执行
var start_time = new Date().getTime();
var stop_time = new Date().getTime();
//设置执行数据处理数据的时间为3s
while (stop_time-start_time <3000) {
stop_time = new Date().getTime();
}
var time = stop_time - start_time;
console.log(data);
console.log('一共耗时',time)
}
function fbb(func) {
var data = 'fbb的数据';
if (func) {
func(data)
} else {
console.log('没有设置回调函数');
}
}
fbb(faa)
</script>
既然已经写到了函数的回调,那么再写一个面向对象的回调
<script>
var web = {
recved: null,
send: function () {
console.log('开始请求数据');
// 这里模拟请求数据花费的时间
start_time = new Date().getTime();
stop_time = new Date().getTime();
while (stop_time - start_time < 3000) {
stop_time = new Date().getTime();
}
var data = '请求得到后的数据';
if (web.recved && data) {
web.recved(data);
} else {
console.log('回调函数没有定义');
}
}
};
web.recved = function (data) {
console.log(data);
};
web.send();
</script>
上面这个例子,首先写一个对象,写好它的属性,方法。假如send方法就是内置的,早已经写好的方法,我们执行web.send(),虽然产生数据,但是最为程序员的我们并没有写处理这个数据的方法,所以我们为recved编写了一个处理数据方法,再去执行web.send(),这样产生的数据就能处理了。
再说,比如事件的绑定,我们为className为div的div标签绑定鼠标点击事件
在我们没有给div的点击事件写相应的函数时,程序并没报错,一旦为其添上方法,我们在触发该事件的话,那么我们写的方法会作为回调函数去执行。
2、函数的闭包
闭包目的:不允许提升变量作用域时,该函数的局部变量需要被其他函数使用
闭包本质:函数的嵌套,内层函数称为闭包
闭包的解决案例:①影响局部变量的生命周期,持久化局部变量 ②解决变量污染
//这就是闭包,一个函数想使用另一个函数局部变量
function faa() {
var date = [1,2,3,4];
function fbb() {
console.log(date)
}
fbb();
}
faa();
//通过闭包,可以提升函数内部的局部变量
function faa() {
var data = '获取到的数据';
function fbb() {
return data
}
fbb();
}
var a = faa();
console
二、循环绑定
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0 ; i < lis.length;i++) {
lis[i].onClick = function () {
alert(i);
}
}
</script>
/*你在页面点击li标签,会弹出5,上面全部都是弹出5 为什么会这样,就是循环绑定出现的变量污染,var是ES5中定义变量的方法,是没有块级作用域的,当for循环结束时,i就等于5*/
//我们可以通过闭包函数去解决这个问题
<script> var lis = document.querySelectorAll('li'); for (var i = 0 ; i < lis.length;i++) {
(function(i){ lis[i].onclick = function () { alert(i); };
})(i) } </script>
/*我们将为为li标签绑定点击事件的方法,写出一个闭包函数,外函数就是一个匿名函数的自调用。循环一次,先是匿名函数自调用一次,产生一个局部空间存放函数体代码,这样循坏5次,就产生了五个不同局部空间的
函数,当触发点击事件,就去执行相对应的回调函数,所引弹出的是它对应的索引值*/
//我们可以通过对象的属性去解决变量污染问题
<script> var lis = document.querySelectorAll('li'); for (var i = 0 ; i < lis.length;i++) {
lis[i].index = i;
lis[i].onclick = function() {
alert(this.index)
};
}
</script>
//前面说了var定义的变量是无块级作用域的,我们可以通过ES6的语法,let去解决变量污染问题
<script>
let lis = document.querySelectorAll('li');
for (let i = 0 ; i < lis.length;i++) {
lis[i].onclick = function () {
alert(i);
}
} </script>
三、面向对象Js
<script>
//定义两个空对象
var obj1 = {};
var obj2 = new Object();
var zhuyu = {
name:'zhuyu',
age : '21',
} //创建一个zhuyu对象
//查看属性的方法:zhuyu.name zhuyu['age']
//添加/修改属性的方法:zhuyu.age = '22' 添加:zhuyu.sex = 'male'
//删除属性的方法:delete zhuyu.sex
//方法的添加修改删除和属性一样。方法的调用直接对象名.方法名()
//构造函数,相当于python中面向对象的类
//ES5中
function People(name,age,sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.eat = function () {
console.log('eat.......');
}
}
//JavaScript的面向对象也有继承,多态,封装三大特性。
简单写写继承:子级里继承父级属性,父级.call(this,name,age);
子级里继承父级方法,子级.prototype = new 父级;
//ES6中
clsaa People() {
constructor(name,age) {
this.name = name;
this.age = age;
}
//实例方法
eat() {console.log('eat........')}
//类方法
static do() {'do.....'}
}
</script>
四、定时器
//setInterval(持续性定时器)
//setInterval(函数, 毫秒数, 函数所需参数(可以省略));
var timer = setInterval(function() {console.log("呵呵");}, 1000)
//setTimeout(一次性定时器)
//setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
setTimeout(function (data) {console.log(data);}, 1000, "数据");
//清除定时器
clearTimerout()|clearInterval()
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/155349.html原文链接:https://javaforall.cn
相关文章
- Javascript高级程序设计第四版详细测评[通俗易懂]
- JavaScript高级程序设计(读书笔记)(七)[通俗易懂]
- javascript中Date常用方法[通俗易懂]
- JavaScript和Java的区别[通俗易懂]
- html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…[通俗易懂]
- JavaScript阶乘算法[通俗易懂]
- 【说站】javascript中eval的用法
- HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JavaScript学习总结(十六)——Javascript闭包(Closure)详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- HTML JavaScript
- 通过JAVAScript实现页面自适应
- php后台程序与Javascript的两种交互方式
- Javascript判断Flash是否加载完成的代码
- JavaScript设计模式富有表现力的Javascript(一)
- 一些javascript一些题目的解析
- Javascript中的isNaN函数使用说明
- Javascript异步加载详解(浏览器在javascript的加载方式)
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- JavaScript产生不重复的随机数三种实现思路
- Javascript自定义函数判断网站访问类型是PC还是移动终端
- 使用JavaScript编写简单计算器
- JavaScript中的方法调用详细介绍
- JavaScript中伪协议javascript:使用探讨
- javascript面向对象之定义成员方法实例分析
- javascript二维数组转置实例