js专题之this关键字详解 js专题之this关键字详解

对于那些没有投入时间学习this机制的前端来说，this的绑定一直是一件非常令人困惑的事。this是非常重要的，但是猜测，尝试并出错和盲目的从网上复制粘贴并不能让我们真正理解this的机制。
学习this的第一步是明白this既不指向自身也不指向函数的词法作用域，this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。
1.this与全局函数（默认绑定）

function test(){ console.log(this); } test(); // window

当调用test()时，因为应用了this的默认绑定，this.a被解析成全局变量a，this指向全局对象window。所以结果为1。
怎么知道应用了默认绑定呢？当前test()是直接使用不带任何修饰的函数引用进行调用的。这个简单来说就是没有任何前缀啊等东西，很纯粹！而其调用位置是全局作用域，更能确定除了默认绑定，无法应用其他规则了。
将上面改一下，使用严格模式会怎样？

function test(){ "use strict" console.log(this); } test(); // undefined

【js专题之this关键字详解】虽然this的绑定规则完全取决于调用位置，但是只有test()运行在非严格模式下时，默认绑定才能绑定到全局对象；严格模式下与test()的调用位置无关；
2. this与对象中的方法（隐式绑定）通俗地说就是一个函数，被当作引用属性添加到了一个对象中了，然后以 “对象名.函数名()” 形式进行调用，这时如果函数引用有上下文对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

function test(){ console.log(this.a); } var obj = { a:3, test:test }; obj.test(); // 3

对象obj中包含两个属性a和test，其值分别是3和一个函数test()。
obj.test()表示函数引用时有上下文对象(也就是这里的obj)。
根据隐式绑定规则，会把test()中的this绑定到这个上下文对象，即this被绑定到obj，this.a===obj.a。
所以结果为3。
如果懂了，那么下面的例子也就会做了

function test(){ console.log(this.a); } var obj2 = { a:4, test: test }; var obj1 = { a:400, obj2: obj2 } obj1.obj2.test()// 4

看起来复杂了些，不过只要记住下面这个准则就可以了。

对象属性引用链中，只有上一层或者说最后一层在调用位置中起作用

2.1 隐式丢失

function foo(){ console.log(this.a); } var obj = { a:5, foo:foo }; var bar = obj.foo; // 函数别名 var a = "global"; bar(); // "global"

虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
再看一个例子：

function foo(){ console.log(this.a); } function doFoo(fn){ fn(); } var obj = { a:5, foo:foo } var a = "oops, global"; doFoo(obj.foo); // "oops, global"

其实和上面的没什么区别，只是这里把函数作为参数传递了，参数传递是一种隐式赋值。此时的this指向的是调用它的函数的对象即全局对象，因此应用了默认绑定。
如果把foo()函数传入语言内置的函数而不是传入自己声明的函数doFoo，又会怎样呢？

function foo() { console.log(this.a); } var obj = { a: 5, foo: foo }; var a = "oops, global" setTimeout(obj.foo, 100); // "oops, global"

Javascript环境中内置的setTimeout()函数实现和下面的伪代码类似：

function setTimeout(fn, delay) { // 等待delay毫秒 fn(); // <-- 调用位置 }

因此回调函数丢失this绑定是非常常见的，有时候调用回调函数的函数还有可能会修改this。
3.this与apply,call,bind(显示绑定) 回顾一下隐式绑定，其关键是把函数当作引用属性添加到了对象中，通过这个属性间接引用这个函数，把this简介（隐式）绑定到这个对象上。
如果不想在对象内部包含函数引用，而想简单粗暴地在某个对象强制调用一个函数，这时就用到了函数的call()和apply()方法。
call和apply，以往我单纯理解为“控制this的指向”，现在才发现是原来是this绑定规则中的一种。
call和apply区别
apply接收的是数组参数，call接收的是连续参数。所以当传入的参数数目不确定时，多使用apply。
（tips:这里推荐个方法记忆apply和call各自接收的参数：apply为a开头，数组Array也是a开头，所以apply接收的是数组参数）
3.1 call

var xw = { name : "小王", gender : "男", age : 24, say : function(school,grade) { alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); } } var xh = { name : "小红", gender : "女", age : 12 }xw.say.call(xh, "实验小学", "六年级")

当调用say时强制把它的this绑定到xh上.
如果你传入了一个原始值（字符串类型，布尔类型或者数字类型）来当作this的绑定对象，这个原始值会被它的对象形式（也就是 new Strgin（...）、new Boolean(...)或者 new Number(...)）。这通常被称为“装箱”。
3.2 apply

var xw = { name : "小王", gender : "男", age : 24, say : function(school,grade) { alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); } } var xh = { name : "小红", gender : "女", age : 12 }xw.say.apply(xh,["实验小学","六年级"]);

3.3 bind

var xw = { name : "小王", gender : "男", age : 24, say : function(school,grade) { alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); } } var xh = { name : "小红", gender : "女", age : 12 }xw.say.bind(xh)("实验小学","六年级");

这些例子也可以明显的看到call,apply,bind的区别。call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的。而bind返回的仍然是一个函数，所以是在调用的时候再进行传参。
3.4 显示绑定的变种-硬绑定
扯远了，前面说到隐式丢失的问题，显示绑定的一个变种可以解决这种问题。
回顾当初隐式丢失的第二个例子。

function foo(){ console.log(this.a); } function doFoo(fn){ fn(); } var obj = { a:5, foo:foo } var a = "oops, global"; doFoo(obj.foo); // "oops, global"

将其修改成：

function foo(){ console.log(this.a); } function doFoo(fn){ fn.call(obj); } var obj = { a:5, foo:foo } var a = "oops, global"; doFoo(obj.foo); // 5

依旧是创建了doFoo()这个函数，但是在其内部手动调用了obj.foo.call(obj)，把foo()强制绑定到了obj对象，之后无论如何调用doFoo()，它总会手动在obj上调用foo.
再回顾隐式丢失的第一个例子

function foo(){ console.log(this.a); } var obj = { a:5, foo:foo }; var bar = obj.foo; // 函数别名 var a = "global"; bar(); // "global"

将其改成：

function foo(){ console.log(this.a); } var obj = { a:5, foo:foo }; var bar = obj.foo.bind(obj); // 函数别名 var a = "global"; bar(); // "5"

总结下“显示绑定三人组”

共同点：
1、都用于控制this指向；
2、第一个参数都是this需要指向的对象，也就是上下文；
3、都可以后续参数传递;
4、没有任何参数时，this都指向全局对象window >
区别：
1、call、apply绑定后立刻执行，bind是延迟执行。换言之，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，就使用bind()方法吧

4.this与new (new绑定) 使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作：