JavaScript中设计最出色的就是它的函数实现,函数是JS的基本单元,而this又是函数里面特别重要的一个属性。
this和其他的语言指向不太一样,在JavaScript中this的值取决于调用的模式。
在JavaScript中一共有4种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。不同的模式在如何初始化this上存在差异。
先说下方法调用模式和函数调用模式的区别:当一个函数被保存为对象的一个属性时,我们称他为一个方法。当一个函数并非一个对象的属性时,那么它就是被当作一个函数来调用的。
一、方法调用模式
当一个方法被调用时,this被绑定到该对象上面。如果调用方式包含一个提取属性的动作(包含一个.点表达式或者[subscript]下标表达式),那么它就是被当作一个方法来调用。
//创建myObject对象,它有一个value属性和一个incurement方法 //incremtnt方法接受一个可选的参数。如果参数不是数字,那么默认使用数字1; var myObject = { value: 0, increment: function(inc){ this.value += typeof inc === ‘number‘ ? inc : 1; } }; myObject.increment(); document.wirteln(myObject.value); //1 myObject.increment(2); document.wirteln(myObject.value); //3
this指向的为调用该方法的对象。
二、函数调用模式
当一个函数并非一个对象的属性时,那么它就是被当作一个函数来调用的:
var sum = add(3,4); //sum 的值为7
此模式下调用函数,this被绑定到全局对象。页面上的话全局对象就是window对象。node下应该是global对象。
特此强调:即使在函数内部调用,只要属于函数调用模式,this也是指向window对象。例子如下:
var value = 5; var myObject = { value : 3, showValue: function(){ var value = 4; var helper = function(){ console.log(this.value); }; helper(); //5 } } myObject.showValue();
在执行helper函数的时候,其中的this并不是指向它的外部函数showValue,也没有指向myObject对象,而是全局对象。
三、构造器调用模式
构造器调用简单点讲就是指构造函数的创建,就是new一个对象。js每一个函数即是普通的函数,也是一个构造函数,可以直接使用new关键字创建一个实例对象。
var my = function(value){ this.value = value; this.fun = function(){ console.log(this.value); } } var myObj = new my(‘first‘); myObj.value = ‘second‘; myObj.fun(); //‘second‘
new 在实例化一个对象的时候,会经历以下4个步骤:
1、创建一个新对象
2、讲构造函数的作用域赋给新对象(就是将this指向了这个新对象)
3、执行构造函数中的代码(为这个新对象添加属性)
4、返回这个新对象
所以,该模式下this指向的是实例化的对象。
四、Apply调用模式
因为JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。
apply方法接受两个参数,第一个是要绑定的this的值,第二个是一个参数数组。
当一个方法调用apply方法的时候,首先是用apply的第一个参数替换调用方法的this对象,
然后用apply的第二个参数代替该方法的参数。