JavaScript中的this

在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；apply 、 call 、bind 三者都可以利用后续参数传参； bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用。

// 首选定义一个函数 fn1, 并且给它定义两个形参

function fn1(a,b) {
	console.log(this);
	console.log(a);
	console.log(b);
	return '运行结束';
}

// fn1 函数正常运行的结果

function fn2() {
	fn1('普通参数一', '普通参数二');
	return '执行完毕';
}

// 使用 call 改变 this 指向之后的的结果

function fn3() {
	fn1.call('测试CALL', '北京', '上海');
	return '执行完毕';
}

// 使用 apply 改变 this 指向之后的结果

function fn4() {
	fn1.apply('测试APPLY', ['亚运村', '波音747-400']);
	return '执行完毕';
}

// call可以继承父级的属性和方法

function A() {
	this.abc = '南京';
}

function B() {
	A.call(this);
}

// 通过以下两种赋值的方法使 A 和 B 原型上的方法实现共享

A.prototype = B.prototype;
B.prototype = A.prototype;

// 通过深克隆的方法实现仅 A 原型的方法单向的共享给 B

for(var i in A.prototype) {
	B.prototype[i] = A.prototype[i];
}

A.prototype.sayA = function() {
	console.log('我是A()原型上的方法。');
}

B.prototype.sayB = function() {
	console.log('我是B()原型上的方法。');
}

// 实例化创建一个 obj1 和 obj2，可查看二者原型上的方法有什么不同

var obj1 = new A();
var obj2 = new B();

// 下面定时器中的 this 原本是 window，但是我们通过 bind 将 window 扭转为 #document

document.onclick = function () {
	console.log(this);
	setTimeout(function () {
		console.log(this)
	}.bind(this), 1000)
}