鄙人不才，今首次入驻CSDN这个人才济济的大家庭，希望和大家一起取长补短，共同进步。

最新推荐文章于 2024-02-08 07:00:00 发布

happy monkey

最新推荐文章于 2024-02-08 07:00:00 发布

阅读量258

点赞数 1

分类专栏： javascript高级

本文链接：https://blog.csdn.net/qq_39107857/article/details/88396667

版权

javascript高级专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

鄙人不才，今首次入驻CSDN这个人才济济的大家庭，希望和大家一起取长补短，共同进步。
       我的博客记录的是本人学习全栈的全部知识点，我会将自己平时学的知识记录在博客上，供各路大神点评，也给和我一样的菜鸟一些参考。
       我的文章分为上中下两篇，上篇是我的技术分享，中篇是我的今日生活分享，下篇是遇到的一些非常有意思的事，有得时候是一个笑话，有得时候是分享一部好的电影，有得时候是分享一首好听的音乐。
       life bitter short，oneself stupidity oneself happy!

上篇：01:apply()和call()，02:bind()，03:高阶函数之函数作为参数使用，04:高阶函数之函数作为返回值使用，05:作用域，06:作用域链，07:预解析，08闭包及闭包小案例

01 apply()和call()

问：为什么要学习apply 和 call?
答：因为在某些时候 我们需要在一个函数中调用另一个对象的属性
问：apply 和 call 的作用是什么呢?
答：它们都是改变this的指向
问：apply()和call()两者之间的区别是什么？
答：语法区别，
		函数.apply(要指向哪个对象,[该函数的参数1，该函数的参数2,...]);
		函数.call(要指向哪个对象，该函数的参数1，该函数的参数2,...);

	//	例子：
    // 对象的指向
	var obj = {
		age : 10,
		sex : '女'
	}

	function fn(x,y){
		console.log((x+y)+'------------'+this);
	}
   	
   	fn(10,20);
   	fn.apply(obj,[10,20]);
   	fn.call(obj,10,20);

控制台：
在这里插入图片描述
call和apply总结：
都是用来调用函数的，而且是立即调用
如果第一个参数指定了‘null’或者’undefined’则内部this指向window
但是可以在调用函数的同时，通过第一个参数指定函数内部，‘this’ 的指向
call调用的时候，参数必须以参数列表的形式进行传递，也就是以逗号分隔的方式一次传递即可
apply调用的时候，参数必须是一个数组，然后在执行的时候，会将数组内部的元素一个一个拿出来，与形参一一对应进行传递

> **02 bind方法：** 问：为什么要学bind方法？当this指向新的函数后，如果想实现传递的形参和调用函数的形参两者都保留合并就需要用到bind()。

	// 例子:
	function fn(x,y){
		console.log(x+y+'---------'+this);
		console.log(arguments);
	}
	var obj = {
		name: 'zs',
		age: 90
	};
	
	var ff = fn.bind(obj,35,40);	//1.在 bind 的同时，以参数列表的形式进行传递
	ff(60,90);	//2.在调用的时候，以参数列表的形式进行传递

控制台:
在这里插入图片描述
总结:
bind 可以用来指定内部this的指向，然后生成一个改变了this指向的新函数
它和call，apply 最大的区别是：bind 不会调用
bind支持传递参数，它的传参方式比较特殊，一共有两个地方可以传参
如上图代码注释所述。
bind 神奇之处来了，注意：
有的人会问，那到底以谁bind的时候传递参数为准呢？还是以调用的时候传递的参数为准呢？
答案是：两者合并，bind的时候传递的参数和调用的时候传递的参数会合并到一起，传递到函数内部。如图所示：arguments 接收到的实参是四个。
哈哈哈哈万万没想到吧。

>03 **高阶函数之函数作为参数使用** 作为函数的参数，有很多，例如：数字，变量，数组，函数。此处要讲解的是，函数作为函数的参数使用。

	例如：
	function f1(fn){
		console.log('f1的函数');
		fn(); //此时 fn当成一个函数来使用的
	}
	//fn是参数，最后作为函数使用了,函数是可以作为参数使用的
	
	//传入匿名函数
	f1(function(){
		console.log('我是匿名函数');
	});
	
	//命名函数
	function f2(){
		console.log('f2的函数');
	}
	f1(f2);
	//函数作为参数的时候，如果是命名函数，那么之传入函数的名字，没有括号；

04 高阶函数之函数作为返回值使用

	function f1(){
		return function(){
			console.log('我是函数，但此时是作为返回值使用的');
		}
	}

05 作用域
作用域有三种 局部作用域 和 全局作用域 以及 块级作用域
注意:js中没有块级作用域-------> 如下所示
如：{
var a = 10; //可以被外部使用
}

	//script标签中定义的变量是全局变量
	//函数中定义的变量是局部变量
	//局部变量和全局变量的示例
	var f1 = 10;   //全局变量
	function f2(){
		var num = 10;  //局部变量
	}

