简单谈谈JavaScript中的this

朴灿烈づ我的快乐病毒、 2022-01-15 18:05 252阅读 0赞

# [简单谈谈JavaScript中的this][JavaScript_this] #

**　　**是夜，想着考量下小黄毛近期的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

不要好奇，第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

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

posted @ 2017-02-10 20:15 [buildupchao][] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

[JavaScript_this]: https://www.cnblogs.com/lunatic-cto/p/6387766.html
[buildupchao]: https://www.cnblogs.com/lunatic-cto/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=6387766