JavaScript面向对象编程之this关键字

this总是返回一个对象，简单说，就是返回属性或方法“当前”所在的对象。

1.在全局环境使用this，它指的就是顶层对象window。

console.log(this);//window
var a=2;
this.a;//2
function f(){console.log(this);}
f();//window

2.构造函数中的this，指的是实例对象。

function F(){this.price=2;}
var f=new F();
f.price;//2

3.对象通过点运算符调用方法，方法中的this指的是该对象。

var obj={
a:1,
f:function(){console.log(this);this.a=2;}
}
obj.f();
obj.a;

4.函数赋值给另一个变量，函数内的this代表调用函数运行时所在的对象。

var obj={
f:function(){console.log(this);}
}
var foo=obj.f;
foo();//window

5.先运算，后执行，在全局环境执行运算结果，this指向全局环境

var obj={
f:function(){console.log(this);}
}
(1,obj.f)()//window

6.避免多层this

var o = {
f1: function () {
console.log(this);
var f2 = function () {
console.log(this);
}();//先执行，后赋值，没有被o对象调用
}
}

o.f1()
// Object
// Window

7.foreach方法的回调函数中的this，指向window对象

var arr=[1,2,3];
arr.foreach(function(item){console.log(this);})

8.避免回调函数中的this

var o = new Object();

o.f = function () {
console.log(this === o);
}
o.f()//true
$('#button').on('click', o.f);//false

JavaScript提供了call、apply、bind这三个方法，来切换/固定this的指向。

function.prototype.call()

1.参数应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

2.如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。

3.call方法还可以接受多个参数。第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

var n=1;
var obj={n:2};
function f(){console.log(this.n);}
f.call(obj);//2
f.call(window);//1
f.call(null);//1
f.call();//1

function add(a,b){console.log(a+b);}
add.call(this,1,2);//3

call方法的一个应用是调用对象的原生方法。

var obj={};
obj.hasOwnProperty('toString');//false
obj.hasOwnProperty=function(){return true;}
obj.hasOwnProperty('toString);//true
//hasOwnProperty方法被覆盖，如何才能使用原来的方法呢？
Object.prototype.hasOwnProperty.call(obj,'toString');//false

function.prototype.apply()

接收一个数组作为函数执行时的参数，使用格式:

function.apply(thisValue, [arg1, arg2, …])

一些有趣的应用

1.Math.max()和apply结合—求数组的最大元素

Math.max(1,2,3)//3
Math.max.apply(null,[1,2,3])//3

2.Array构造函数和apply结合—将数组的空元素变为undefined

Array.apply(null,[1,,2])//[1, undefined, 2]

数组的forEach方法会跳过空元素，但是不会跳过undefined。

Array.apply(null,[1,,3]).forEach(function(item){console.log(item);})
//1
//undefined
//3
[1,,3].forEach(function(item){console.log(item);})
//1
//3

3.slice和apply结合–将类似数组的对象转换为数组

var a={0:'a',1:'b',length:3};
Array.prototype.slice.apply(a);
//["a", "b", undefined]
Array.prototype.slice.apply(arguments);
Array.prototype.slice.call(arguments);
[].slice.apply(arguments);

对象必须有length属性

apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数。

function.prototype.bind()

1.用于将函数体内的this绑定到某个对象，然后返回一个新函数，没有立即执行

var obj={
count:0,
inc:function(){this.count++;}
}
obj.count;//0
obj.inc();
obj.count;//1
var f=obj.inc;
f();
obj.count;//1
count;//NaN

改成：

bb8b

var f=obj.inc.bind(obj);//产生一个新函数，函数中的this固定指向obj
f();
obj.count;//2

2.绑定this以外，还可以绑定原函数的参数

function add(x,y){return this.m+x+y;}
var obj={m:1}
var f=add.bind(obj,3);//传入x为3
f(2);

3.对于那些不支持bind方法的老式浏览器，可以自行定义bind方法。

if(!('bind' in Function.prototype)){
Function.prototype.bind=function(){
var fn=this;
var context=arguments[0];
var args=[].slice.call(arguments,1);
return function{
return fn.apply(context,args);
}
}
}

4.利用bind方法，可以改写一些JavaScript原生方法的使用形式，以数组的slice方法为例。

[1, 2, 3].slice(0, 1)
// [1]

// 等同于

Array.prototype.slice.call([1, 2, 3], 0, 1)
// [1]

//等同于
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1)
// [1]
//o.slice(args)->slice(o,args)