闭包，this问题

最新推荐文章于 2024-10-09 00:58:21 发布

2401_87034159

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量872

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_87034159/article/details/142155047

版权

不同点：call第二个参数为单个数值，apply()第二个参数为数组

class中的this指向new 后的实例对象

class Person{

constructor(name,age){

this.name=name;

this.age=age

}

say(){

console.log(我叫${this.name}年龄是${this.age})

}

let lsy=new Person(‘李士乐’,21);

lsy.say();// 我叫李士乐年龄是21

console.log(lsy);// {name:‘李士乐’,age:21}

class中的this指向new 后的实例对象

箭头函数中的this.指向父级上下文对象

let obj={name:‘小明’}

var name=‘杨志’ //不能用let声明，不存在变量提升

let pox={

name:‘小红’,

run:()=>{

console.log(this.name)//this

}

// 对象方法中的this.指向方法的调用者。

pox.run();// 杨志

pox.run.call(obj)// 杨志

pox.run.ally(obj);// 杨志

pox.run.bind(obj)();//杨志

class中的 this时刻指向父级的上下文对象。并且不可以被 call()/apply()/bind()修改。

特殊情况

在这里插入图片描述

对象方法中的this，指向当前对象（因为当前对象执行了方法）。

setTimeout函数中的this,相当于普通函数中的this,因为setTimeout触发的函数执行，并不是外部对象执行的。

setTimeout中函数是箭头函数，this为当前对象。因为箭头函数中的this始终是父级上下文中的this.

注意：

this取什么值，是在执行时确认的，定义时无法确认

手写bind:

// 模拟 bind

Function.prototype.bind1 = function () {

// 将参数拆解为数组

const args = Array.prototype.slice.call(arguments)

// 获取 this（数组第一项）

const t = args.shift()

// fn1.bind(…) 中的 fn1

const self = this

// 返回一个函数

return function () {

return self.apply(t, args)

}

function fn1(a, b, c) {

console.log(‘this’, this)

console.log(a, b, c)

return ‘this is fn1’

}

const fn2 = fn1.bind1({x: 100}, 10, 20, 30)

const res = fn2()

console.log(res)

this总结（重要）

普通函数中调用，this指向window

对象方法中调用，this指向当前对象

call apply bind中调用， this指向被传入的对象

class中的方法中调用， this指向实例对象

箭头函数，this就是父级上下文中的this

3. 闭包的应用场景

闭包应用场景1，封装对象的私有属性和方法

隐藏数据

做一个简单的缓存工具

// 闭包隐藏数据，只提供 API

function createCache() {

const num=100

const data = {} // 闭包中的数据，被隐藏，不被外界访问

return {

num:num,

set: function (key, val) {

data[key] = val

get: function (key) {

return data[key]

}

const c = createCache()

console.log(c.num)//num此时就作为c私有属性

c.set(‘a’, 100) //set此时作为c的私有方法

console.log( c.get(‘a’) )

闭包应用场景2，闭包作用回调函数

闭包应用场景3，函数节流防抖

补充

// 闭包会造成页面性能问题在ie中可能导致内存泄漏

function a(){

var num =10;

return function(){

return ++num;

}

// var inc =a();

// console.log(inc());

// inc=null;

//也可这样写 a()获取当前函数再调用

//因为生成的函数inc也是个闭包这个闭包再次访问到变量num

console.log(a()());

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料

前端路线图