前端理论整理

亦凉 2022-10-22 15:57 151阅读 0赞

**1.作用域和闭包？**  
js中首先有一个最外层的作用域，全局作用域；  
js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套；  
es6中新增了块级作用域（大括号，比如：if\{\},for()\{\},while()\{\}…）；  
**2.闭包？**  
内部函数可以访问外部函数的变量就形成了一个闭包  
特性：1.内部函数可以调用外部函数的变量  
2.局部变量会常驻内存，可以重复使用，避免了使用全局变量所造成的变量污染问题  
3.由于闭包，可以使变量长期保存在内存中，内存消耗较大，所以不能滥用，会造成网页性能问题，IE中还会造成内存泄漏  
**3.this的不同应用场景，如何取值？**  
当作普通函数被调用时候，this指向的对象是window this 的指向一般理解为谁调用，this指向谁  
**4.首页bind函数**  
call()、apply()、bind() 方法的存在是为了改变函数体内 this 的指向  
call()、bind() 方法分别接收参数，apply() 方法接收数组形式的参数，它们的第一个参数都是 this 的指向可省略或为 null  
call()、apply() 方法会立即执行。bind() 方法不会立即执行，它会返回一个函数，可以将函数存储在变量中，再通过变量获取函数的返回值  
arguments 是一个伪数组，使用 ES6 提供的 Array.from() 方法将伪数组转换成数组  
Array.shift() 方法是 ES5 提供的，它的功能是删除数组第一项元素，返回被删除的值

Function.prototype.bind1 = function () \{ // 这块不可以使用箭头函数，因为 this 的指向不同  
// arguments 可以获取一个函数的所有参数，arguments 是一个伪数组  
// 使用 Array.from() 方法将 arguments 伪数组转化成数组  
const args = Array.from(arguments)  
// 获取 this 指向取出数组第一项，数组剩余的就是传递的参数  
const \_this = args.shift()  
const self = this // 当前函数 fn1.bind(…) 中的 fn1  
return () => \{  
return self.apply(\_this, args)  
\}  
\}

function fn1(a, b, c) \{  
console.log(‘this’, this)  
console.log(a, b, c)  
\}

const fn2 = fn1.bind1(\{x: 100\}, 10, 20, 30)  
const res = fn2()  
**5.实际开发中闭包的应用场景，举例说明？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]  
**6.class**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]: /images/20221022/19ad4a515d5345108997a91c4c05ea39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]: /images/20221022/b86df2729c4443cc89f6cac7e3232644.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]: /images/20221022/8f3f8ed4e67746a49fc8861d7cba3478.png