JavaScript闭包和this

来源:csdn博客 分类: 文章浏览史 发布时间:2021-07-29 22:45:53 最后更新:2021-07-29 浏览:35
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-07-29 22:45:53

JavaScript闭包和this

1 闭包

一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。—引自MDN

在JS中,通俗来讲,闭包就是能够读取外层函数内部变量的函数

1.1 变量作用域

变量的作用域为两种:全局作用域和局部作用域

1)函数内部可以读取全局变量

let code = 200;

function f1() {
	console.log(code);
}

f1(); // 200

2)函数外部无法读取函数内部的局部变量

function f1() {
	let code = 200;
}
console.log(code); // Uncaught ReferenceError: code is not defined

1.2 读取函数内部的局部变量

1)在函数内部再定义一个函数

function f1() {
	let code = 200;

	function f2() {
		console.log(code);
	}
}

函数f1内部的函数f2可以读取f1中所有的局部变量。因此,若想在外部访问函数f1中的局部变量code,可通过函数f2间接访问。

2)为外部程序提供访问函数局部变量的入口

function f1() {
    let code = 200;

    function f2() {
        console.log(code);
    }

    return f2;
}

f1()();  // 200

1.3 闭包概念

1.2中的函数f2,就是闭包,其作用就是将函数内部与函数外部进行连接。

  • 闭包访问的变量,是每次运行上层函数时重新创建的,是相互独立的。
function f1() {
    let obj = {};

    function f2() {
    	return obj;
    }

    return f2;
}

let result1 = f1();
let result2 = f1();
console.log(result1() === result2()); // false
  • 不同的闭包,可以共享上层函数中的局部变量
function f() {
    let num = 0;

    function f1() {
    	console.log(++num);
    }

    function f2() {
    	console.log(++num);
    }

    return {f1,
    		f2};
}

let result = f();
result.f1(); // 1
result.f2(); // 2

从结果可以看出,闭包f1和闭包f2共享上层函数中的局部变量num

使用闭包的注意点:

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

2 this

2.1 关键点:

  1. this始终指向调用该函数的对象;
  2. 若没有指明调用的对象,则顺着作用域链向上查找,最顶层为global(window)对象;
  3. 箭头函数中的this是定义函数时绑定的,与执行上下文有关
  4. 简单对象(非函数、非类)没有执行上下文;
  5. 类中的this,始终指向该实例对象;

2.2 四类调用方式

1)作为对象方法的调用

function f() {
	console.log( this.code );
}
let obj = {
    code: 200,
    f: f
};
obj.f(); // 200

2)纯粹的函数调用

function f() {
    console.log( this.code );
}
// 此处,通过var(函数作用域)声明的变量code会绑定到window上;如果使用let(块作用域)声明变量code,则不会绑定到window上,因此下面的2次函数调用f(),会输出undefined
// let code = 200;
var code = 200;
f(); // 200
code = 404;
f(); // 404

复杂一点:

function doF(fn) {
    this.code = 404;
    fn();
}

function f() {
	console.log(this.code);
}

let obj = {
    code: 200,
    f: f
};

var code = 500;
doF(obj.f); // 404

该列子中,为分析出this的指向,应找到关键点,哪个对象调用了函数f()。obj.f作为doF()的入参,将函数f传给了doF,而doF是由window对象调用的,所以函数doF中的this指向window,继而函数f中的this也指向window。

由于最终执行函数f时,其中的this指向window,所以在函数f中执行this.code = 401时,等同于window.code = 401

function doF(fn) {
    this.code = 404;
    fn();
}

function f() {
	this.code = 401;
	console.log(this.code);
}

let obj = {
    code: 200,
    f: f
};

var code = 500;
doF(obj.f); // 401

3)作为构造函数调用

code = 404
function A() {
	this.code = 200
	this.callA = function() {
		console.log(this.code)
	}
}
A() // 返回undefined, A().callA会报错。callA被保存在window上
var a = new A()
a.callA() // 200, callA在new A返回的对象里

4)使用apply、call、bind调用

apply

var code = 404;
let obj = {
	code: 200,
    f: function() {
    	console.log(this.code);
    }
}

obj.f(); // 200, 实际上是作为对象的方法调用
obj.f.apply(); // 404,参数为空时,默认使用全局对象global,在此处为对象window
obj.f.apply(obj); //200,this指向参数中设置的对象

call

function f() {
	console.log( this.code );
}
var obj = {
	code: 200
};
f.call( obj ); // 200

