this是JS语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。例如：
function(){
this.x = 1;
}
随着函数使用场合的不同，this的指向也会相应发生变化，但是有一个总原则，this总是指向调用函数的那个对象。
下面分四种情况说说this的用法。
情况一：函数调用:
1.这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。
function fn1(){
console.log(this)
}
fn1() //window对象
- 函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量：
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0(); //window对象
- 回调函数：
var a = 1
function f1(fn){
fn()
console.log(a)//1
}
function f2(){
var a = 2
}
f1(f2)
改写代码如下：
var a = 1
function f1(){
(function (){var a = 2})()
console.log(a)
}
f1() //1
4.定时器中的this：
《高程》上说：超时调用的代码都是在全局作用域中执行的。因此，setTimeout和setInterval的回调函数中的this指向window.
var name = 'Lee';
function fn(){
this.name = 'li';
this.sayName = function(){
console.log(this.name);
}
setTimeout(this.sayName,1000)
}
new fn() //Lee
上面代码中，定时器中this.sayName的this指向创建的实例，而sayName里面的this指向全局作用域。
情况二：作为对象的方法调用：
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
obj1.fn() //2
此时的this是指obj1这个对象,因为是obj1调用了函数fn。
- 但若是把函数赋值之后再调用：
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
var fn1 = obj1.fn
fn1()//1
此时fn1就是不带任何修饰的函数调用，因此它的this绑定的就是window，它也被称为隐性绑定,相当于obj1.fn.call(undefined)
情况三：在构造函数中调用：
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
function Person(name,age){
// 这里的this都指向实例
this.name = name
this.age = age
this.sayAge = function(){
console.log(this.age)
}
}
var li = new Person('Li',24)
li.sayAge() //24
情况四：call/apply/bind调用：
call、apply、bind方法的作用都是改变函数this的指向。
-
call和apply：
call和apply方法都接受两个参数，第一个参数都是this要指向的对象，而call的后面传入的是一个参数列表，apply的第二个参数为一个参数数组。他们的第一个参数为endefined或null时，this均指向window。
也就是说：
obj.method() = obj.method.call(obj);
fn() = fn.call(endefined);
f1(f2) = f1.call(undefined,f2);
例如：
var n = 123;
var obj = { n: 456 };
function a() {
console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(obj) // 456
function f(x,y){
console.log(x+y);
}
f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2
应用场景：
- 求数组中的最大值和最小值：
var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1
- 将类数组转化为数组
var trueArr = Array.prototype.slice.call(arrayLike)
- 不改变原数组的情况下数组追加
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
- 判断变量类型
function isArray(obj){
return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('abc') // false
- 利用call和apply做继承
function Person(name,age){
// 这里的this都指向实例
this.name = name
this.age = age
this.sayAge = function(){
console.log(this.age)
}
}
function Boy(){
Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var person = new Boy('li',24)
- 使用 log 代理 console.log
function log(){
console.log.apply(console, arguments);
}
// 当然也有更方便的 var log = console.log()
2.bind：
和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是改变了上下文的函数。
var obj = {
name: 'Li'
}
function printName() {
console.log(this.name)
}
var person = printName.bind(obj)
console.log(person) // function () { … }
person() // Li
