自执行函数和this指向的问题

最新推荐文章于 2024-03-20 20:34:20 发布

qq_52068757

最新推荐文章于 2024-03-20 20:34:20 发布

阅读量501

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_52068757/article/details/124296688

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

自执行函数

// 函数的自我执行：函数不需要调用，声明后就立即执行

(function fn(){
			console.log(111)
	})()

也可以在最后的的括号传参数

(function fn(a,b){
//			console.log(a+b)
//		})(3,4)

也可以用一个变量来接收

var result = (function fn(a,b){
		return a*b
		})(3,4)

// 有一个变量接收结果，第一个小括号可以省略。像这样

var result = function fn(a,b){ 
		return a*b
	}(3,4)
console.log(result)

自执行函数一般在封装第三方插件时使用，好处就是避免变量命名的冲突

this指向的问题

每产生一个上下文，上下文中都会生成一个this对象

	btn.onclick = function(){ // btn.onclick();
		// 每一个事件处理程序中的this.指向当前事件源对象
		console.log(this);
		window.box()
	}

function box(){
		console.log("可以使用window对象来调用box这个方法，只不过使用window下的属性或方法的时候一般会省略window这个对象 ")
		console.log(this)   //   window
	}

// 函数中的this指向情况
// 1. 每一个事件处理程序中的this.指向当前事件源对象
// 2, 每一个函数内部的this，指向调用这个方法的当前对象
// 3, 自定义函数内部的this指向window

	"use strict"
		
	function fn(){
		console.log(this)
	}
	fn();

ES5中的严格模式中这个this是underfind

关于bind（） call() 和 apply（）

// 函数方法
// bind() es6新增方法,调用时函数不会运行,常用于匿名函数声明时改变this
// call() 调用时函数会连同执行，调用函数的时候使用call方法改变this对象
// apply() 调用时函数会连同执行，调用函数的时候使用call方法改变this对象，值需要传入数组

常见call例子

<style type="text/css">
			#box{
				width: 500px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<button id="btn">按钮 </button>
		<div id="box">
			
		</div>
	<script type="text/javascript">
		var btn = document.getElementById("btn")
		var box = document.getElementById("box")
	btn.onclick = function(){
			this.innerHTML = "提交"
			fn.call(box);
		}
		function fn(){
			this.style.background = "blue"
		}

在onclick中调用fn函数并将fn 函数的this指向box call可以立刻执行这样点击了btn 就能改变box的背景颜色

	btn.onclick = function(){
			this.innerHTML = "提交"
			this.style.background = "blue"
		}.bind(box)

在onclick函数后面调用bind方法直接改变this指向为box bind只是改变不会调用onclick 这样点击onclick的时候就会改变box的背景颜色还会添加文字 “提交”

qq_52068757

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录