不论是面向对象，照样基于对象的言语，都邑有this，我更喜好叫他this指针，假如你不明白指针，以为它是个援用也不妨。
这一片文章就是整顿一下在各个情况下的this究竟援用的是谁。一次来邃晓this的用法，下面将是一段段的代码，每段代码背面可能有简短的申明，就是如许简朴粗犷。
申明一下，这篇文章是基于浏览器的，不是原生js，辨别在于浏览器全局中的this是Window，而原生js中是global。其次，博主运用的控制台输出，假如你运用document.write要领或alert输出this，由于这两个要领会挪用对象的toString要领，你会获得[object Window]或[object Object]。
注重：本文中对平常函数和一般函数的说话，这个只是博主个人的说法，由于上下文(context)的诠释并非很容易懂，博主自定义了这2个说法，协助明白。
一般函数中的this
function f(){
console.log(this); //Window
}在js中，通常没有定义在对象、组织函数或prototype中的函数，个中的this都是全局对象Window。下文把如许的函数称为平常函数
var a = [1,2,3,4,5];
var b = a.map(function(x){
console.log(this); //Window
return x * 2;
});同理上面这个函数也没有定义在对象、组织函数或许prototype里，所以获得的依旧是Window。
注重：Array.prototype.map是定义在数组原型中的，然则给map传进去的参数函数就是一个平常函数
组织函数中的this
function Person(n, a, g){
this.name = n;
this.age = a;
this.gender = g;
console.log(this);
}
//作为组织函数运用
var o = new Person("Lily", 18, "F"); //this为当前对象 Person {name: "Lily", age: 18, gender: "F"}
//作为一般函数运用
Person("Lily", 18, "F"); //Window第10行代码将函数作为非组织函数运用体式格局（new体式格局）挪用，本文把如许挪用的函数称为一般函数
上面代码申明一下几点：
- 用new建立对象的时刻挪用了组织函数。
- 组织函数和一般函数的辨别在于挪用体式格局，而不是定义体式格局，假如按第10行的体式格局挪用，他就是个一般函数，由于一般函数中的this是于Window，所以上面函数在第10行挪用后建立了3个全局变量。
- new关键字转变了函数内this的指向，使其指向刚建立的对象。
function Person(n, a, g){
this.name = n;
this.age = a;
this.gender = g;
this.speak = function (){ //这里只是申明this，现实应当在prototype上定义对象要领
console.log(this);
};
}
//作为组织函数运用
var o = new Person("Lily", 18, "F");
o.speak(); //Person {name: "Lily", age: 18, gender: "F"}
//作为一般函数运用
Person("Lily", 18, "F");
speak(); //Window- 对象要领中的this一样指向当前对象
- 第14行之所以能够挪用speak(),是由于第13行实行后在全局建立了speak函数，印证了之前的说法。
多说一句，为何11行获得的是$Person{…}$，而不是$Object{…}$。实在这里显现的原本就应当是组织函数的名字，假如你经由过程$var o = {};$建立的对象，相当于$o = new Object();$，这时候显现的才是$Object{…}$
function Person(n, a, g){
this.name = n;
this.age = a;
this.gender = g;
}
Person.prototype.speak = function (){ //这里只是申明this，现实应当在prototype上定义对象要领
console.log(this);
};
//作为组织函数运用
var o = new Person("Lily", 18, "F");
o.speak(); //this为当前对象 Person {name: "Lily", age: 18, gender: "F"}
//作为一般函数运用
Person("Lily", 18, "F");
speak(); //ReferenceError: speak is not defined因而可知prototype中的要领和组织函数中直接定义要领中this是一样的。
末了一行涌现毛病，这个不难明白，这里不多说了。
假如组织函数有返回值呢？
function Person(n, a){
this.name = n;
this.age = a;
return {
name: "Lucy",
};
}
var p1 = new Person("Bob", 10);
console.log(p1.name); //"Lucy"
console.log(p1.age); //undefined很显著，这是对象p1中的this指向返回值对象
固然，组织函数还能够返回函数：
function Fun(x){
console.log(this);
return function(){
this.x = x;
this.get = function(){
alert(this.x);
}
}
}
var o1 = new Fun(2); //Fun {}
var o2 = Fun(2); //window
console.log(o1 == o2); //false, 这里的o1,o2情势是一样的，由于组成闭包构造，所以运用差别但假如组织函数返回了一个基础范例：
function Fun(n){
this.name = n;
return 2;
}
var o;
console.log(o = new Fun("Bob")); // {name: "Bob"}此时获得的对象和返回值无关。
到此我们就邃晓了，组织函数的返回值假如是基础数据范例，那返回值和获得的对象无关；不然，获得的对象就是返回值的援用并组成闭包。
辨别一下面这个具体题目：
<html>
<body>
<button onclick="click()">Click Here</button>
<button id="btn">Click Here</button>
<body>
<script>
function click(){
console.log(this); //window
}
var btn = document.getElementById("btn");
btn.onclick = function(){
console.log(this);
};
</script>
</html>第一个按钮获得Window，而第二个获得input元素！为何!
再想一想，click函数定义在全局，不在对象上。而btn.onclick = function(){}中的函数显著是在btn对象上定义的。
对象要领中的闭包
说闭包前先明白一个简朴的：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
function fun(){
console.log(this);
}
fun();
}
};
o.speak(); //Window什么，这里是Window了？对！我们细致想一想，这个fun函数是对象的要领吗？明显不是，它是个平常函数。它仅仅是在另一个函数中的一个函数，明显相符上文形貌的：“通常没有定义在对象、组织函数或prototype中的函数，个中的this都是Window”
假如想在内部函数接见这个对象，也很好处理：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
var _this = this; //首选_this，有的材料上会用self。
function fun(_this){
console.log(_this);
}
fun();
}
};
o.speak(); //Object {name: "Lily", age: 18, gender: "F"}下面做个闭包，为了申明this的值，这里不定义太多变量，假如对闭包和作用域有迷惑能够参看博主的另一篇文章：Javascript 函数、作用域链与闭包
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
return function(){
console.log(this);
}
}
};
o.speak()(); //Window这个难明白吗？返回的函数依旧是个定义在别的函数内里的平常函数。假如想让返回的函数能够继续接见该对象，依旧运用上面的$var _this = this$处理。不过这里引出了一个新的题目：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
console.log(this);
}
};
var fun = o.speak;
fun(); //Window什么？这里照样Window！o.speak显著是一个对象要领啊！那末题目来了？第10行挪用的是谁？是fun函数。那末fun函数怎样定义的？对，fun的定义决议它是一个平常函数。那怎样处理？这个不必处理，没人会试图在对象外猎取对象要领，即便是有须要也应当猎取对象要领内的闭包。固然，假如你要强行处理它，那就用bind要领吧。
原型中的this
什么?原型要领中的this? 看看下面代码就邃晓了，这个明白起来不会很难
function F(){
return F.prototype.init();
}
F.prototype = {
init: function(){
return this;
},
test: "test"
}
var f = F();
console.log(f); //F{test:test}可见，原型中要领里的this.就是一个该组织函数的实例化对象。jQuery中运用的就是这个组织要领。
bind call和apply要领
这3个要领用来转变挪用函数内的this值
bind要领
将对象绑定到函数，返回内部this值为绑定对象的函数。
假如我们不能修正库中对象的要领，我们就不能用$var \_this = this;$的要领转变this值，那末我们换个角度斟酌上面的题目：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
return function(){
console.log(this);
}
}
};
o.speak()(); //Window末了一行中，o.speak()实行完后获得一个函数，这是个暂时函数，定义在全局作用域，假如我们把这个暂时函数绑定到o对象上，再继续挪用这个函数不就能够了么：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
return function(){
console.log(this);
}
}
};
o.speak().bind(o)(); //Object {name: "Lily", age: 18, gender: "F"}bind不只能够传入一个参数，背面的多个参数能够作为返回函数的绑定参数，以下：
function add(a, b){
console.log(a+b);
return a+b;
}
var add2 = add.bind(null, 2); //参数递次保持一致,第一参为null,不转变this值（但这里会转变，由于add2在全局中定义）
add2(4); //6可假如是组织函数呢？记着一点，函数作为组织函数挪用时，bind的第一参数无效，注重，仅仅是第一参数无效。
function Person(pname, page){
this.name = pname;
this.age = page;
}
var Person2 = Person.bind({name:"hello",city:"Beijing"}, "world");
var p = new Person2(12);
console.log(p);//Person{name:"world", age:12}call要领 和 apply要领
这里举几个和上文不一样的例子
function Animal(){
this.name = "Animal";
}
Animal.prototype.showName = function(){
alert(this.name);
};
function Cat(){
this.name = "cat";
}
var cat = new Cat();这里Cat没有showName要领，怎样完成输出名字呢？
有c++和java履历的人会以为猫属于动物，所以Cat应当继续Animal，所以我们能够如许修正：
function Animal(){
this.name = "Animal";
}
Animal.prototype.showName = function(){
alert(this.name);
};
function Cat(){
this.name = "cat";
}
Cat.prototype = Animal.prototype;
var cat = new Cat();
cat.showName(); //Cat或许：
function Animal(){
this.name = "Animal";
}
Animal.prototype.showName = function(){
alert(this.name);
};
function Cat(){
Animal.call(this, "cat"); //继续
}
var cat = new Cat();
cat.showName(); //Cat有c++和java履历就会晓得，在做一个大型项目之前都是要做UML设想的，用例图、运动图、类图、状态图等等十几种图，关于没有肯定履历的开辟者做这个几乎就是恶梦，而js把各品种或模块自力出来，须要的时刻用call、bind、apply把多个类联系起来，如许的做法即简化了设想，又简化了保护。
所以js内里很少有上面的写法，怎样写看下面：
function Animal(){
this.name = "Animal";
}
Animal.prototype.showName = function(){
alert(this.name);
}
function Cat(){
this.name = "Cat";
}
var cat = new Cat();
Animal.prototype.showName.call(cat); //cat
Animal.prototype.showName.apply(cat); //cat对，不过觉得那边怪怪的，call和apply一样？他们功能上一样，只是接收的参数差别，简朴写就是下面如许：
func.call(func1,var1,var2,var3,...);
func.apply(func1,[var1,var2,var3,...]);它们的第一个参数都是指定挪用该函数的对象，假如为空就是全局对象。背面的时传入该函数的参数，辨别在于运用call时参数一一传入，而运用apply时参数组成一个数组或类数组对象传入。
实例
例子1：
//求以下数组元素的最大值
var numbers = [5, 6, 9, 3, 7];
var maxValue = Math.max(numbers);
alert(maxValue); //NaN
maxValue = Math.max.apply(null, numbers);
alert(maxValue); //9
//不然你只能这么写：
var max = +Infinity;
for (var i = 0, len = numbers.length; i < len; i++) {
if (numbers[i] > max)
max = numbers[i];
}例子2
//自定义typeof函数（注重，体系自带的typeof是运算符，不是函数）
function typeOf(o){
return Object.prototype.toString.call(o).slice(8,-1);
}
//自定义typeOf函数测试
console.log(typeOf (2.1)); //Number
console.log(typeOf (undefined)); //Undefined
console.log(typeOf ({})); //Object
console.log(typeOf ("hello")); //String
console.log(typeOf (false)); //Boolean
console.log(typeOf (typeOf)); //Function
console.log(typeOf (null)); //Null
console.log(typeOf ([])); //Array
console.log(typeOf (new Date)); //Date
console.log(typeOf (/\d/)); //RegExp
console.log(typeOf (document. getElementsByTagName('body')[0])); //HTMLBodyElement
//体系typeof运算符测试
console.log(typeof (2.1)); //number
console.log(typeof (undefined)); //Undefined
console.log(typeof ({})); //object
console.log(typeof ("hello")); //string
console.log(typeof (false)); //boolean
console.log(typeof (typeOf)); //function
console.log(typeof (null)); //object
console.log(typeof ([])); //object
console.log(typeof (new Date)); //object
console.log(typeof (/\d/)); //object
console.log(typeof (document. getElementsByTagName('body')[0])); //object
//显著比体系本身的有用多了例子3
//把类数组对象转为数组（类数组对象就是属性key为0,1,2,...,还具有一个key为length的能够像数组一样动态转变的值的对象）
function(){
return Array.prototype.slice.call(arguments);
}例子4
//用js接见元素伪类
function getRuleSelector(selector){
return Array.prototype.filter.call(getCssList(), function(x){
return pure(x.selectorText) === pure(selector);
});
function pure(selector){
selector.replace(/::/g, ":"); //把双冒号替换为单冒号
}
function getCssList(){
return Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x){
return Array.prototype.slice.call(x.cssRules);
}));
}
}例子5
//为每一个DOM元素注册事宜
Array.prototype.forEach.call(document.querySelectAll('input[type=button]'), function(ele){
ele.addEventLister("click", fun, false);
});例子6
//自定义forEach函数遍历Dom元素列表（类数组对象）
var forEach = Function.prototype.call.bind(Array.prototype.forEach);
DOMElementList = document.getElementByTagName("li");
forEach(DOMElementList, function (el) {
el.addEventListener('click', handle); //handle定义省略
});箭头函数中的this
之所以末了说箭头函数，一方面由于这是ES6中的内容，更主要的时由于箭头函数中的this永久不能被call, bind和apply转变，也就是说箭头函数中的this可不转变，仅仅与其定义的位置有关。
箭头函数的最大特点是：它不转变this的作用域(上下文环境)，然则依旧组成部分作用域，我们之前遇到过闭包内this值被转变的题目，我们用从新定义部分变量的体式格局处理了这个题目。假如有了箭头函数，处理这个题目就简朴多了
这是上面涌现过的一段代码:
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
function fun(){
console.log(this);
}
fun();
}
};
o.speak(); //window看看用箭头函数函数怎文雅的处理这个题目
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
(() => {console.log(this);})(); //一个马上实行的箭头函数
}
};
o.speak(); //Object {name: "Lily", age: 18, gender: "F"}或许如许也能够：
var o = {
name: "Lily",
age: 18,
gender: "F",
speak: function (){
return () => {console.log(this);}; //返回一个箭头函数
}
};
o.speak()(); //Object {name: "Lily", age: 18, gender: "F"}with
with 能够转变上下文环境，现实开辟中非常不发起运用 with, 但关于 with 这里简朴申明一下，看一个示例：
var a, x, y;
var r = 10;
with (Math) {
a = round(PI * r * r);
x = r * cos(PI);
y = r * sin(PI / 2);
}
console.log(a, x, y); //314 -10 10然则假如在 with 内直接声明变量会发作什么：
var obj = {
name: 'test'
};
with(obj){ //内部定义的变量都注册在 obj 上
name = "hello";
var salary = 10000;
age = 20;
}
console.log(obj.name); //'hello'
console.log(obj.age); //undefined
console.log(age); //20, 假如对象不具有这个属性，该定义会不测的涌现在 全局变量中
console.log(obj.salary); //undefined
console.log(salary); //10000, 假如对象不具有这个属性，该定义会不测的涌现在 全局变量中