【夯实基础】《JavaScript设计模式与开发实践》笔记——this、call 和 apply

this、call 和 apply

this

跟别的语言大相径庭的是，JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

this的指向

除去不常用的 with 和 eval 的情况，具体到实际应用中，this 的指向大致可以分为以下 4 种

作为对象的方法调用

当函数作为对象的方法被调用时，this 指向该对象:

var obj = { 
	a: 1,
	getA: function(){
		alert ( this === obj ); // 输出:true alert ( this.a ); // 输出: 1
	}
};
obj.getA();

作为普通函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的 this 总是指向全局对象。在浏览器的 JavaScript 里，这个全局对象是 window 对象。

window.name = 'globalName';
var getName = function(){
	return this.name;
};
console.log( getName() ); // globalName
// 或者:
window.name = 'globalName';
var myObject = {
	name: 'sven',
	getName: function(){
		return this.name;
	}
};
var getName = myObject.getName;
console.log( getName() ); // globalName

构造器调用

JavaScript 中没有类，但是可以从构造器中创建对象，同时也提供了 new 运算符，使得构造
器看起来更像一个类。
除了宿主提供的一些内置函数，大部分 JavaScript 函数都可以当作构造器使用。构造器的外 表跟普通函数一模一样，它们的区别在于被调用的方式。当用 new 运算符调用函数时，该函数总 会返回一个对象，通常情况下，构造器里的 this 就指向返回的这个对象。

var MyClass = function(){
	this.name = 'sven';
};
var obj = new MyClass();
alert ( obj.name ); // 输出:sve

注意：如果构造器显式地返回了一个 object 类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前期待的 this。

Function.prototype.call 或 Function.prototype.apply 调用

跟普通的函数调用相比，用 Function.prototype.call 或 Function.prototype.apply 可以动态地改变传入函数的 this

var obj1 = {
	name: 'sven',
	getName: function(){
		return this.name;
	}
};
var obj2 = { name: 'anne'};
console.log( obj1.getName() );
// 输出: sven console.log( obj1.getName.call( obj2 ) ); // 输出:anne

call 和 apply

ECAMScript 3 给 Function 的原型定义了两个方法，它们是 Function.prototype.call 和 Function. prototype.apply

call和apply的区别

apply

• apply 接受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下 标的集合，这个集合可以为数组，也可以为类数组，apply 方法把这个集合中的元素作为参数传 递给被调用的函数:

var func = function( a, b, c ){
	alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.apply( null, [ 1, 2, 3 ] );

call

• call 第一个参数也是代表函数体内的 this 指向， 从第二个参数开始往后，每个参数被依次传入函数:

var func = function( a, b, c ){
	alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.call( null, 1, 2, 3 );

call和apply的用途

1. 改变 this 指向
2. Function.prototype.bind
   模拟 bind 方法：

Function.prototype.bind = function(){
	var self = this, // 保存原函数
	context = [].shift.call( arguments ),
	args = [].slice.call( arguments ); return function(){ // 返回一个新的函数
	// 需要绑定的 this 上下文 // 剩余的参数转成数组
	return self.apply( context, [].concat.call( args, [].slice.call( arguments )) ); 
	// 执行新的函数的时候，会把之前传入的 context 当作新函数体内的 this
	// 并且组合两次分别传入的参数，作为新函数的参数
} };
var obj = {
	name: 'sven'
};
var func = function( a, b, c, d ){
	alert ( this.name ); // 输出:sven
	alert ( [ a, b, c, d ] ) // 输出:[ 1, 2, 3, 4 ]
}.bind( obj, 1, 2 );
func( 3, 4 );

3. 借用其他对象的方法

• 场景一：借用构造函数

var A = function( name ){
	this.name = name;
};
var B = function(){
	A.apply( this, arguments );
};
B.prototype.getName = function () {
	return this.name;
};
var b = new B( 'sven');
console.log( b.getName() ); // 输出: 'sven'

• 场景二：函数的参数列表 arguments 借用数组方法

(function(){
	Array.prototype.push.call( arguments, 3 );
	console.log ( arguments ); // 输出[1,2,3]
})( 1, 2 );