蓝桥杯-网络安全比赛（3）基础学习- JavaScript的闭包（作用域）与this（全局

	- [对象](#_92)
+ [函数](#_125)
+ - [构造函数](#_135)
	- [箭头函数](#_160)
+ [改变this](#this_195)
+ - [call](#call_197)
	- [apply](#apply_214)
	- [bind](#bind_234)
	- [不同点](#_254)

• 结语
• • 综合例题
    • 总结

---

在网络安全比赛中，JavaScript闭包和this关键字的理解和运用对于涉及Web安全、逆向工程、恶意代码分析、甚至某些逻辑谜题的挑战可能会产生直接影响。

闭包

闭包在比赛中的应用
- 数据隐藏与持久化：在Web安全挑战中，闭包常用来实现数据的隐秘性，比如在JavaScript中创建私有变量，避免其他脚本直接访问。这对于分析网页源码并寻找隐藏的数据流或者发现潜在的安全漏洞至关重要。
- 事件监听与回调：许多Web应用程序会使用闭包来维护事件处理器的状态，参赛者需要理解闭包如何维持状态以找出安全问题，如跨站脚本(XSS)漏洞的存在。
- 异步操作与计时器：在一些时间敏感或异步操作场景下，闭包确保了在特定时刻正确执行函数并访问到预期的数据。

在JavaScript中，闭包是一种特殊的作用域结构，它是由一个函数及其相关的词法环境组合而成。
当一个内部函数引用了其外部函数的变量，并且这个内部函数在外部函数执行完后依然存在，那么就形成了闭包。
闭包的主要特性是它可以访问并修改其外部作用域（父函数作用域）的变量，即使外部函数已经执行完毕。

function outerFunction() {
  const outerVariable = "I am outside!";

  function innerFunction() {
    console.log(outerVariable); 
  }

  return innerFunction;
}

const innerFunc = outerFunction();
innerFunc(); // 输出 "I am outside!"

在这个例子中，innerFunction 是在 outerFunction 内部定义的，它可以访问 outerVariable。当 outerFunction 执行完毕后，outerVariable 并没有被销毁，而是在内存中保留下来了。
然后我们将 innerFunction 返回并赋值给 innerFunc，这样就可以通过 innerFunc 来访问 outerVariable 了。

作用域

• 全局作用域：在任何函数外部声明的变量都属于全局作用域，可以在整个程序中被访问到。
• 局部作用域：在函数内部声明的变量具有局部作用域，只能在该函数内部访问。

var globalVar = 'Global Scope';

function myFunction() {
    var localVar = 'Local Scope';
    console.log(globalVar); // 可以访问全局变量
    console.log(localVar); // 可以访问局部变量
}
myFunction();

console.log(globalVar); // 可以访问
console.log(localVar); // 报错，因为局部变量在函数外部无法访问

注意

闭包的一个重要用途是实现 模块化编程。
通过将相关的代码封装在一个闭包内，我们可以避免全局命名空间的污染，并且可以控制对外部接口的暴露程度。
另外，闭包还可以用来模拟私有变量，从而提高代码的安全性和可维护性。

注意：

• 由于闭包会引用外部函数的变量和参数，所以要注意内存泄漏的问题。如果闭包一直存在于内存中，那么外部函数的变量和参数也会一直存在于内存中，可能会导致内存占用过高。
• 闭包会改变作用域链的结构，所以在嵌套的闭包中要注意变量名的冲突问题。
• 闭包可能会对性能产生一定的影响，因为它会增加函数调用的开销。所以在使用闭包的时候要权衡利弊，看是否值得这样做。

---

This

This在比赛中的应用
- 对象属性与方法：在分析JavaScript代码时，准确判断this的指向有助于理解程序的运行逻辑，尤其在涉及对象和原型链的复杂场景中，不当的this引用可能导致安全漏洞。
- DOM操作与事件上下文：在DOM相关挑战中，this在事件处理函数中通常指向触发事件的DOM元素，理解这一点可以帮助参赛者找到页面交互背后的逻辑漏洞。
- API调用与第三方库：很多Web API调用（如AJAX、setTimeout/setInterval）或使用了第三方库的情况下，this的绑定决定了调用上下文，这在分析和操控这类函数时显得尤为关键。

在JavaScript中，this是一个特殊的关键字，它引用的是调用当前执行上下文的对象。换句话说，this的值取决于函数如何被调用，而不是函数被定义时的位置。

• 在全局作用域下，this 指向全局对象（浏览器环境下是 window）。
• 当以函数的形式直接调用时，this 指向全局对象。
• 当作为对象的方法调用时，this 指向该对象本身。
• 当使用 call() 或 apply() 方法调用时，this 指向被传递的第一个参数。
• 当使用 bind() 方法绑定函数时，this 指向绑定时所在的对象。

全局

全局环境下的this：在全局环境下（即不在任何函数内部），th
作者徽是vip1024c
is指向全局对象。在浏览器中，全局对象是window。

console.log(this === window); // true

事件监听器

事件监听器中的this：在事件监听器中，this通常指向触发事件的元素。

const button = document.getElementById('myButton');  
button.addEventListener('click', function() {  
  console.log(this); // 输出button元素 
});

对象

对象方法中的this：当函数作为对象的方法被调用时，this指向该对象。

const myObject = {  
  myMethod: function() {  
    console.log(this); // 输出myObject 
  }  
};  
  
myObject.myMethod();

例如：请你分别说明下面输出1和输出2的内容是什么？并解释原因。

const person = {  
  name: 'Alice',  
  sayHello: function() {  
    console.log(`Hello, my name is ${this.name}`);  
  }  
};  
var name="Jony"
notify=person.sayHello;  

person.sayHello(); // 输出1
notify();		   // 输出2

输出1的内容很好理解，因为我们是直接调用person对象上的sayHello方法。在sayHello方法内部，this关键字引用的是person对象，所以this.name的值就是’Alice’，因此输出结果是 Hello, my name is Alice。

输出2的内容则稍显复杂一些。当我们将person.sayHello赋值给notify变量时，我们实际上只是获取了sayHello函数的引用，而没有保留它原本的上下文（也就是person对象）。
因此，当我们在后面调用notify()时，this的值就不再是person对象了。在全局作用域下调用函数，this通常指向全局对象（在浏览器中是window对象）。
由于前面我们定义了一个全局变量name，其值为’Jony’，所以当this.name在notify函数内部被访问时，它实际上是访问的全局变量name，因此输出结果是 Hello, my name is Jony。

函数

函数调用中的this：如果函数是作为普通函数调用的，那么this指向全局对象（非严格模式下）

function myFunction() {  
  console.log(this);  
}  
  
myFunction(); // 非严格模式下输出window，严格模式下输出undefined

构造函数

构造函数中的this：当函数用作构造函数（通过new关键字调用）时，this指向新创建的对象实例。

function MyConstructor() {  
  this.property = 'Hello, World!';  
}  
  
const instance = new MyConstructor();  
console.log(instance.property); // 输出'Hello, World!'

例如：你觉得输出1的内容是什么？。

function Car(make, model, year) {  
  this.make = make;  
  this.year = year;  
  this.say=function(){
	console.log(this.make)
  }
}  
  
const myCar = new Car('Ford', 1969);  
myCar.say(); // 输出1

箭头函数

箭头函数中的this：箭头函数不绑定自己的this，它会捕获其所在上下文的this值，作为自己的this值。

const myObject = {  
  myMethod: function() {  
    const arrowFunction = () => {  
      console.log(this); // 输出myObject，因为箭头函数捕获了myMethod的this 
    };  
    arrowFunction();  
  }  
};  
  
myObject.myMethod();

例如：你认为下面代码中的输出1和输出2的内容会是什么？

function OuterFunction() {  
  this.value = 'Hello from OuterFunction';  
  
  this.arrowFunc = () => {  
    console.log(this.value);  
  };  
  
  this.arrowFunc(); 
}
var value='Hello from Window'
  
const outer = new OuterFunction();//输出1
const external=outer.arrowFunc;
external();						 //输出2

输出1和输出2都是 ‘Hello from OuterFunction’，因为 arrowFunc 是一个箭头函数，它捕获了定义时的 this 上下文，即 outer 对象实例。
无论通过 outer.arrowFunc() 还是 external() 调用，箭头函数内部的 this 都指向同一个对象实例（即 outer）。

改变this

`call`、`apply`和`bind`都用于改变函数内部的this指向，但它们在参数传递方式、执行时机和返回值方面存在不同。

call

call 方法调用一个函数，其具有一个指定的 this 值和作为单独参数提供的参数列表。

语法：functionName.call(thisArg, arg1, arg2, …);

例如：

function greet() {  
  console.log('Hello, ' + this.name);  
}  
  
const person = { name: 'Alice' };  
  
// 使用 call 调用 greet 函数，并设置 this 指向 person 对象 
greet.call(person); // 输出: Hello, Alice

在上面的例子中，greet 函数原本没有定义 this.name，但是通过 call 方法，我们可以将 this 指向 person 对象，并访问其 name 属性。

学习路线：

这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成黑客大神，这个方向越往后，需要学习和掌握的东西就会越来越多以下是网络渗透需要学习的内容：