bind

// bind返回一个新的函数
function f(b) {
    console.log(this.a, b);
    return this.a + b;
}
var obj = {
	a: 2
};
var newF = f.bind(obj);
var result = newF(3); // 2 3
console.log(result); // 5

2.3 箭头函数中的this

箭头函数中的this是定义函数时绑定的,而不是在执行函数时绑定。若箭头函数在简单对象中,由于简单对象没有执行上下文,所以this指向上层的执行上下文;若箭头函数在函数、类等有执行上下文的环境中,则this指向当前函数、类。

1)箭头函数在普通对象中

var code = 404;
let obj = {
    code: 200,
    getCode: () => {
    	console.log(this.code);
    }
}
obj.getCode(); // 404

2)箭头函数在函数中

var code = 404;
function f() {
	// 若此处为let code = 200; code不会绑定到函数f上,则函数getCode访问this.code时,会输出undefined
    this.code = 200;
    let getCode = () => {
    	console.log(this.code);
    };
    getCode();
}
f(); // 200
let func = new f();
console.dir(func); // func中有属性code

3)箭头函数在类中

var code = 404;
class Status {
    constructor(code) {
    	this.code = code;
    }

    getCode = () => {
    	console.log(this.code);
    };
}
let status = new Status(200);
status.getCode(); // 200

不管是箭头函数还是普通函数,只要是类中,this就指向实例对象。

3 样例详解

1)

var code = 404;

let status = {
    code : 200,

    getCode : function() {
            return function(){
            	return this.code;
    	};
    }
};

console.log(status.getCode()()); // 404

执行status.getCode()时,返回函数,status.getCode()()表示执行当前返回的函数,其调用者为全局变量window,所以this.code为绑定在window中的code,值为404。

2)

var code = 404;

let status = {
    code : 200,

    getCode : function() {
        let that = this;
        return function(){
        	return that.code;
    	};
    }
};

console.log(status.getCode()()); // 200

执行status.getCode()时,this指向status,并通过局部变量that保存this的值,最后返回值为函数。status.getCode()()表示执行返回的函数,其that指向的status,所以返回值为200。

3)更复杂的例子

function f() {
    setTimeout(() => {
        console.log(">>>" + this); // >>>[object object],语句5
        this.code = 401;
    }, 0)
    
    console.log( this.code );
}

let obj = {
    code: 200,
    foo: f
};

var code = 500;

obj.foo(); // 200,语句1
obj.foo(); // 200,语句2
console.log("--" + obj.code); // --200,语句3
setTimeout(()=>{console.log("---" + obj.code);}, 0); // ---401,语句4

知识补充:函数setTimeout用于创建一个定时器,在同一个的对象上,各个定时器使用用一个编号池(这点很关键),不同的对象使用独立的编号池,同一个对象上的多个定时器有不同的定时器编号。所以,setTimeout到了执行时间点时,其内部的this指向定时器所绑定的对象。

结果分析:函数setTimeout中传入的函数句柄,由于js是单线程执行,即使延时为0,仍需等到本次执行的所有同步代码执行完毕,才能执行。所以在两次执行obj.foo()的过程中,其内部的setTimeout的入参函数(也就是语句5)都未执行。同理,执行语句3时,语句5同样未执行。知道执行语句4,当前同步代码块执行完毕,语句5执行(并且执行了2次,因为语句1语句2分别执行1次),obj上绑定的code被更新为401。最终,语句4的入参函数执行,输出obj.code的值为401。

4)由上面的例子继续扩展

function doFoo(fn) {
    this.code = 404;
    fn();
}

function f() {
    setTimeout(() => {
        console.log(">>>" + this); // >>>[object window],语句3
        this.code = 401; // 语句4
    }, 0)
    console.log( this.code ); // 404,语句2
}

let obj = {
    code: 200,
    foo: f
};

var code = 500;

doFoo( obj.foo ); // 语句1
setTimeout(()=>{console.log(obj.code)}, 0); // 200,语句5
setTimeout(()=>{console.log(window.code)}, 0); // 401,语句6

结果分析obj.foo为函数句柄,作为入参传入函数doFoodoFoo的调用房为全局变量window,所以,语句2、3、4中的this均指向window。

参考

  1. MDN闭包
  2. 学习JavaScript闭包—阮一峰
  3. 深入理解ES6箭头函数中的this
  4. 一次搞定闭包和this
php技术微信