简单谈谈JavaScript中的this

时间：2022-12-16 22:40:23

　　是夜，想着考量下小黄毛近期的JavaScript进阶如何了，鉴于近期一直在接触Vue 2.0，索性就围绕this编写了个代码片段，

给其一个测量，毕竟写js的程序员都知道，JavaScript的函数调用时会隐性的接收到两个附加的参数：this和arguments。

1、先上代码：

/**
 * this
 */

var ajaxThis = (function() {

	global.a = 2;

	function fn(b) {
		this.b = b;

		console.log(this.a);
	}

	var obj = {
		a : 4,
		fn : fn
	};

	fn();// 题1
	obj.fn(); // 题2
	fn.call(obj); // 题3
	fn.call(null);// 题4
	fn.apply(obj);// 题5
	fn.apply(null);// 题6

	var fnInstance = new fn(8);
	console.log(fnInstance.b);// 题7
})();

 注：这些题倒不难，只要你把握好JavaScript中的this到底指向谁，那么就问题不大。

2、小测验答案

题1：2

题2：4

题3：4

题4：2

题5：4

题6：2

题7：undefined

　　  8

不要好奇，第7题的确是输出两个值

先说些闲话，当你对JavaScript接触使用的多了，就能感受到它的方面之处，同时也能够避开它的缺点，发扬其优点。

在解析答案之前，先来讲解一下到底如何判断this的取值吧。

其实，this的值取决于调用的模式。

调用模式？那都有哪些调用模式呢？

总的来说，JavaScript的函数调用总共有4种模式，是的，你没听错，就是4种！！！

哪4种？

　　• 方法调用模式

　　• 普通函数调用模式

　　• 构造器调用模式

　　• apply/call调用模式

而针对这四种调用模式，参数this的取值会有所差异：

• 方法调用模式

　　何为方法调用？当然泛指针对对象来说的了。该种调用模式说明，函数在某个明确的上下文对象中调用时，this绑定的是这个上下文对象。

　　e g.   题2的  obj.fn(); // 调用的对象是obj，所以this绑定的就是obj，所以fn()内部console.log(this.a)输出的便是obj.a，即为4

• 普通函数调用模式

　　普通函数调用？指的便是直接调用函数。这种调用模式，默认情况下，如果函数是被直接调用的，则this绑定到全局对象; 

如果在严格模式下（即 'use strict'），就绑定到undefined。

　　e g. 题1中的  fn(); // 因为没有指明调用方，同时又是非严格模式，所以，fn()函数内部的this绑定到全局对象，所以this.a的值为global.a，即为2

• 构造器调用模式

　　构造器调用模式？这个应该都不陌生吧？！当然指的是通过new操作符来调用的函数啦！在这里有点类似于面向对象编程的概念，构造器函数内部的this当然

绑定到这个新创建的对象了。这种调用模式，指的便是：如果函数通过new操作符调用，this绑定的是新创建的对象。

　　e g. 题7中的    var fnInstance = new fn(8); // 因为是通过new操作符调用的fn函数，所以this指向当前新创建的对象，然而这个对象没有a这个属性，所以输出undefined

　　　　　　　　　　console.log(fnInstance.b);  // 然而因为给fn函数传入了值8，所以……

• apply/call调用模式

　　apply/call又是什么鬼？我先来解说它们的用法吧！

　　a) apply()和call()方法的第一个参数都是要调用函数的对象。用apply()和call()调用函数时，函数内的this属性总是引用这个参数;

　　b) call()函数剩余参数是传递给要调用的函数的值，它们的数量可以是任意的;

　　c) apply()方法和call()方法类似，只不过它只接收两个参数，除了调用者之外，它的第二个参数是一个带下标的集合（比如数组，但也可以不是数据），

apply()方法把这个集合中的元素作为参数传递给调用的函数。

　　OK,现在重新回到主题:该种调用模式，this又指的是谁？细心的你可能已经注意到，上面介绍他们的用法是，已经提到函数内的this属性总是引用第一个参数，

也就是调用函数的对象。也就是说，函数通过apply/call调用，this绑定的是指定的对象，然而，如果把null/undefined作为this的绑定对象传入apply/call，

在调用时会被忽略，实际应用的是默认绑定规则。

　　

　　e g.     fn.call(obj); // 题3，答案为console.log(obj.a)，即为4

　　　　　　fn.call(null);// 题4 ，因为null被忽略，答案为console.log(global.a)，即为2

　　　　　　fn.apply(obj);// 题5 ，答案为console.log(obj.a)，即为4

　　　　　　fn.apply(null);// 题6 ，因为null被忽略，答案为console.log(global.a)，即为2

好了，就总结到这里。小黄毛，你懂了吗？

相关文章