06 作用域链
问：什么是作用域链？
答: 变量的使用，从里到外，层层的搜索，搜索到了就可以直接使用了，层层搜索，搜搜到0级作用域的时候，如果还没找到这个变量，结果就是报错

	//作用域链示例:
	var num = 10;		// 0级
	function fn(){
		var num = 20;	//1级
		function fn2(){
			var num = 30; 	//2级
			console.log(num);  //输出结果是：30 
		}
	}

07 预解析
问：什么是预解析？
答：就是浏览器解析之前，把变量的声明和函数的声明提升到该作用域的最上面.

	//变量提升声明
	//函数声明提升
	//示例
	console.log(num);		//输出的结果是 undefined    
	var num = 10;		
	console.log(num);		//输出的结果是 10；
	
	//为什么第一个是undefined呢？  因为变量因为预解析的原因 实则在代码运行的时候是下面这样的
	var num；		
	console.log(num);
	num = 10;
	console.log(num);
	//哈哈哈哈  预解析是个磨人的小妖精。 不过规范程序员写程序时，应该要先声明再使用。

08 闭包和闭包小案例
问：什么是闭包？
答：闭包就是能读取其它函数内部变量和函数
闭包的模式: 函数模式的闭包对象模式的闭包
闭包的作用：缓存数据延长作用域
必要的优点和缺点：优点缓存数据，缺点占用内存，可能会造成内存溢出

	//函数模式的闭包
	function outer(){
		var num = 10;
		function inner(){
			console.log(num);
		}
		inner();
	}
	outer();

	//对象模式的闭包
	function fn(){
		var num = 10;
		var obj = {
			name: '扎根',
			age: num
		}
		console.log(obj.age);
	}

总结：
由于在js语言中，只有函数内部的子函数才能读取局部变量。因此可以把闭包简单的理解成定义在一个函数内部的函数所以,在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

09 闭包小案例 (点赞)

	<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>对自己狠点</title>
  <style>
    ul {
      list-style-type: none;
    }

    li {
      float: left;
      margin-left: 10px;
    }

    img {
      width: 200px;
      height: 180px;
    }

    input {
      margin-left: 30%;
    }
  </style>
  <script>

  </script>
</head>

<body>
  <ul>
    <li><img src="images/ly.jpg" alt=""><br /><input type="button" value="赞(1)"></li>
    <li><img src="images/lyml.jpg" alt=""><br /><input type="button" value="赞(1)"></li>
    <li><img src="images/fj.jpg" alt=""><br /><input type="button" value="赞(1)"></li>
    <li><img src="images/bd.jpg" alt=""><br /><input type="button" value="赞(1)"></li>
  </ul>
  <script>
    // 需求: 点击按钮  让 按钮的赞的数字+1
    // 思路: 找到按钮 给按钮添加点击事件  获取按钮的值  +1
	 // 1.获取按钮
    function $(seclector) {
      return document.querySelectorAll(seclector);
    }
    // 2.书写函数
    function getValue() {
      var num = 2;			// 默认是1，所以在按钮点击时，如果此时num也是1 num++会出现鼠标点击两次才加1，原因是num++是先实现后运算。
      return function () {  
        this.value = "赞("+(num++)+")";  
      }
    }
    
    // 3.遍历按钮v
    for (var i = 0; i < $("input").length; i++) {
      // 4.给按钮添加点击事件
      $('input')[i].onclick = getValue();  //闭包每次会调用return 返回的函数，只有第一次才调用getValue(); 
    }
  </script>
</body>
</html>

中篇:今日分享

哎呀，今天第一次写博客，写博客的起源是因为受到一位前辈的影响才下定决心每天更新一篇博客。 
今天和往常不同的是，今天我花了7个小时的时间研究了这个博客。
不过最后还是写出来了一篇完整的。 
哈哈哈哈哈 有点小高兴！ 不知道会不会有人看，算了，不去想这些事情，我的初衷是记录自己学习的每一天。
当然，如果有人看，我觉得可以给予后生一些指正，让我以后能写得更好一点。非常感谢！

下篇：每日分享

今天想分享的是一首我自己喜欢的歌，我觉得毕竟是第一次写，当然要拿出自己最喜欢的歌，哈哈哈哈哈。
《晚安》丢火车

写得不好，仅供参考！
欢迎大家留言指正！
再次非常感谢！

happy monkey

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鄙人不才，今首次入驻CSDN这个人才济济的大家庭，希望和大家一起取长补短，共同进步。

前言：鄙人不才，今首次入驻CSDN这个人才济济的大家庭，希望和大家一起取长补短，共同进步。&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;我的博客记录的是本人学习全栈的全部知识点，我会将自己平时学的知识记录在博客上，供各路大神点评，也给和我一样的菜
复制链接

扫一扫